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

Bu soruyu sormamızın önemli sebepleri var:

• Sitenize gelen kullanıcıların ortalama %60’ı, eğer sayfalarınız yavaş açılıyorsa sitenizi terk etmeye meyillidir,
• Site hızının düşük olması ve kullanıcıların sitenizi terk etmesine bağlı olarak, “Hemen Çıkma Oranı” (bkz: Google Analytics) arttığı için, sitenizin kalite puanı düşebilir,
• Siteniz Google Page Speed Insights testinden düşük puan alıyorsa, sıralamalarda değer kaybedebilir;
  2010 yılında yapılan açıklamaya göre, Site Yükleme Hızı Google’da önemli bir sıralama kriteri haline gelmiştir.

Tüm bunları bir kenara bırakalım; 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?

Tabiki 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:

(Gzip testini http://checkgzipcompression.com/ adresinden yapabilirsiniz)

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.

WordPress ile ilgili bu tür ipuçları için başvurabileceğiniz önemli bir kaynak: www.smashingmagazine.com

Emre Ercan

Expert at Stradiji

Ben Emre Ercan,
Stradiji Dijtal Pazarlama bünyesinde SEO Uzmanı olarak görev yapmaktayım. Geçmişten beri teknoloji ve internet dünyasıyla olan yakından ilişkim sayesinde SEO'nun olumlu etkilerini müşterilerimize yansıtmak için canla başla çalışmaktayım.