AFAIK

Google Lighthouse Nedir?

Güncelleme:
Single Page Application (SPA), Progressive Web App (PWA) ve PageSpeed Insights ile web sayfası / uygulaması geliştirme sürecine dair temel bilgilerle başladığım yazı serisine Google ...
GÖRSEL
Single Page Application (SPA), Progressive Web App (PWA) ve PageSpeed Insights ile web sayfası / uygulaması geliştirme sürecine dair temel bilgilerle başladığım yazı serisine Google Lighthouse ile devam edelim ve geliştirdiğimiz uygulamamız ve/ya web sayfamız ile ilgili durumu (sorunlar, olası geliştirme olanaları vb.) nasıl edebileceğimize bakalım. Bu amaçla kullanabileceğimiz uygulamalardan biri olan Google Lighthouse’a yakından bakalım.

Google Lighthouse Nedir?

Lighthouse, Google öncülüğünde açık kaynaklı bir proje olarak geliştirilen, web uygulamalarının ve web sayfalarının analiz edilmesi, geliştiriciler için bu analizlerin bir standart çerçevesinde sunulmasını sağlar. Bu bilgiler erişilebilirlik performansı, SEO (Arama Motoru Optimizasyonu), PWA (Progressive Web Apps) özellikleri için denetim amacıyla kullanılabilir.Google LighthouseGoogle Lighthouse, Chrome DevTools > Audit (Denetim) sekmesinden, Google eklentisi olarak, Node.js modülü olarak, web UI veya bir CLI (Command-line Interface veya Command Language Interpreter) ile erişilebilir. Kullanım için bir URI gereklidir.
  • Google Lighthouse analizleri sayfa bazında yapılmaktadır.
  • Google Lighthouse Chrome DevTools > Audit ve Chrome eklentisi olarak kullanılabilir.
  • Eklenti kullanımında analiz özet ve/ya detaylı çıktı, JSON kopyası, HTML ve/ya JSON dökümü olarak edinilebilirken, Audit üzerinden yapılan analiz sadece JSON olarak aktarılabilir.
  • Lighthouse analizi diğer araçlara kıyasla daha fazla detaya sahiptir;
    • Score Scale, PageSpeed ​​Insights tarafından sunulan puanlama gerçek sayfa yükleme süresinin yanı sıra test edilen farklı faktörleri de içerir.
    • Kullanılan ölçümler : Düşük sayfa yükleme sürelerine katkıda bulunan faktörlere odaklanarak; sayfanın boyutu, sunucuya gönderilen istek sayısı, ilk Byte Süresi, sunucudan alınan ilk yanıt ile oluşturulan sayfa görüntüsü ve toplam yükleme süresi gibi çok sayıda faydalı performans metriğini dikkate alır.
    • Güncel öneriler: Analiz sonucunda görüntülenen tavsiyeler son gelişmelerle doğru orantılıdır.

Daha detaylı bilgi için Google Developers Lighthouse sayfası incelenebilir.

Google Lighthouse Kullanımı

Her ne şekilde olursa olsun, analiz aşaması belirli seçenekler aktifleştirilerek gerçekleştirilir. Device (Cihaz) için Mobile (Mobil) ve Desktop (Masaüstü), Audit (Denetim) için Performance, Accessibility, Best Practices, SEO ve Progressive Web App seçenekleri değerlendirilebilir ve raporlanabilir. Puanlama ile ilgili olarak PageSpeed Insights yazısına göz atabilirsiniz.Google Lighthouse

Lighthouse Analiz ve Ölçüm Kriterleri

Lighthouse açıklaması içerisinde SEO’nun denetim amacıyla kullanılabileceğinden bahsetmiştim. Bu ifadenin altını çizmek gerekli. Çünkü, ölçüm kriterlerinin tamamı bütün olarak değerlendirilmelidir. Bir web sayfası için yapılan analiz içerisinde PWA (örneğin; caching) da bir performans kriteri olarak değerlendirilebilir. Ancak PWA ayrı bir başlık olarak sunulmaktadır.Google Lighthouse

Ayrıca, web sayfalarının ve uygulamalarının Lighthouse skorunu 100 yapabilmek teknik geliştirmeleri bir zorunluluk olarak ele almayı sağlamakta. Bu anlamda, değerlendirmeleri Google PageSpeed ​​Insights ile karıştırmamak uygun olacaktır. Google değerlendirmeleri çerçevesinde kullanıcı deneyiminin daha öncelikli olduğunun altını çizmek gerekli. How to create a PWA a scoring 90+ score in Google Lighthouse using Ionic 2 başlıklı yazı örnek olarak değerlendirilebilir.

Son bir hatırlatma, Lighthouse işlemi için robots.txt dosyasının taramaya uygun olacak şekilde düzenlenmiş olması gerekmektedir.

Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.