Ekim'in ilk haftasında kendi sitemizi baştan sona denetledik. Anasayfanın en büyük öğesi hero'daki taş bloğun poster görseli; Lighthouse mobil ölçümünde LCP adayı da oydu. İlk refleks belliydi: görseli küçült.
Poster 277.652 bayttan 112.252 bayta indi. Skor yerinde saydı.
Ölçümü nasıl aldık
Lighthouse'u mobil profilde, production build üzerinde üç kez koştuk. Tek koşu gürültülü olur, o yüzden en iyi iki koşunun ortalamasına bakıyoruz. Sonuçlar 70, 84 ve 83 geldi. LCP iyi iki koşuda 4,6 saniye, CLS üçünde de 0.
İlk koşunun 70 çıkması tek başına yanıltıcı olurdu. Aynı build, aynı makine, birkaç dakika arayla 14 puan fark.
LCP süresinin içinde ne var
Lighthouse LCP süresini dört parçaya ayırır: ilk baytın gelmesi (TTFB), kaynağın yüklenmeye başlamadan beklediği süre, kaynağın inme süresi ve render gecikmesi. Bizde toplamın yüzde 72'si son parçadaydı. Görsel çoktan inmişti, tarayıcı onu ekrana basmak için başka bir işin bitmesini bekliyordu.
Bu tabloda görseli küçültmek, zaten kısa olan parçayı biraz daha kısaltmak demek. Toplam süreye etkisi ölçüm gürültüsünün içinde kaldı.
Render gecikmesi neyi bekler
İnmiş bir görselin ekrana gelmesini geciktiren tipik sebepler şunlar: ana iş parçacığını meşgul eden JavaScript, hydration, geç gelen bir font ya da görseli istemci tarafında sonradan sayfaya ekleyen bir bileşen. Bizim hero'da React Three Fiber ile çizilen bir 3B sahne ve scroll animasyonları çalışıyor. Poster, 3B sahne hazır olana kadar onun yerini tutuyor.
Darboğaz görselin boyutu değil, sayfanın o anda yaptığı iş.
Çıkardığımız dersler
- LCP'ye dokunmadan önce Lighthouse'taki LCP kırılımına bak. Hangi parça büyükse iş oradadır.
- Görsel küçültmek, inme süresi büyükse işe yarar. Render gecikmesi büyükse yaramaz.
- Tek koşuya güvenme. Bizim ilk koşu 70, sonraki ikisi 84 ve 83 çıktı.
- Küçülttüğümüz posteri geri büyütmedik: skor aynı kalsa da yavaş bağlantıda sayfa başına yaklaşık 165 KB daha az veri iniyor.
Mobil skor şu an 84. Daha yukarısı için bakılacak yer görseller değil, hero'nun ilk boyamadan önce çalıştırdığı JavaScript.