fatih toprak Full stack developer & WordPress Master

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, 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.

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 codex sayfası

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.

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, Pagespeed Insigns 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.

Mutlu WordPress’ler.


, ,

“WordPress sitelerini Google dostu hazırlamak, Pagespeed skorlarını 100/100 hale getirmek” için 8 yorum

hüseyin dedi ki:

fatih bey sizi yeniden yazıyor olarak görmek çok mutlu etti, yazılarınızın kalitesini, anlatım uslubunuzu, tarzınızı, özledik vallahi. yeniden yazmanız ümidi ile. iyi çalışmalar. hoşça kalın.

Fatih Toprak dedi ki:

@hüseyin bey teşekkürler beni ne kadar mutlu ettiniz. takipte kalmaya devam lütfen en kısa aralıklarla yeni içerikleri işleyeceğim

Berat dedi ki:

Yine bir Fatih Toprak klasiği 🙂 Özlettin güzel yazılarını. Çok iyi bir giriş olmuş uzun zaman sonra. Merakla yazının alt dosyalarını bir öğretmen öğrencisine anlatır şekilde bekliyor olacağım. Pagespeed Insigns puanım 69/100 çıktı. Bakalım kaça çıkartabileceğiz.

Fatih Toprak dedi ki:

@berat inanır mısın ilk yorumu sen atacakmışsın gibi bir hissiyat vardı bu gün şirkette. @hüseyin senden evvel davrandı ama senin de yanıtlarını görmek ne güzel oldu. gerçi eski blogda senden başka sıkı takipçi bulmak commentor bulmak da zordu tabi de, teşekkür ederim… Öyle mi en kısa sürede diğer devamı olan içerikler ile 100’leri zorlarız 😉

Berat dedi ki:

@Fatih maalesef 🙂 yetişemedim. Maili gördüm, biraz yoğundum sonra okuyup yorum yazarım dedim geç kalmışım 😊 Gerçekten yorum yazan bulmak çok zor. O kadar faydalı konu paylaşıyoruz sadece kuru bir “teşekkür ederim” diyen yok. Bende uzun zamandır sitenin arka planıyla ilgilenmiyordum. Pagespeed skorunu %100 hale getirmeye çalışırken tekrar ilgilenmiş olurum.

Fatih Toprak dedi ki:

@berat aslında blogu komple sıfırlamamın ve yazma hevesimin kırılmasının en güzel sebebi de bu. dolayısı ile artık daha çok yorum yazanlara yönelik başka düşüncelerim var. çünkü, ben öldüm diyelim kimse bildiklerimizden faydalanamayacak, ve ben bu kafada değilim, bu kafada olan zavallılarında ekmeğine çomak sökmek için yeniden yazmaya karar verdim, ben neden küsüp bırakayım ki, onlar küssünler 😉 Teşekkürler yeniden takibe devam.

Osman Yıldırım dedi ki:

Bilgi ve deneyimleri yazıya döküp yayınlamak, sanal geçmişe not düşmek..
Umarım yine insanların kıymet bilmezliğine, yorum ile teşekkür etmezliğine takılıp bu muhteşem bloğu kapatmazsınız. Elinize, yüreğinize sağlık.

Fatih Toprak dedi ki:

Temennim o yönde Osman abi, ancak bu sefer kurguladığım yahut düşündüğüm şey, benim önemsediğim değil beni önemseyen insanların bu dünyada yaşıyorken neler yaptığımla ilgilendikleri, belki hala hayatta ilen belki hayatın yaşamsal görevinin tamamlanmasından sonrası..

Daha sonrası için cidden siteme ve benzerine hiç ama hiç gerek yok, zaten biz bize yeteriz mentali ile, yazılan şeylerin bir gün bir yerlerde birilerinin işine yaramış olması ben en çok mutlu eden şey olacak..

Darısı, kendini beğenmiş zavallı blog yazarlarının başına 😉

* Yorumunuza, kod eklemek için; [code lang="php"] kodunuz [/code] şeklinde tanımlama kullanabilirsiniz. , lang kısmına, php js css html gibi farklı syntax'ler kullanabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir