Google Lighthouse ile Web Performansı Optimizasyonu

Günümüzde Web Development alanında rekabet arttıkça yeni yeni kavramlar ve bu kavramları karşılayan araçlar hayatımıza giriyor. Bir web uygulamasına girdiğimizde o uygulamamanın kullanıcı deneyimi açısından ne kadar önemli olduğu artık herkes tarafından kabul edilmiş durumda. Kullanıcılar her şeyi içinde barından fakat çok kompleks olup göze ve kullanıcı deneyimine hitap etmeyen bir uygulamayı kullanmaktansa, alışkanlık edindikleri işlerini kolayca halledebildikleri uygulamaları tercih ettiklerini biliyoruz, bu doğrultuda frontend developerlar da bu konuda kendilerini geliştiriyorlar.

Uygun tasarım tekniklerine göre tasarlanmış, kullanıcıların ihtiyaçlarına hitap eden bir uygulamayı modern frontend teknolojileriyle geliştirdikten sonra yavaş yavaş konu bu uygulamanın performansına doğru geliyor. Web uygulamarının performansını denetleyecek, eksik olan noktaları bize göstererek çözümler için bir yol haritası çizmemizi sağlayacak araçlar yeni değil, hatta bir süredir hayatımızda varlar. Fakat bunların arasında son yıllarda biri öne çıkıyor: Google Lighthouse. Farklı denetçilerin birbirinden farklı performans metrikleri ve bu metriklere dair çıkardıkları farklı sonuçlar mevcut. Google, günümüzde en çok kullanılan web browser ve search engine olmasından dolayı performans analizi yaparken daha sağlıklı bir sonuç elde etmemizi sağlıyor.

Google Lighthouse ve Google Lighthouse skoru

Google Lighthouse, Google tarafından geliştiriciler için tasarlanmış açık kaynaklı bir araçtır. Bu araç, bir web sitesinin kalitesini performans, erişilebilirlik, SEO ve daha fazlası açısından denetlemek için tasarlanmıştır. Bulguları, sitenin optimizasyon seviyesini anlamaya yardımcı olan bir puana dönüştürülür. Bu puanı anlamak, web sitesinin Google arama sonuçlarındaki sıralamasını iyileştirmeyi hedefleyen herkes için çok önemlidir.

Google Lighthouse Metrikleri

Google Lighthouse skorumuzu belli başlı metrikler ve bu metriklerin kontrol ettiği durumlar var. Örneğin kullanıcı uygulamaya yönlendiğinde ilk response’u kaç saniyede alıyor veya uygulamanıza en geç yüklenen içerik hangisi/kaç saniyede yükleniyor gibi. Şimdi bu metrikleri ve bu metrikleri nasıl geliştirebileceğimize bakalım.

First Contentful Paint (FCP)

Burada FCP süresi ikinci frame’i belirti çünkü gidilen siteye ait ilk response o zaman alınmıştır. 

FCP, kullanıcı uygulamaya yönlendikten sonra browser’a düşen ilk DOM elementine kadar olan süreyi saniye olarak bize döner. Bu DOM elementlerinden iframe harici image veya svg buna dahildir. Kullanıcıya site yüklenmeden döndüğünüz loading spinner da buna dahildir çünkü orda da bir DOM element’i render ediyoruz ve kullanıcı uygulamaya yönlendiğini anlayabiliyor. Bize dönen bu süre 0–1.8 saniye arasında ise yeşil(hızlı), 1.8–3 turuncu(ortalama), > 3s ise kırımızı(yavaş) anlamında renk kodlarını görürüz.

FCP skorumuzu nasıl yükseltebiliriz?

• Browser’da performance tool’unda FCP öncesinde çalışan bütün task’leri indirgeyebiliriz.
• FCP metriğini ve FCP’yi bloklayan taskları browser’da performans tab’ında görüntüleyebiliriz.
• Font kullanımımızın tarayıcıyı bloklamadığına emin olabiliriz.
• Kullanıcıya ilk görülen componentlerinin csslerini kullanıcıya critical css olarak yükletmeyi tercih edebiliriz.

Speed Index

Speed Index web uygulamamızın ne kadar hızlı yüklendiğini belirten bir ölçümdür. Ölçümü şöyle yapar, uygulamada ilk yüklenen elemenetten son yüklenen elemana kadar kayıt alınır, her bir görsel değişiklikte bir frame yaratılır ve bu frame’ler teker teker son frame ile karşılaştırılır. Farklı anlarda uygulamanın kaçta kaçı hangi saniye aralıklarında yüklendiğine bakan bir metriktir. Lighthouse bu ölçüm için speedline modülünü kullanır.

Yukarıdaki görselde web sayfası beyaz ekran’dan tamamen yüklenene kadar 6 farklı değişiklik geçirmiş, bunlara ayrı birer frame denir. Her biri en son frame ile (sayfanın tamemen yüklendiği durum) ile karşılaştırılır.

İlk birkaç frame, son işlenmiş frame ile hiçbir benzerlik göstermez, bu nedenle kullanıcının bunları tamamen gördüğü zaman Hız Endeksi puanına sayılır. Kullanıcı bir saniye boyunca boş bir sayfa görürse, bu Hız Endeksi metriğine 1 saniye ekler. 
Son üç kare son frame’e çok yakındır, bu nedenle Hız Endeksini yalnızca biraz artırırlar. Kullanıcı iki saniye boyunca %90 tamamlanmış bir sayfa görürse, bu Hız Endeksini %10 * 2 saniye, yani 200 milisaniye artırır.

Speed Index skorumuzu nasıl yükseltebiliriz?

• Ana iş parçacığını minimize etme
• JavaScript çalışma süresini azaltabiliriz.
• Font yüklenirkerken text’lerin farklı bir font ile gösterilebilmesini sağlama.

Total Blocking Time (TBT)

Total Blocking Time metriği, kullanıcıdan alınan inputlar sonrasında gelen response süreleri ile belirlenen metriktir. FCP öncesinde çalışan tasklar kullanıcı etkileşime giremediği için değerlendirilmeye alınmaz. Time To Interactive (TTI) sonrası 50ms’den daha fazla süren tasklar blocking time’a girer.

TBT skorumuzu nasıl iyileştirebiliriz ?

• Kullanılmayan veya gereksiz uzun hesaplamalar yapan kod bloklarımız varsa onları ayıklayabiliriz
• Performans tabında çok süre alan uzun tasklarımızı küçük küçük mikro tasklara bölebiliriz.

Largest Contentful Paint (LCP)

Uygulama yüklenirken kullanıcı ekranına en son yüklenen element ile alakalıdır. Element’in kaç saniyede yüklendiğini bize döner.

LCP skorumuzu nasıl iyileştirebiliriz ?

• Öncelikle hangi elementin en son yüklendiğine ve nedenine bakmalıyız. Farklı nedenler için farklı çözümler bulunmaktadır. Örneğin server’dan çok geç cevap alınmışsa server response time’larında iyileştirmeye gitmek gerekir. Eğer kullandığımız image’lar geç yükleniyorsa modern web browser’lar için daha uygun olan WebP veya AVIF kullanabiliriz.

Time To Interactive (TTI)

Time To Interactive metriği uygulama yüklenmeye başladığı ilk andan itibaren sayfada yüklenecek blocking bir task kalmayan an’a kadar olan zamanı ifade eder. FCP metriği ile süre başlar ve iki’den fazla get request yapılmayacağından emin oluna kadar devam eder. Sürenin durması için uygulamanın artık kullanıcı inputlarına cevap verebiliyor halde olması gerekir.

Web performansını optimize etmek, kesintisiz ve verimli bir kullanıcı deneyimi sunmak için hayati önem taşır ve Google Lighthouse bu doğrultuda kullanılacak araçlardan biridir. FCP, LCP ve TBT gibi metriklere dair sunduğu çözümlerle, hız, erişilebilirlik ve genel kullanılabilirliği geliştirmek için değerli bilgiler sağlar.

Yüksek Lighthouse skorları, yalnızca SEO'yu iyileştirmekle kalmaz, aynı zamanda uygulamanızın modern performans standartlarını karşılamasını da sağlar.