İçeriğe geç

WordPress sitelerini Google dostu hazırlamak, Pagespeed skorlarını 100/100 hale getirmek

WordPress sitelerini Google dostu hazırlamak, Pagespeed skorlarını 100/100 hale getirmek

Bir çok geliştiricinin, belkide farkında olmayı en çok istediği ve en çok araştırılan konulardan bir tanesi de, wordpress google pagespeed yani, Google ‘ın pagespeed insights servisinin kabul gören puanı alabilmek. Tabi bunun için uzun uzadıya yazılan makaleler, araştırma sonuçlar ve tecrübeye sahip olan insanların paylaştıkları çok fazla şeyin yanı sıra, iş görmeyen de bir dünya makale yok değil.

Günümüzde, tamamen re-marketing amaçlı yazılan, SEO ‘ya oynayıp, reklam – pazarlama modellemesi ile kurgulanan içeriklerden oluşan çöp blogları saymadığınız takdirde, pek de derli toplu olarak not görünmüyor gibi. Dolayısı ile, hem yıllar sonra keyifle yazmak hem de daha faydalı olması amacı ile, WordPress SEO ve Google Pagespeed Insights optimizasyonu temalı bu içeriği oluşturmaya karar verdim diyebilirim.

WordPress google pagespeed optimizasyonu

Aslında bu içerik bir çok ana başlıktan oluşacak, bu makale bu ileriki oluşturulacak içeriklerin indeksi olarak düşünülebilir. Temel netlikte yazdıklarımdan ziyade yakın gelecekte, içeriklerle alakalı detaylı analizleri de yeni makaleler ile buralara eklemeyi planlıyorum.

CSS Delivery (CSS yayını servisi)

CSS yayınınızın servisi oldukça önemli. Hem valid standartlarda, hem de belli kriterler doğrultusunda değerlendirilmesi gerekiyor.Bunları sıralayacak olursak ;

  • Oluşturmayı engelleyen stil dosyaları gövdenin içerisinde olmalı.
  • Toplam stil dosyası boyutunuz 75 KB.dan daha az olmalı.
  • Tek CSS dosyanızdan daha fazla css dosyası kullanmamanız avantajınızadır.
  • @import gibi css dosyası çağırma alışkanlıklarını bırakmalısınız.
  • CSS dosya / dosyalarınızı minimize etmelisiniz.
  • Harici kaynaklar kullanmaktan çekinmelisiniz. (External CSS.)

Javascript Kullanımı

Tüm sayfanızda, CSS yayını gibi, aynı şekilde javascript kaynaklarınızında kullanımı ile alakalı değelendirmeler yapmalısınız.

  • Oluşturmayı engelleyen javascript dosyaları gövdenin içerisinde olmalı.
  • Maksimum 2 harici kaynak (external JS) dosyası kullanılması sizin avantajınızadır.
  • Toplam javascript kullanım boyutu 75 Kb’dan daha az olmalıdır.

Resim Optimizasyonu

Resimleriniz için kesinlikle sıkıştırılmış ve optimize edilmiş olan türleri tercih edin. Özellikle sayfa yüklenmesini geciktirecek olan png/gif gibi formatları kullanmak yerine, Svg ya da Jpeg gibi türleri kullanın. Hatta oluşturduğunuz resimleri içeriklerinize dahil etmeden önce, online servislerin yanısıra, resim düzenleme programlarını da kullanabilirsiniz. Ya da eğer tecrübeniz varsa sunucu taraflı optimizasyon çözümleri de üretebilirsiniz.Örnek bir kaç kütüphane;

Örnek olarak Gimp, Photoshop ile kayıt ederken, Save For Web seçenekleri gibi optimizasyon toollarını kullanabilirsiniz. Bunun yanı sıra dosyalarınızı WordPress image crop özelliğinden yararlanarak da kesip saklayabilirsiniz. İlgili WordPress dökümantasyon sayfaları ;

  • Özelleştirilmiş kesilen resimler için add_image_size() fonksiyonu codexsayfası

Ya da çok başarılı bir diğer servis olan smush.it online servisini kullanabilirsiniz.

Tarayıcı Bellekleme Özelliği (Browser Caching)

Lokal kaynaklarınızı ve harici kaynaklardan çağırdığınız medya vb gibi argümanları sunucu yapılandırma komutları sayesinde, tarayıcınızın belli aralıklar ile belleklemesini sağlamalısınız.

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##

Bu örnek çıktıyı .htaccess dosyasına eklemeniz, tarayıcı önbellekleme özelliğinden yararlanmanıza olanak tanıyacaktır. Bu durumda, wordpress google pagespeed skorunuzu etkileyecek diğer bir işleme geçebiliriz.

Server yanıt süresini kısaltmak

Aslında bu durumun değerlendirmesi, üstteki kriterlerin tamamen doğru olarak tamamlanmasına paralel olarak değişkenlik gösterir. İstenilen kriterleri sağladığınızda, sunucu yanıt süreniz daha az kullanımlı kaynaklar olduğundan, sunucu yanıt süreniz, 200ms nin altında seyredecektir. Tabi, yerli lokasyon sunucu tercihi hizmeti almanız bunun en önemli etkenlerinden birisidir.

Keep Alive Desteği

Header set Connection keep-alive

Yine üstteki yapılandırma komutunu .htaccess dosyanıza eklemeniz halinde, bu özniteliği de sayfalarınıza dahil etmiş oluyorsunuz.

Özetle;

Tüm bu üstteki ana maddeler ile alakalı değerlendirilecek kriterleri eksiksiz yerine getirmeniz durumunda, wordpress google pagespeed değerleriniz, 100/100 gibi skora erişmiş olacaklardır. Tüm maddeleri incelediğimiz yazıları da önümüzdeki yakın gelecekte hazırlayıp yine bu indeks altından eklemiş olmayı planlıyorum.

Tüm servislerden başarı oranlarınızı ve sonuçlarınızı görüntülemek için şu araçlar işinizi görecektir.

Bir cevap yazın