Bu eğitselde, Google Pagespeed Insights nedir ve nasıl kullanılır, Pagespeed Insights optimizasyonu nasıl yapılır, wordpress için litespeed cache ayarları nasıl yapılır gibi konulara değindik.

Google PageSpeed Insights Nedir?

PageSpeed Insights, Google tarafından ücretsiz bir şekilde sunuculan web sitesi performans analiz aracıdır.

Google PageSpeed Insights Neden Kullanmalıyız?

Günümüzde web sitelerinin açılış hızı Google sıralamalarında büyük rol oynamaktadır. Google dışında, kullanıcı deneyimi açısından oldukça önemli bir rol oynuyor. PageSpeed Insights ise bu kısımda size büyük ölçüde yardımcı olacaktır.

Sitenizin açılış hız raporlarını size sunarak, açılış hızını etkileyen alanları ve hataları detayları ile birlikte size sunabilmektedir. Sadece hatalı alanları sizinle paylaşmakla kalmayıp, bu hataları nasıl giderebileceğiniz hakkında size ipuçları ve detaylar vermektedir.

İyi bir kullanıcı deneyimini artırmak ve Google tarafında ki sıralamalar da önplana çıkabilirsiniz. Google PageSpeed Insights bu konuda biçilmiş kaftan diyebiliriz.

Google PageSpeed Insights Terimleri

PageSpeed Insights içerisinde birçok tanım bulunmaktadır. Bu tanımlar hakkında analiz sırasında kısaca açıklamalar bulunmaktadır. Ancak bunlar detaylı olmadıkları için kimi zaman anlaşılır olmayabiliyor. Bu terimlerin detaylarını size aşağıda aktaracağız. Bu detaylar ile daha hızlı aksiyon alabilir ve düzenleme sağlayabilirsiniz.

Sunucu Yanıt Süresi(İlk sunucu yanıt süresini azaltın)

En sık yaşanan ve akıllarda soru işaret bırakan başlık veya kısım, sunucu yanıt süredir. Şu anda güncel ismi ile "İlk sunucu yanıt süresini azaltın" şeklinde ki başlığı ile karşınıza çıkar. WordPress bir siteniz var ise, ilgili alanın tanımında tema veya eklentilerin ilk yanıt dönüşünde büyük rol oynandığı belirtilmektedir. Web siteniz içerisinde kullanılan eklentiler, sitenin ilk açılışı sırasında kendisine ait CSS ve JavaScript dosyaları yüklemeye çalışır. Bu dosyalar ise sayfa boyutunu büyültür ve açılış hızını büyük ölçü de arttırır. WordPress eklentileri günümüzün olmazsa olmazı olsa da minimum derecede kullanılması, site aktifliği açısından çok önemlidir.

Toparlayacak olursak, ilk sunucu yanıt süresi tamamen site içerisinde yapılan veya yapılacak olan optimizasyonlara bağlı olarak değişkenlik göstermektedir.

Genellikle sunucunun yavaş olması ile alakalı olduğu düşünülen bu terim, tamamen yazılımınızın ne derecede performanslı çalışıp az işlem yürüterek en kısa zamanda yanıtı verdiği ile ilgilidir. Sunucunun donanımsal özellikleri bir etken olsa da, genel olarak tüm sunucular aynı yapıda ve miktarda donanımlara sahip olduğundan yazılımsal düzenlemeler gözardı edilmektedir.

First Contentful Paint(İlk Zengin Boya)

Herhangi bir sayfaya giriş yaptığınızda, ilgili sayfa içerisinde herhangi bir kısmın yüklenme hızı olarak tanımlayabiliriz. Yani, bağlantıya giriş yaptığınız da sayfa içerisinde ki herhangi bir alanın ekranda görünme süresidir.

Largest Contentful Paint(En Büyük Zengin İçerikli Boya)

Kullanıcının bir sayfaya giriş yaptığı anda, sayfa içerisinde kullanılan en büyük içeriğin oluşum süresini ifade eden kısımdır. İlgili içerik bir resim, uzun bir metin bloğu veya video olabilir.

Time to Interactive(Etkileşime Hazır Olma Süresi)

Sayfa mataryerlerinin tamamen yüklenme hızı olarak tanımlanabilir. Sayfaya ilk giriş yaptığınız ile sayfanın tamamen yüklenmesi üzerinden geçen süreyi temsil eder.

Total Blocking Time(Toplamda Engelleme Süresi)

Sayfaya giriş yaptığınızda, sayfanın etkileşime hazır olmadan önce ne kadar süre etkileşimsiz kaldığını hesaplar. Yani, sayfanın etkileşime cevap vermesi üzerinde ki gecikmeyi temsil eder. Örneğin Javascript dosyalarınız varsa ve HTML kodlarınızın en üstünde yer alıyorsa, Javascript kodlarınız sayfanın geç yüklenmesine sebebiyet verebilir veya dışarıdan bir font yüklemesi yapıyorsanız fontu yüklediğiniz web sitenin yanıt süresi bu süreyi artırabilir.

WordPress için Optimizasyon

WordPress web sitenizi Google PageSpeed Insights üzerinde yüksek skorlar alması sağlamanız için bazı önerilerimiz bulunuyor. Bu öneriler ile sitenizin açılış hızını da arttırabilirsiniz. Bu adımları uygulamanız halinde, web siteniz de gözle görülebilir bir hızlanma olacak ve skorlarınıza etki edecektir.

LiteSpeed Cache Eklentisi ve Ayarları

LiteSpeed cache eklentisi içerisinde yapacağınız ufak ayarlar ile sitenizin skorlarını yükseltebilirsiniz.

Cache Ayarları

Aşağıda sadece düzenlemeniz gerektiğini düşündüğümüz ve testlerimiz sonrası deneyimlediğimiz kısımları ve açıklamalarını not aldık.

Cache

Enable Cache: Cache sistemi için aktif olması gerekiyor.

Cache Logged-in Users: Siteye giren kullanıcı ve yöneticiler için cache sistemi aktif hale getirir. Bu alanın aktif olması gerekmektedir.

Cache PHP Resources: Tema ve eklentilerde ki php isteklerini bir nebze düşürür. Açık kalması gerekmektedir.

Purge

Purge All On Upgrade: Bir değişiklik yaptığınız da cache'in silinmesini istiyor iseniz aktif kalabilir.

Auto Purge Rules For Publish/Update: Olduğu gibi kalabilir.

Browser

Browser Cache: Kaynaklarınızın tarayıcı tarafında önbelleğe alınmasını sağlar ve aktif olması gerekiyor. Sayfa açılışında göz ile görülebilir hızlanma yaşanacaktır.

Advanced

Improve HTTP/HTTPS Compatibility: Websitesi içerisinde http:// ve https:// ile açılan sayfalar var ise açık konumda kalması gerekiyor. Açık konumda olması, bu sayfaların daha düzgün çalışmasını sağlayacaktır.

Page Optimization

Bu sayfada css, javascript veya site içerisinde ki genel optimizasyon işlemlerini yapacağız. Sırası ile hangi kısımların açık olacağını iletiyorum.

CSS Settings

Bu menüde site içerisinde ki CSS dosyaları için yapabileceğimiz optimizasyon işlemleri bulunmaktadır.

CSS Minify: Site içerisinde ki css dosyalarınızı sıkıştırmak için kullanılır, aktif kalması gerekmektedir.

CSS Combine: Bütün CSS dosyalarınızı tek bir dosyada birleştirir. Bu şekilde birden fazla sorgu yerine tek bir sorgu ile açılış yapar. Aktif konumda olmalıdır.

CSS HTTP2/Push: Tarayıcılar istekte bulunamsada, CSS kaynağını gönderir. Aktif konumda olmalıdır.

Load CSS Asynchronously: CSS ve HTML dosyanızın aynı anda yüklenmesini sağlar. Google Pagespeed Insights değerlerinizi arttırmanızda büyük rol oynayacaktır, aktif konumda kalabilir.

Dipnot: Load CSS Asynchronously aktif hale getirilmesi, site görünümde bozukluklara yol açabilir. Bu şekilde bir sorun olur ise pasif konum alabilirsiniz.

Generate Critical CSS: Load CSS Asynchronously kısmını aktif konuma getirdiyseniz bu alanı da aktif konuma getirebilirsiniz. Yüklenme sırasında kritik css hataları için kullanılmaktadır.

Generate Critical CSS In Background: Load CSS Asynchronously ve Generate Critical CSS aktif ise, bu kısmı da aktif konuma almanız gerekmektedir. Arka planda çalışmasını sağlar.

JS Settings

Bu kısımda JavaScript dosyaları için optimizasyon önerileri ve ayarları mevcuttur.

JS Minify: JavaScript dosyalarınızı sıkıştırır, aktif konumda alınması gerekmektedir.

JS Combine: JavaScript kaynaklarınızı tek bir dosya altında toplar, aktif konumda olması gerekiyor.

Dipnot: JS Minify ve JS Combine aktif edilir ise site içerisinde hatalar oluşabilir. Hatalar oluşur ise, her iki ayarı da pasif hale getirerek kayıt edebilirsiniz.

JS HTTP/2 Push: Tarayıcı istekte bulunmasa da, JavaScript kaynağını tarayıcıya iletmektedir. Aktif olması gerekiyor.

Optimization

HTML Minify: HTML kaynağınızı sıkıştırır, aktif olması gerekmektedir.

Remove Query Strings: Query Strings dizelerini, statik kaynaklar içerisinden kaldırmaktadır. Aktif olması gerekmektedir.

Load Google Fonts Asynchronously: Google fontlarını indirir ve bu şekilde yüklenme hıznıı arttıracaktır. Aktif olması gerekmektedir.

Remove Google Fonts: Google fontlarını kullanmıyor iseniz aktif olarak kalabilir.

Remove WordPress Emoji: WordPress içerisinde kullanılan iconları kaldırır. Aktif olarak kalması gerekmektedir.

Media Setting

Lazy Load Images: Site içerisinde ki görsellerin, scroll aşağıya indikçe yüklenmesini sağlar. Oldukça etkilidir ve aktif olması gerekmektedir.

Resim Optimizasyonu

Web sitenizi hızlandırmak için daha geniş ve kapsamlı olan WordPress websitesini hızlandırmak adlı makalemize gözatabilirsiniz.