WordPress Sitenizi 12 Adımda Hızlandırın

WordPress sunduğu esneklik ve kolay çözümler sayesinde giderek daha fazla yaygınlaşıyor. Bugün dünya genelindeki Web sitelerinin %30’dan fazlası WordPress içerik yönetim sistemi kullanıyor.

Açık kaynak kodlu bu yazılımın daha iyi bir yükleme hızı sağlaması için Google mühendisleri başta olmak üzere WordPress geliştiricileri ve tema üreticileri ortak akıl yürüyorlar. Bu yazımızda WordPress sitenizin daha iyi bir yükleme hızı sunabilmesi için yapmanız gereken iyileştirmeleri derledik. Gelin hep birlikte WordPress sitenizi uçuşa geçirelim!

WordPress ve Sayfa Yükleme Hızı

Günümüzde WordPress kurumsal şirketlerin bile kullanmaya başladığı oldukça yaygın bir yönetim platformu hale geldi. WordPress yönetmesi kolay, esnek, hızlı ve popüler bir arayüz ile ister bireysel ister kurumsal kullanıcılar için seçenekleri bol bir kontrol yapısı sunuyor. Açık kaynaklı olması sayesinde de üçüncü parti katılımı ve katkısı oldukça üst düzeyde olan bu platform herkesin kullanabileceği kolaylıkta. Bazı sorunları çözmek veya yeni özellikler eklemek için uzman görüşü almanız gerekebilir ancak bunun dışındaki genel kullanımında, karşılaştığınız sorunları kendi başınıza halledebilirsiniz.

Sayfa yükleme hızı konusunda da tek başınıza yapabilecekleriniz var. Yeni bir site üzerinde çalışıyorsanız veya mevcut sitenizi hızlandırmak istiyorsanız, aşağıdaki önerilere göz atmanızı tavsiye ederiz.

Sunucu ve kodlama konusundaki seçimleriniz sayfa yükleme hızını doğrudan etkileyebilir, WordPress’te ne kadar optimizasyon yaparsanız yapın, düşük hıza sahip bir sunucu çabalarınızı sonuçsuz bırakabilir. Bu sebeple biz optimizasyon ipuçlarımıza WordPress ile devam edeceğiz. ilk başlamanız gereken yerin tema olduğunu söyleyebiliriz. Oldukça geniş kapsamlı, ücretsiz ve ücretli binlerce WordPress teması bulmanız mümkün. Temalar özelleştirilebilir olduğu için hepsi temelde aynıdır dersek yanlış olmaz ancak bir tema diğerinden çok farklı fonksiyonlara sahip olabilir. Fakat ilk olarak seçtiğiniz temanın mobil ziyaretçilere esnek bir mobil site sunabileceğinden emin olmanızı tavsiye ederiz. Yani esnek (responsive) bir mobil site, kullanıcı deneyimini iyileştirmekle birlikte sayfa yükleme hızını da doğrudan etkileyebilir.

Temanın sahip olduğu fonksiyonlar ne kadar fazlaysa, yükleme hızını o kadar olumsuz etkilemesi söz konusu olabilir. Aynı şekilde tema haricindeki WordPress eklentileri de sayfa yükleme hızını olumsuz etkileyen faktörlerdendir. Ancak WordPress ile oluşturulmuş bir Web sitesinde eklentilerden bahsetmemek mümkün değildir. Özellikle WordPress bazında ele aldığımızda eklentiler hayat kurtarıcı rollere bürünebilirler. Bu konuda verebileceğimiz yegane ipucu, kullanıcılarınızın en çok hangi sayfalarınızı ziyaret ettiğini tespit edip optimizasyona o sayfalardan başlamanızdır. Bazı eklentiler söz konusu sayfalarda kullanıcıların ihtiyaç duymayacağı fonksiyonlara sahip olabilir, bu durumda o eklentileri kullanıcıların sık ziyaret ettiği sayfalardan kaldırmayı deneyebilirsiniz.

Web Siteniz Ne Kadar Hızlı Yükleniyor?

Bu sorunun cevabı çok görecelidir. Kullanılan teknoloji, ağ, cihaz, konum, sunucu, kodlama gibi birçok faktör yükleme hızını etkileyebilecek elementler haline gelebilir. Google Chrome, Lighthouse, Speed Test Insights gibi araçlarla yapacağınız testler sırasında bu koşulları kısmen de olsa belirleme şansınız var.

Örnek olarak yukarıda da görebileceğiniz gibi Google Chrome geliştirici seçeneklerinde (F12 veya sağ tıklayıp – incele seçerek giriş yapabilirsiniz) “Network” bölümünde yer alan “online” seçeneği altında bağlantı seçimi yapabilir ve sayfayı yeniden yükledikten sonra istatistiklere göz atabilirsiniz.

Yukarıda örnek olarak yaptığımız testte “Slow 3G” bağlantısını taklit ederek sitemizin ve kaynakların yüklenmesini inceledik. Biz kendi Web sitemizde WP Engine kullanıyoruz ve sunucu hızından oldukça memnunuz. Hem WordPress için çok uygun hem de fonksiyonel ve kullanımı kolay bir konfigürasyon sunuyor.

Hepsinden önemlisi, sormak istediğimiz bir soru var: Bugün hangimiz yüklemesi 10 saniye süren bir web sitesine tahammül edecek durumdayız? Yapılan pek çok analize göre web sitenizin açılma hızı sadece 1 saniye artış gösterirse, bu ortalama %70 civarında bir geliştirme demektir.

Özellikle WordPress kullanıcıları için, birkaç düzenlemeyle site hızını artırmak mümkün. Bu yazımızda aşağıdaki konulardan bahsedeceğiz:

-Sitenizi yavaşlatan eklentileri (Plugin) nasıl tespit edebiliriz?
-Sitenizin altyapısını temiz tutmak için neler yapabilirsiniz?
-Sitenizde bulunan HTML sayfalarını, imajları, JavaScript kodlarını ve CSS dosyalarını sıkıştırılmış halde tutmak için neler yapmak gerekir?
-Tarayıcı önbelleklemesini doğru bir şekilde nasıl ayarlayabilirsiniz?

Tabi ki bu düzenlemelerin sonuç vermesi için ilk dikkat etmemiz gereken şey, sitemizi hızlı ve iyi bir hosting şirketine teslim etmemiz gerektiğidir. İkinci olarak, iyi bir tema seçmemiz gerekiyor. Ne yazık ki, tüm WordPress temaları eşit hıza ve fonksiyonelliğe sahip değiller. Örneğin, WordPress’in varsayılan teması “Genesis”, diğer temalardan en az 0.5 saniye daha hızlı yükleniyor. Temaların ne kadar hızlı olup olmadığını görmek için, tema düzenlemesi yaptıktan sonra Google Page Speed Insights aracıyla test yapmanızı tavsiye ederiz.

Bu düzenlemeler yapıldıktan sonra, bir sitenin hızlı olmasını sağlayan en önemli faktörlerden biri de, “CDN ağı” denen, sitedeki içerikleri farklı bir sunucuda barındırmanızı sağlayan ağa sahip olmaktır. Peki bu ne işe yarar?

Günümüzde Web Tarayıcıları (Google Chrome, Firefox, Opera, Safari, Internet Explorer vs.) eğer sitenizdeki içerik tek bir sunucuda toplanmışsa, hepsini bir defada okumaya çalışacak ve bu da yavaşlığa sebep olacaktır. Eğer CDN sunucusu kullanırsanız, tarayıcı, içeriği paralel olarak okuma şansına sahip olacak ve hem site içeriğini hem de yüksek boyutlu içeriği aynı anda derleyerek kullanıcıya daha hızlı ulaştıracaktır. Yapılan testler, CDN sunucusu kullanmanın, ortalama %55 civarında hızlanma sağladığını göstermektedir.

İlk üç madde, sunucu tarafında yapacağımız ana düzenlemelerden ibaretti. Şimdi, WordPress içerisinde nasıl düzenlemeler yapabileceğimizi görelim:

1: Sitenizi Yavaşlatan Eklentileri (plugin) Tespit Etmek:

P3 Profiler isimli eklenti, sitenizde çalışmakta olan eklentileri, temaları vb. tarayarak, hızlarını ölçmekte ve hangi eklentinin sitenizi ne kadar yavaşlattığını göstermektedir. Örnek olarak, yaptığım testten birkaç ekran görüntüsü paylaşmak istiyorum:

Gördüğünüz gibi, SEO Ultimate adlı eklenti, örnekte siteyi yavaşlatan eklentilerin başında geliyor. Peki bu durumda ne yapabilirsiniz? Site hızınızı bu büyüklükte etkilemeyecek başka bir eklenti bulmaya çalışabilirsiniz.

2: Sitenizi Sıkıştırın:
Web sayfalarının boyutu, normalde düşündüğümüzden çok daha büyüktür. Örneğin, 65 kb büyüklüğünde bir dosya çok gözümüze batmayabilir. Ancak bir araya gelen birçok dosyanın ortaya çıkardığı tablo, ciddi şekilde kaygı verici olabilir. Gzip, sitenizdeki dosyaları sıkıştırmanız için kullanılabilecek en uygun araçtır. Az önce örneğini verdiğimiz küçük web sitesini test ettiğimizde, aşağıdaki gibi şaşırtıcı bir sonuçla karşılaşırız:

3: Görselleri Sıkıştırın:
İmajlar, bir sitenin yavaş olmasına sebep olan en büyük etkenlerden biridir. WordPress için, WP-Smush isimli eklenti, bu soruna çare olabilecek en iyi eklentilerden biridir. Eğer Photoshop ya da Gimp gibi profosyonel araçları kullanmak konusunda bilginiz yoksa, WP-Smush size ilaç gibi gelecektir.

4: Tarayıcı Önbelleklemesini Aktif Hale Getirin:

“Tarayıcı önbelleklemesi” tek başına size bir anlam ifade etmeyebilir ve kavram kafanızı karıştırabilir. Tarayıcılar, bir kullanıcı bir web sayfasını ziyaret ettiğinde, sayfadaki öğeleri belleklerine alırlar. Bu sayede, kullanıcı sayfaya tekrar gelirse, yükleme hızı daha da yüksek olacaktır. WP Super Cache isimli eklenti, bu konuda size yardımcı olabilecek faydalı bir eklentidir.

5: Altyapıyı Temiz Tutun:

“Database” dediğimizde, orta ve alt düzeydeki site yöneticileri terlemeye başlarlar. Ancak WordPress, bu açıdan işinizi ciddi şekilde kolaylaştırıyor. WP-Optimize isimli eklenti, sitenizdeki dosyaları ve çöpleri düzenli olarak temizliyor, sıkışmalara ve şişmelere aman vermiyor.

6: JavaScript ve CSS Dosyalarını Küçültün:
Bir sitenin yavaşlamasına sebep olan diğer önemli etkenler ise, JavaScript kodları ve CSS Stil dosyalarıdır. JavaScript, küçültülebilir kodlardan meydana gelmektedir. Ayrıca bu kodlar, tarayıcının sayfayı görüntüleme aşamasındaki isteklerini sonsuz döngüye sokabileceği için, bazı öğelerin yüklenememesine sebep olabilirler. Bu açıdan JavaScript kodlarının düzeltilmesi ve küçültülmesi çok sağlıklı olacaktır.

CSS Stil dosyaları, sayfanızın nasıl görüneceğini, çerçevelerin, butonların, yazıların nerede ve nasıl duracağını belirler. Bir sitenin sade veya şaşalı görünmesini istiyorsak, CSS’ye başvururuz. Basit siteler bile, CSS fonksiyonları nedeniyle yavaşlayabilirler. Bu açıdan, CSS stil dosyalarının sıkıştırılması sağlıklıdır. Hem JavaScript, hem de CSS kodlarını küçültmek ve düzenlemek için, “Better WordPress Minify” isimli eklentiyi kullanabilirsiniz.

7: PingBack ve TrackBack Özelliğini Kapatın:

PingBack ve TrackBack özellikleri, diğer WordPress siteleri sayfanıza link verdiğinde çalışan bir tür uyarı sistemidir. Link takibi için AHrefs veya MajesticSEO gibi harici araçları kullanmak daha sağlıklı olacaktır. Bu özelliği kapatmak için, WordPress yönetici panelindeyken “Ayarlar – Tartışma” (ya da, Settings – Discussion) bölümüne gidebilirsiniz.

8: Görsel Çözünürlüğünü ve Karakter Setinizi Standart Hale Getirin:

Bir kullanıcı sitenize geldiğinde, sitenizde birden fazla karakter seti kullanıyorsanız veya görsellerinizin çözünürlükleri farklı farklıysa, tarayıcınız hepsinin yüklenmesi için ayrı ayrı çalışacaktır. Bu da, sayfanızın yükleme hızına negatif etki edecektir.
Sayfanıza yükleyeceğiniz görsellerin hepsinin, standart çözünürlüklere sahip olmasına dikkat edin. Sitenizde bulunan yazılı içeriğin hepsinin, aynı yazı tipine (font) sahip olduğundan emin olun.

9: CSS Dosyalarını HTML Kodunun En Üstüne, JavaScript Dosyalarını da HTML Kodunun En Altına Yerleştirin:

Tarayıcılar, CSS stil dosyasını taramadan önce sitenizi tarayıp yükleyemezler. Bu sebeple, CSS dosyalarının en başta taranması gerekir. Tarayıcı, kodları yukarıdan aşağıya doğru taradığı için, CSS dosyalarının en üstte, HTML kodlarının başlangıcına yakın olması gerekir.

JavaScript kodları ise, 6. Maddede bahsettiğimiz gibi, sayfa yüklemesinin ortasındayken tarayıcıyı sonsuz döngüye sokup yüklemenin yarım kalmasına sebep olabilirler. Bu durumun yaşanmaması için, JavaScript kodlarını HTML kodlarının bittiği bölümün yakınlarına yerleştirin.

10: CSS Dosyalarınızda Sprite Özelliğini Kullanın:

CSS Stil dosyaları, bir araya gelmiş görsel fonksiyonalite dosyalarıdır. Sitemizde gördüğümüz bazı butonlar, arka plan görselleri, çerçeveler, kenar çubukları vs, CSS paketi içerisinde yer alır. CSS paketlerinin de belli bir boyutu vardır ve bu öğeler de küçültülebilirler.

Küçültme işlemi, CSS paketleri içerisindeki öğelerin, daha küçük ve daha hafif öğelerle değiştirilmesiyle gerçekleşir. Değiştirilen dosyalara, “CSS Sprite” adı verilir. SpriteMe kodunu kullanarak, bu düzenlemeyi yapabilirsiniz.

11: “Keep Alive” Özelliğini Kullanın:

HTTP Keep Alive özelliği, Tarayıcının, site sunucusundaki erişime açık olan tüm dosyaları izin istemeden yüklemesini sağlar. Böylece kullanıcı siteyi ziyaret ettiğinde, bant genişliği hakkı verilerek kullanılır.

12: PHP Kodlarını HTML Kodlarıyla Değiştirin:

PHP, web sitesi yapmak için harika bir kod sistemine sahip. Ancak sunucu kaynaklarını yüksek düzeyde kullandığı için, hız problemlerine yol açma ihtimali çok yüksektir. Sitenizin hızlı açılması için, mümkün olabildiğince PHP kodlarını HTML kodlarıyla değiştirin veya PHP’yi minimum düzeyde kullanmaya çalışın.

SONUÇ:

Web kullanıcılarının %47’si, sayfanızın 2 saniyenin altında açılmasını bekliyor. 2006 yılında Amazon.com’da yapılan bir araştırmaya göre, 100 mili saniyelik artış, site cirosunda %1 oranında artış sağlamış. Teknoloji ve internet çağında, hız her şey demek. Eğer Web siteniz yavaşsa, çağın gerisinde kalmış kabul ediliyorsunuz.