PageSpeed Insights ve Lighthouse Nedir, Nasıl Kullanılır?
Bir süredir, Next.js/React ile geliştirdiğimiz İşin Olsun web sitemizin PageSpeed optimizasyonu konusuna yoğunlaşmıştık. Bu yolda kullandığımız araçları ve edindiğimiz deneyimleri detayları ile paylaşmak istedik. Yazmaya başlayıp ilerledikçe paylaşabileceğimiz bir çok detay olduğunu farkettim. Bu yüzden yazıların uzun olmaması adına bu deneyimleri bir seri halinde paylaşmayı doğru buldum.
Yazıları takip ederek sonunda PageSpeed Insights performans skorumuzu adım adım nasıl arttırdığımızı görebileceksiniz. Hazırsanız serinin ilk yazısına PageSpeed Insights ve Lighthouse’ u tanımayla başlayalım.
PageSpeed Insights ve Lighthouse web sitelerin performans verilerini analiz edebileceğimiz, performans metrikleri ile bu metrik skorlarını nasıl iyileştirebileceğimize dair ipuçları sunan araçlardır. Amacımız Bu metrikleri iyileştirerek web sitemizin mevcut performansını arttırıp kullanıcı deneyimini ve Google arama sıralamasını iyileştirmeye çalışmak.
PageSpeed Insights
PageSpeed Insights (PSI), bir sayfanın hem mobil hem de masaüstü cihazlarda performansı hakkında raporlar ve bu sayfanın nasıl iyileştirilebileceğine dair öneriler sunar.
PSI Raporun en üstünde, sayfanın performansını özetleyen bir puan sağlar. Bu puan, sayfayla ilgili laboratuvar verilerini toplamak ve analiz etmek için Lighthouse çalıştırılarak belirlenir. 90 ve üzeri puan iyi olarak kabul edilir. 50 ila 90, iyileştirilmesi gereken bir puandır ve 50'nin altı zayıf olarak kabul edilir.
PageSpeed puanınız SEO ve kullanıcı deneyimi bakımından önemlidir. Google sayfa performansını bir sıralama faktörü olarak kullanır. İyi bir skora sahip olmanız web sitenizi arama sonuçlarında daha iyi bir sıralamaya taşıyabilir. Aynı zamanda kullanıcılarınızın düşük bağlantı hızlarında bile daha iyi bir deneyim yaşamasını sağlar.
PageSpeed Insights raporunda Field Data (Alan/Saha Verileri) ve Lab Data (Laboratuvar Verileri) olarak iki grupta metrikler listelenmektedir. Bu iki alan arasındaki farkların neden kaynaklandığını başka bir yazıda anlatacağım. Aşağıdaki linkten PageSpeed Insights sayfasına erişebilir ve web sitenizin adresini girerek analizi başlatabilirsiniz.
Lighthouse
Web sitelerinin performans ölçümü için kullanılan açık kaynaklı bir analiz aracıdır. Chrome geliştirici araçları ile veya Chrome eklentisi olarak kullanılabilir. Yayınlanmış web sayfalarını analiz edebildiğiniz gibi henüz yayınlamadığınız sayfalarıda analiz etmenize imkan sağlar.
Tüm SEO sayfalarınızda Mobile ve Desktop için ayrı analizler çalıştırın, her sayfanın sonucu farklı olabilir. Lighthouse analizlerinizi her zaman gizli sekmede yapmaya dikkat edin, yüklü diğer Chrome eklentileri yanlış sonuç almanıza sebep olabilir.
Performance: Performans puanı, kullanıcı deneyimi için önemli kabul edilen metrikler ile hesaplanır.
Accessibility: Erişilebilirlik, html içeriğin ekran okuyucu gibi yardımcı teknolojiler açısından ne kadar kullanışlı olduğunu hesaplar.
Best Practices: Sitemizde kullandığımız teknolojiler için varsa eksikleri vurgular.
SEO: Sayfanızın html içeriğine ilişkin arama motoru optimizasyonu sağlayan ipuçları sunar.
Progressive Web App: PWA, özel bir kodlama tekniğiyle yazılmış Web sitelerinin bir mobil uygulama gibi kullanılabilmesini ve çevrim dışıyken dahi erişimi mümkün kılan yeni bir teknolojidir. Bu Kısımda sitenizin PWA uyumlu olup olmadığı denetlenir.
Metrics
Analiz sonucu sayfanızın performans skorunu belirlemek için kullanılan metrikler bu bölümde gösterilir. Bu metriklere göre sayfanızın performans skorunun nasıl hesaplandığını incelemek için aşağıdaki sayfaları ziyaret edebilirsiniz.
https://web.dev/performance-scoring/
https://googlechrome.github.io/lighthouse/scorecalc/
PageSpeed Insights ve Lighthouse performans kriterlerinin yeni güncellemeler ile değişebileceğini unutmayın. Lighthouse versiyonları 5, 6–7 ve 8 de bu metriklerin performans puanına dağılımı değişiklik göstermektedir.
First Contentful Paint (FCP)
İlk İçerikli Boya metriği, sayfanın yüklenmeye başladığı andan sayfa içeriğinin herhangi bir bölümünün ekranda görüntülendiği ana kadar geçen süreyi ölçer. Sayfayı oluşturan metinler, resimler, script ler, css ler, fontlar kısaca sayfa isteği ile yüklenen tüm nesnelerin boyutu ve yüklenme hızı FCP değerini etkiler.
Largest Contentful Paint (LCP)
En Büyük İçerikli Boyama (LCP), bir sitenin en büyük görsel öğesinin yükleme süresini ölçmenize olanak sağlayan metriktir. İyi bir kullanıcı deneyimi sağlamayı amaçlar ve Core Web Vitals’in en önemli parametrelerinden biri olarak kabul edilir. Sayfada kullanılan büyük boyutlu nesneler LCP değerini etkiler.
Cumulative Layout Shift (CLS)
Kümülatif Düzen Kayması (CLS), sayfa yüklenme esnasında ekranda görünen kısımlarda kayan veya yer değiştiren nesleri ölçen metriktir. Kullanıcılar sayfada tam işlem yapacakken ekranda nesnelerin kayması kötü bir deneyime yol açar. Bu değeri sayfaya sonradan yüklenen nesneler, ekranda kapladığı alan önceden belli olmayan nesneler etkiler.
Total Blocking Time (TBT)
Toplam Engelleme Süresi (TBT), yük duyarlılığını ölçmek için önemli bir laboratuvar metriğidir, bir sayfanın etkileşimli hale gelmeden önce ne kadar etkileşimli olmadığını ölçmeye yardımcı olur. İstek sayıları, aktarım boyutları, kullanılan third-party scriptler bu değeri etkileyen unsurlardır.
Time to Interactive (TTI)
Etkileşim Zamanı (TTI), bir sayfanın tamamen etkileşimli hale gelmesinin ne kadar sürdüğünü ölçer. Sayfada kullanılan JavaScript ler bu değeri etkileyen önemli bir faktördür.
Speed Index
Hız Endeksi, sayfa yükleme sırasında içeriğin görsel olarak ne kadar hızlı görüntülendiğini ölçer. Lighthouse önce tarayıcıya yüklenen sayfanın bir videosunu çeker ve kareler arasındaki görsel ilerlemeyi hesaplar. Lighthouse daha sonra Hız İndeksi puanını oluşturur. Sayfa yükleme hızını artırmak için yaptığınız her şey Hız Endeksi puanınızı iyileştirecektir.
Opportunities, Diagnostics
Bu bölümde iyileştirmeniz gereken fırsatlar ve tespitler listelenmektedir. Bu maddelerde yapacağınız iyileştirmeler metriklere yansıyacaktır.
Bu yazımızda PageSpeed Insights ve Lighthouse araçlarını tanımaya çalıştık.
