Bugün, web sitesi performansını test etmek için diğer favori aracımız olan Google Lighthouse’u tanıtıyoruz (bundan sonra sadece Lighthouse olarak adlandıracağız).
Lighthouse, hem masaüstü hem de mobil cihazlar için erişilebilirlik, performans, SEO ve Aşamalı Web Uygulamaları (PWA) dahil olmak üzere sayfa deneyiminin farklı yönlerini ölçer.
Lighthouse’u yerel olarak kullanmanın yararı, web sitenizin performansı ve nasıl iyileştirileceği hakkında daha ayrıntılı bilgi edinmenizdir.
Ayrıca, Lighthouse’dan elde edilen sonuçlar Google Sayfa Hızı İçgörüleri (PSI – PageSpeed Insights) sonuçlarından farklı olabilir.
İçindekiler:
- Google Lighthouse Nedir?
- Google Lighthouse Nasıl Kullanılır?
- Lighthouse’u Pagespeed Insights’ta Çalıştırın
- Performans Puanını Daha İyi Anlayın
- Puan Değişkenliği Normaldir
- Sonuç
Google Lighthouse nedir?
Lighthouse, Sayfa Hızı İçgörüleri’ne (PageSpeed Insights’a) güç veren teknolojidir.
Sitenizin kalitesini artırmak için otomatik bir araçtır.
Bir URL verirsiniz ve sayfa performansının nasıl artırılacağı, sayfaları daha erişilebilir hale getirme, en iyi uygulamaları izleme ve daha fazlası hakkında bir öneri listesi sağlar.
Google’ın Lighthouse hakkında söyledikleri:
Lighthouse, web sayfalarının kalitesini artırmak için açık kaynaklı, otomatikleştirilmiş bir araçtır. Herkese açık veya kimlik doğrulaması gerektiren herhangi bir web sayfasında çalıştırabilirsiniz. Performans, erişilebilirlik, aşamalı web uygulamaları (PWA) ve daha fazlası için denetimlere sahiptir.
Lighthouse yazılırken, puanlama için temel olarak Önemli Web Verileri‘nin (Web Vitals) tanıtımı kapsayan sürüm 6’ya kadar çıkmıştır.
Aracın hangi sürümünü kullandığınızdan emin değilseniz, sağ tarafa, ürettiği raporun altına, sürümü belirteceği yere kaydırın ve görün.
Lighthouse, raporunu bilgisayarınızdan tam hızda çalıştırmak yerine belirli bir cihazı ve ağ hızını taklit ederek (simüle ederek) oluşturur.
Gerekçe, hız sorunları daha yavaş cihazlarda çok daha belirgin olduğundan ve herkes en son cihaza sahip olmadığından veya zorunlu olarak hızlı bir internet bağlantısında olmadığından, tüm kullanıcılar için iyi bir yükleme deneyimi sağlamaya çalışmalısınız.
Mevcut simüle edilmiş mobil cihaz, yaklaşık 1.5 MB (megabit) bağlantıda bir Moto G4’tür.
Referans olarak, bu hızda 1 MB veriyi indirmek 5 saniyeden fazla sürer, eğer sayfa ağırlığınız tipikse, yani 2.5mb üzerindeyse, o zaman iyi puan alamazsınız.
Google Lighthouse nasıl kullanılır?
Bir Google Lighthouse raporu çalıştırmanın dört yolu vardır:
- Pagespeed Insights aracılığıyla online (çevrimiçi)
- web.dev/measure aracılığıyla online (çevrimiçi)
- Yerel tarayıcınızda Chrome Uzantısı aracılığıyla
- Yerel tarayıcınızda DevTools aracılığıyla
Lighthouse’u Pagespeed Insights’ta Çalıştırın
Raporunuzu online olarak çalıştırmayı seçerseniz, Pagespeed Insights’ı kullanmanızı öneririz.
Pagespeed Insights, oluşturulan rapora ek olarak, test ettiğiniz sayfa için gerçek kullanıcılara dayalı Saha Verilerini (Field Data) ve web sitesindeki tüm sayfalar için bir Kaynak Özetini de (Origin Summary) gösterir.
Bu, Google’ın verilerini toplamasına izin vermeyi seçen Chrome kullanıcıları tarafından toplanan gerçek dünya verileridir, ancak siteniz çok meşgul değilse Google’ın sizinle burada paylaşacak hiçbir verisi olmayabilir.
Tam anlamıyla temsili olmasa da yine de yararlı bilgilerdir ve genellikle Lighthouse puanınıza çok farklı bir hikâye oluşturabilir. Gerçek kullanıcı verileri yoksa Lab Verileri’ne bakılabilir.
Lighthouse’u bir Chrome Uzantısı olarak çalıştırın
Uzantıyı yüklemek için:
- Masaüstü için Google Chrome’u indirin (sahip değilseniz).
- Chrome Web Mağazasından Lighthouse Chrome Uzantısını yükleyin.
Bir denetim çalıştırmak için:
- Chrome’da, denetlemek istediğiniz sayfaya gidin.
- Lighthouse’a (deniz feneri sembolü) tıklayın. Chrome adres çubuğunun yanında olmalıdır. Değilse, Chrome’un ana menüsünü açın ve menünün üst kısmından erişin. Tıkladıktan sonra Lighthouse menüsü genişleyecektir.
- Rapor oluştur’a (Generate Report) tıklayın. Lighthouse, denetimlerini mevcut sayfaya göre yürütecek ve sonuçların bir raporunu içeren yeni bir sekme açacaktır.
Chrome DevTools’ta Lighthouse’u çalıştırın
Bunu yapmak için sağ üst köşedeki üç dikey noktayı tıklayın, ardından “Diğer Araçlar” seçeneğini ve ardından “Geliştirici Araçları” seçeneğini (Developer Tools) seçin.
Geliştirici araçları daha sonra görüntülenecektir, araçlar penceresinin üst kısmında bir dizi sekme vardır, ‘Lighthouse’ sekmesini seçin.
Yalnızca performansla ilgilendiğimiz için, yalnızca Performans kategorisinin işaretlendiğinden emin olun, ayrıca sitenizin ilk yüklemesini simüle etmek için ‘Depolamayı temizle’nin (sol üstte) işaretli olduğundan emin olun. Son olarak, raporlama yapmak istediğiniz cihazı, bir Mobil veya Masaüstü seçin ve “Rapor oluştur” seçeneğini tıklayın.
Rapor oluşturulurken, bilgisayarınızda başka bir şey yapmamanız veya arka planda bir şey yapmakla meşgul olmanız önemlidir, aksi takdirde puan olumsuz etkilenecektir.
Performans Puanını Anlayın
Rapor bittiğinde bir performans özeti göreceksiniz.
6. sürümdeki puanlama, Google’ın iyi bir kullanıcı deneyimini gösteren ölçümler olan web hayati verileri (web vitals) ve görsel yükleme performansının bir ölçüsü olan Webpagetest’in hız endeksine dayanmaktadır.
Her metrik, iyi, idare eder / eksikli veya kötü olmasına göre renk kodludur.
Ölçüm iyiyse solda yeşil bir daire, sorun yoksa turuncu bir kare, kötüyse kırmızı bir üçgen alırsınız.
Metrik puanları ve performans puanı şu aralıklara göre renklendirilir:
- Puan aralığı 0 – 49 (kırmızı): Zayıf
- Puan aralığı 50 – 89 (turuncu): İyileştirilmesi Gerekiyor
- Puan aralığı 90 – 100 (yeşil): İyi
İyi bir kullanıcı deneyimi sağlamak için, siteler çok iyi bir puana (90-100) sahip olmaya çalışmalıdır.
100 puanlık “mükemmel” bir puan elde etmek son derece zordur ve beklenmez.
Örneğin, 99’dan 100’e kadar bir puan almak, 90’dan 94’e kadar sürecek yaklaşık aynı miktarda metrik iyileştirme çalışması gerektirir.
Her ham metrik (raporda listelenen sayı), HTTP arşivinden alınan gerçek web sitesi performans verileriyle karşılaştırılır ve 100 üzerinden bir puana dönüştürülür. Bu, referans verilerini bir eğri üzerinde derecelendirerek yapılır, böylece web siteniz web sitelerinin ilk %8’i 90 puan alır, benzer şekilde en yüksek %25 içinde puan alırsa 50 puan alır.
Teknik ayrıntılarla ilgileniyorsanız, sitemizde diğer yazılarda veya Google web.dev adresinde puanlama hakkında ayrıntılı açıklamalara sahiptir.
Her metriğe bir ağırlık atanır, ardından puanlar ağırlıklandırmaya göre tek bir genel sayıya toplanır.
Aşağıda, Metrikler bölümü ile ekran görüntüleri arasında görebileceğiniz ‘Hesap Makinesini Gör’ bağlantısına tıklayarak elde ettiğimiz (yukarıdaki ekran görüntüsünde) testin bir dökümü yer almaktadır:
Lighthouse 6- Denetim Ağırlığı:
- İlk Zengin İçerikli Boyama (FCP) %15
- Hız Endeksi (Speed Index) %15
- En Büyük Zengin İçerikli Boyama (LCP) %25
- Etkileşime Geçen Süre (TTI) %15
- Toplam Engelleme Süresi (TBT) %25
- Kümülatif Düzen Kayması (CLS) %5
Ağırlıklar, kullanıcının performans algısının dengeli bir temsilini sağlamak için seçilir.
Ağırlıklar zamanla değişmiştir, çünkü Lighthouse ekibi, kullanıcı tarafından algılanan performans üzerinde en büyük etkiyi neyin yarattığını anlamak için düzenli olarak araştırma yapıyor ve geri bildirim topluyorlar.
Lighthouse Performans puanınıza, genel olarak, Fırsatlar (Opportunities) veya Teşhisler (Diagnostics) sonuçları değil, yalnızca metrikler katkıda bulunur.
Bununla birlikte, fırsatları ve teşhisleri iyileştirmek muhtemelen metrik değerleri iyileştirir, dolayısıyla dolaylı bir ilişki vardır.
Puan Değişkenliği
Mobil puanlarla ilgili olarak, yukarıdaki örnekte 79 olduğu gibi, 75 puanın üzerindeki herhangi bir şey, bir mobil cihaz için oldukça iyidir!
Bununla birlikte, birçok kez testi çalıştırdık ve kullanılan örnek web sitesi için alt uçta 60 ile üst uçta 85 arasında puanlar aldık.
Aynı cihazda tekrar tekrar test edildiğinde bile puanlar büyük ölçüde dalgalanabilir.
Bunun nedenleri şunları içerir:
- İnternet performansında küçük farklılıklar
- Testi gerçekleştirirken bilgisayarınızın CPU (işlemci) yükü
- Web sunucusu değişkenliği
Google, buna neyin neden olabileceğiyle ilgili derinlemesine açıklamalara sahiptir. Şu adreste görebilirsiniz.
Özet
Kullanıcı ve sayfa deneyimi, herhangi bir web sitesinin başarısı için çok önemli olduğundan, sorunları sürekli olarak ölçmek ve tanımlamak çok önemlidir.
Lighthouse, web sitenizin performansını etkileyen sorunları belirlemek için harika bir araçtır ve Webpagetest.org ile birlikte kullanıldığında, kullanıcılarınız için üstün bir deneyim sunabilme yolunda çok mesafe kat edeceksiniz.
İlgili başka yazılarımızı okumak ister misiniz?
Google hız endeksi nedir ve nasıl ölçülür?
Google Lighthouse ilgili başka yazılarımızı okuyun:
Siz de fikrinizi belirtin