Google Lighthouse ile Web Sitenizin Performansını Artırın

Google tarafından geliştirilen PageSpeed ​​Insights (PSI), bir web sitesinin performansını ölçmek ve iyileştirmek için şimdiye kadar kullandığımız demirbaş araçlardan birisiydi.

Her ne kadar sunmaya başladığı Google Chrome gerçek kullanıcı verileri ile daha gerçekçi analizler yapmaya başlamış olsa dahi, Google’ın mobil öncelikli indekslemeye geçiş aşamasında özellikle mobil siteler üzerinde yapılması gereken performans geliştirmeleri konusunda yetersiz kalmaya başlamıştı. İşte tam da bu noktada Google, Google Lighthouse isimli yeni bir performans analiz aracını tanıttı. Biz de sizler için Google Lighthouse’u ve bundan sonra sıklıkla göreceğiniz önemli metrikleri tanıtan kapsamlı bir inceleme yazısı hazırladık. Gelin hep birlikte aracı biraz daha yakından tanıyalım.

Google Lighthouse Nedir?

Google Lighthouse web sayfalarının kalitesini artırmak için Google tarafından yayınlanan, hem Chrome Geliştirici Araçları içinde hem de Google Chrome eklentisi olarak kullanılabilen açık kaynak kodlu, otomatikleştirilmiş bir performans analiz aracıdır.

Detaylara girmeden önce bu araç hakkında belirtmek istediğimiz birkaç konu var:

• Google Geliştirici Araçları içinde yer alan Lighthouse ile tarayıcı eklentisi olarak kullanılan Lighthouse arasında ufak bir fark var. Google Chrome eklentisi olarak kullanılabilen Google Lighthouse, analizinin içine “SEO” bölümünü de eklemiş ve analiz ettiğiniz sayfanın temel SEO kurallarına uyup uymadığını gösteriyor.
• Sahibi olmadığınız farklı siteleri, rakip Web sitelerini test edebilirsiniz.
• AdBlock, Ublock gibi reklam engelleyici eklentiler kullanıyorsanız Google Lighthouse sağlıklı çalışmayabilir.
• Google Lighthouse analizleri sayfa bazında yapılmaktadır. Önerimiz ana sayfa haricindeki önemli sayfalarınızı da tek tek analiz ederek siteniz hakkında genel bir fikre kavuşmanız.
• Şu an için İngilizce olan Lighthouse, yakında Türkçe kullanılabilir duruma gelecek. Ayırca aracın yardım dökümanları da şu an için sadece İngilizce dilinde yayınlanıyor: Google Lighthouse
• Chrome Geliştirici Araçlarında yapılan analiz *.json formatında kaydedilebilmekte. Google Chrome Eklentisi kullanırsanız analiz sonuçlarını daha fazla formatta kaydetme şansına sahip olabilirsiniz.
• Google Lighthouse, diğer araçlara kıyasla daha fazla avantaja sahiptir;
  • Puanlama sistemi: PageSpeed ​​Insights tarafından verilen puanlar gerçek sayfa yükleme sürelerinden ziyade test edilen faktörlere bağlıdır.
  • 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.
• Analiz listesinde yer alan bazı öğelerin manuel kontrol edilmesi gerekebilmektedir.

Google Lighthouse’un nasıl kullanıldığına dair videomuzu izleyin:

Lighthouse’a eklenti yüklemeden ulaşmak için yapmanız gereken şey çok basit. Analiz etmek istediğiniz sayfadayken klavyenizde “F12” tuşuna basmak, Windows’ta “Ctrl + Shift + I”, Mac’te “Command+Option+I” veya sağ tıklayıp “İncele” (Inspect) seçmek. Ardından navigasyon barında “Audits” seçeneğini göreceksiniz.

“Perform an audit…” tıkladığınızda ise karşınıza 4 seçeneğin çıktığını göreceksiniz:

Analizi başlattıktan birkaç dakika sonra sonuçlar Chrome Geliştirici Araçları içinde görüntülenecek ve sayfanın aldığı puanları, uyarıları ve önerileri görebileceksiniz.

Bazı kurumsal firmalarda kullanılan bilgisayarlardaki tarayıcılara şirket politikaları sebebiyle eklenti bile yüklenemediği için Chrome Geliştirici Seçeneklerini kullanarak da aynı analizleri yapabilirsiniz. Ancak Google Chrome Eklentisinin biraz daha kullanışlı olduğunu fark edeceksiniz, bu yüzden biz incelememizi Google Chrome Eklentisi üzerinden yapacağız.

Lighthouse eklenti olarak yüklendiğinde mavi-kırmızı bir ikonla tarayıcının eklenti tepsisinde yer alıyor. Analiz etmek istediğiniz sayfadayken eklentiyi seçtiğinizde karşınıza “options” ve “Generate Report” seçenekleri çıkacak. “Options” yani Seçenekler içinde 5 seçenek göreceksiniz:

Sırasıyla

• Performance
• Progressive Web App
• Accesibility
• Best Practices
• SEO

Bu seçeneklerden istediğinizi seçebilir, istediğiniz kaldırabilirsiniz. Her bir seçeneğin kendine has analiz detayları olduğunu söyleyebiliriz, yazımızda da her detayı tek tek ele almaya çalışacağız.

Lighthouse Analiz ve Ölçüm Kriterleri

Öncelikle belirtmeliyiz ki, Lighthouse’daki ölçüm kriterlerinin tamamı SEO ile ilgili değil, ancak birbiriyle bağlantılı farklı disiplinlerin ortak noktada buluşmasıyla açıklanabilir. Bu analizin tek bir amacı var: Web sitesinin her plaformda hızlı yüklenebilmesini ve optimize edilmiş olmasını sağlamak. Yani araç kodlama alanında, tasarımda, erişilebilirlikte, sayfa yükleme hızında ve SEO performansında Web sitesinden tam verim almayı amaçlayan analizleri içeriyor. Yani ister kod yazın ister tasarım yapın isterseniz de SEO uzmanı olun hiç fark etmez, bu aracı kullanarak bir projeyi daha ileri noktalara götürme şansınız var.

• Performance

İlk ölçüm kriterimiz performansa dayalı ve sayfa yükleme hızını baz alıyor. Bu ölçüm sunucu konfigürasyonu ve kodlama açısından detayları içeriyor, eğer bu konularla ilgileniyorsanız faydalı olacağını düşünüyoruz. Test sonrasında göreceğimiz metriklerde yeni terimlerle karşılaşabiliriz:

• First meaningful paint – İlk Anlamlı Görüntü: Sayfa yüklenirken kullanıcıya görünür hale gelen renk, çerçeve, buton, görsel ve benzeri öğelerin ilk defa yüklendiği anı, Türkçe’ye ilk anlamlı görüntü olarak çevirebiliriz. Bu metrik oldukça önemlidir çünkü kullanıcıya sayfanın yüklenmeye başladığı izlenimini verir. Sayfa yüklenmeye başladığında beklenmesi gereken birkaç saniyelik boş beyaz ekrandan kurtulmaya başlayan kullanıcı büyük oranda sayfayı terk etmekten vazgeçeceği için ilk anlamlı görüntünün en hızlı şekilde kullanıcıya ulaştırılması çok önemlidir.
  Aşağıdaki videoda First meaningful paint hakkında fikir edinebilirsiniz:
• First Interactive – İlk İnteraktif Öğeler (beta aşamasında) : İlk anlamlı görüntü gibi sayfa içindeki kullanıcı arayüzü öğelerinin yüklediği andır. Lighthouse içinde bu bölüm şu an test aşamasında.
• Consistently Interactive – Tamamiyle İnteraktif Öğeler (beta aşamasında) : İnteraktif ve kullanıcı arayüzü öğelerinin tamamiyle yüklendiği anı ölçen metrik, şu an test aşamasında.
• Perceptual Speed Index – Algısal Hız Endeksi: Bir sayfanın içeriğinin ne kadar hızlı bir şekilde oluşturulduğunu ve sayfadaki öğelerin (çerçeve, buton gibi) doldurulduğunu gösteren bir sayfa yükü performans metriğidir. Lighthouse ile yaptığınız analizin skoru ne kadar düşükse o kadar yüksek performans gösterdiği anlamına gelir.
• Estimated Input Latency – Tahmini Giriş Gecikmesi: Bu metrik Web sitenizin veya uygulamanızın kullanıcı girdisine ne kadar süreyle cevap vereceğini yaklaşık olarak mili saniye cinsinden ölçmektedir. Gecikme süresi 50 mili saniyeden fazlaysa, sayfanız büyük oranda gecikmeli olarak değerlendirilecektir.
• Slow Time To First Byte – Yavaş İlk Byte Süresi: İlk byte – kullanıcı isteği karşılığında sunucudan gönderilen ilk veriye “ilk byte” adını verebiliriz. İlk verinin gönderildiği süre sunucunun tepki performansını ve Web sitesinin kodlamadaki optimizasyonunu da ölçmenizi sağlar. İlk byte ne kadar hızlıysa sayfadaki öğelerin tek başına ve bir bütün olarak yüklenmesi o kadar hızlı olur.

Söz konusu metrikler ağırlıklı olarak sunucu ve Web konfigürasyonunu baz alıyor olsa da, kodlama tarafında da göz atabileceğiniz oldukça faydalı olabilecek ölçümlerle karşılaşmanız da mümkün. Analiz sonuçlarında kodlama ile ilgili değerlendirilebilecek birçok önemli nokta olduğunu göreceksiniz. PageSpeed Insights’ta da karşımıza çıkan “Oluşturmayı engelleyen kaynaklar” (Render-Blocking Resources) metriği Lighthouse’ta da kullanılmış. HTML, JavaScript ve CSS kod paketlerinde yapılacak iyileştirmeler ile bu metrikten yüksek puan alınmasını sağlayabilirsiniz.

• Progressive Web App (PWA)

Son zamanlarda karşımıza sıklıkla çıkan Progressive Web App terimi için henüz Türkçe bir isim bulamamış olsak da, Progresif Web Uygulaması olarak bahsedebiliriz. Progresif Web Uygulaması özet olarak, özel bir kodlama tekniğiyle yazılmış Web sitelerinin bir mobil uygulama gibi kullanılmasını ve çevrim dışıyken de erişimi mümkün kılan yeni bir teknolojidir.

PWA olarak da kısaltabileceğimiz bu teknolojinin kullanılabilmesi için kullanıcının güncel bir Chrome tarayıcısı kullanıyor olması gerekir. Kullanıcı PWA teknolojisiyle yazılmış bir Web sitesine girdiğinde tarayıcı “Bu uygulamayı kısayol olarak ana ekranınıza eklemek ister misiniz?” sorusunu sorar ve kullanıcı kabul ettiğinde sayfa bir uygulama gibi kullanıcının cihazına eklenir. Kullanıcı istediği zaman istediği yerde, internete bağlı olmasa bile siteyi mobil uygulama kullanır gibi kullanarak gezinmeye devam edebilir. Detaylı ve teknik bilgi almak isterseniz Your First Progressive Web App içerik sayfasını ziyaret edebilirsiniz.

Günümüzde çok az Web sitesi PWA teknolojisini kullandığı için Lighthouse testlerinde bu bölümü incelemek vakit kaybı gibi görünebilir. Ancak PWA için gerekli olan bazı kriterler PWA haricinde de değerlendirilmektedir. Örneğin sitenin HTTPS kullanıyor olması PWA için bir gerekliliktir, ancak PWA haricinde de HTTPS kullanımını önermekteyiz, çünkü Google HTTPS’e Geçişi Zorunlu Hale Getiriyor.

PWA nasıl çalışıyor diye merak ederseniz, akıllı telefonunuzdan “Firefox Platform Status” veya “Nasa Open Source Software” sayfalarını ziyaret edebilirsiniz.

Lighthouse eğer PWA kullanıyorsanız, yaptığı analizle ne kadar başarılı olduğunuzu ölçüyor. Eğer PWA kullanmıyorsanız veya bir süre daha kullanmayı düşünmüyorsanız, bu bölümdeki performans ölçümlerini göz ucuyla incelemeniz yeterli olacaktır.

• Accesibility (Erişilebilirlik)

Önemli metriklerden biri olan Erişilebilirlik, Web sitenizin kullanıcı deneyimi açısından sunduğu performansı ölçmeye yarayan elementleri barındırıyor. Web siteniz testin bu bölümünden düşük puan almışsa, içerik düzenlemesi, iç linkleme, navigasyon yapısı, renk ve kontrast, yazı tipi ve boyutu gibi özellikleri ve “Erişilebilir Zengin Internet Uygulamaları” olarak adlandırabileceğimiz öğeleri gözden geçirmekte büyük fayda var.

Bu öğelerden birkaçına hızlıca göz atmak istersek; sayfada yer alan elementlerin kodlama tarafında fark edilebilir bir tanıma veya isme sahip olması, kullanıcı formlarının geçerli etiketlere sahip olması, arka plan rengi ve yazı tipi renkleri arasında yeterli kontrast olması, görsellerin alt text sahibi olması, butonların anlaşılır içeriğe sahip olması, temel meta etiketlerinin sayfa içinde kurallara uygun şekilde kullanılması, eğer varsa listelelenen öğelerin doğru kodlamayla kullanılmış olması, dil seçeneklerini belirtmek için doğru [lang] etiketinin kullanılmış olması ve özellikle mobil cihazlar için yeniden boyutlandırma seçeneklerinin doğru entegre edilmiş olması olarak sıralayabiliriz.

Ayrıca Lighthouse’ta analiz edilemeyen bazı metrikler de var, bunların manuel kontrol edilmesi sağlıklı olacaktır. Testi çalıştırdıktan sonra “manuel olarak kontrol etmek için ek öğeler” başlığı altında bu unsuları bulabilirsiniz.

• Best Practices (En İyi Uygulamalar)

Tamamen kodlamaya dayalı öğelerle donatılmış olan bu bölümde, Web siteniz mobil cihazlarda ve ayrıca bir uygulama olarak (PWA) kullanılıyorsa ne gibi düzenlemeler yapılması gerektiğini görmeniz mümkün. PWA kullanılmadığı zamanlarda dikkat edilmesi gereken önemli noktalar şunlar:

• Yeni sekmede açılması istenen pencerelerin “noopener” komutuyla açılması, performans ve güvenlik artısı sağlar.
• Üçüncü parti uygulamaların güvenlik düzeyleri periyodik olarak kontrol edilmelidir. Örnek vermek gerekirse Jquery kitaplıklarının bazıları güvenlik problemleri ortaya çıkarabilir. İncelemek isterseniz jquery vulnerabilities sayfasına bakabilirsiniz.
• Uygulama PWA olarak ayarlandığında, uygulamanın kısa isminin ana ekrana sığacağı şekilde belirlenmesi faydalıdır. İsim en fazla 12 karakterde olabilir.
• Görsellerin uygun en / boy oranında görüntülendiğinden emin olunması.
• Https kullanılıyor olması
• Kodlama kaynağında Html 2 öğeleri barındırıyor olması

Yukarıda listelediğimiz öğeler, önemli metriklerden bazılarıydı. Diğer metrikleri yaptığınız test sonuçlarında bulabilir ve inceleyebilirsiniz. Sunucu ve kodlama tarafında dikkat edilmesi ve teknik bilgiye sahip olunması gereken detaylara yer vermedik.

• SEO

Son maddemiz Lighthouse’ta SEO elementlerinin ölçülmesiyle karşımıza çıkıyor. Çoğu Web sitesinin yüksek puan alabileceği bu ölçüm kısmında hiç duymadığınız bir metrik yer almıyor. Genel olarak bildiğimiz ve kabul ettiğimiz temel SEO öğelerinin ölçüldüğü SEO kısmında, en sık karşılaştığımız hata mobil cihazlardaki yazı boyutunun gereğinden küçük olmasıydı. Örneğin kendi Web sitemizde yaptığımız testte yazı tipi boyutları çoğunlukla 10-14 pixel arasındaydı. Google yazı tipi boyutunun en az 16 pixel olmasını öneriyor, aksi taktirde çoğu kullanıcının zoom yaparak yazıyı büyütmek zorunda kalabileceğini belirtiyor.

Bu yüzden ilk olarak mobil cihazlar için yazı tipi boyutunu minimum 16 pixel olacak şekilde ayarlamanızı öneririz. Lighthouse analizinin SEO bölümünde yer alan diğer metrikler şöyle:

• Sitenin “Viewport ” meta etiketine sahip olması ve yeniden boyutlandırmaya izin verecek şekilde yapılandırılmış olması
• Sayfanın geçerli bir <meta title> etiketine sahip olması
• Sayfanın geçerli bir <meta description> etiketine sahip olması
• Sayfanın başarılı bir Http durum kodu bildirmesi, başarıyla açılan sayfalar Http durum kodu olarak 200 -> Ok döndürürler.
• Sayfa içindeki tüm linklerin geçerli ve görünür bir bağlantı metnine (anchor text) sahip olması
• Sayfanın robots.txt ve <meta robots> etiketi tarafından bloke edilmemiş olması, indekslemeye uygun durumda olması
• Sayfanın geçerli bir <hreflang> etiketine sahip olması
• Sayfanın geçerli bir <canonical> etiketine sahip olması
• Özellikle mobil cihazlar için önemli bir nokta: Çoğu mobil cihaz eklenti (plugin) desteklemeyebilir. Sayfa içerisinde mobil cihazlar tarafından desteklenmeyen bir plugin kullanılıyorsa, fonksiyon bozuklukları yaşanabilir ve kullanıcı deneyimi olumsuz etkilenebilir. Sayfanızda kullandığınız plugin’lerin mobil uyumlu olduğunu kontrol etmenizi, eğer plugin mobil uyumlu değilse mobil kullanıcılara göstermemenizi tavsiye ederiz.
• Ek olarak manuel kontrol edebileceğiniz iki ek öğe:
  • Mobil uyumluluk: Mobil uyumluluk test aracını kullanarak sayfanızın mobil uyumluluk durumunu öğrenebilirsiniz.
  • Yapılandırılmış veri: Yapılandırılmış veri test aracını kullanarak sayfanızdaki yapılandırılmış veride bir hata olup olmadığını öğrenebilirsiniz.

Ve analiz tamamlandığında eğer analizi dosya olarak kaydetmek isterseniz, sayfanın en üst sağ tarafındaki paylaşım butonunu kullanabilirsiniz. “Print Expanded” seçtikten sonra dosyayı yazdırmayıp, PDF olarak da kaydedebiliyorsunuz.

Google Lighthouse Analiz Sürecini Kolaylaştırmak için Yeni Aracımız Olabilir Mi?

Bize göre Google Lighthouse özellikle sayfa yükleme hızı, kodlama performansı, erişilebilirlik, Progresif Web Uygulaması optimizasyonu ve temel SEO uyumluluğu konusunda kullanabileceğiniz yeni bir araç olmaya aday. Google’ın tüm analiz araçlarını yenileme sürecine başladığı tarihlerde önce geliştirici seçenekleri içinde test aracı olarak kullanıma sürdüğü Lighthouse son şeklini alarak kullanıma açıldı. Bundan sonra çoğu özelliğin Lighthouse içine de eklenerek işimizi daha da kolaylaştıracağını düşünebiliriz. Tabi ilk önceliğimiz aracın tamamen Türkçe kullanılabilir olması ve Türkçe bir kullanım kılavuzuna kavuşması.

Yazımızda aracın sunduğu tüm özelliklerden bahsedemediğimizin farkındayız, bazı analizler uzmanlık düzeyinde teknik bilgi gerektirdiği için yanlış bir yönlendirme yapmak yerine hiç bahsetmemeyi seçtik. Özellikle yazılımla ilgiliyseniz, kendi çabanızla çözebileceğiniz birçok önemli detay olduğunu düşünüyoruz. Google Lighthouse’u eklenti olarak da tarayıcınıza ekleyip istediğiniz Web sitesini test etmenizi şiddetle tavsiye ederiz.