LCP.
LCP, bir sayfanın görünür alandaki en büyük içerik öğesinin boyanma süresidir ve Google 2,5 saniyenin altını iyi sayar.
Metrik, kullanıcının «sayfa geldi» dediği anı yakalamaya çalışıyor. İlk pikselin ne zaman boyandığı değil, asıl içeriğin ne zaman göründüğü ölçülüyor — çünkü kullanıcı için sayfanın gelmesi, okuyacağı şeyin gelmesi demek.
Ölçülen öğe genelde bir görsel ya da bir metin bloğu. Hangi öğenin LCP öğesi olduğu sayfaya ve ekran boyutuna göre değişiyor; masaüstünde hero görseli iken mobilde bir başlık olabiliyor. Bu yüzden her kırılımda ayrı belirlenmeli.
Süre dört parçaya ayrılıyor ve her parçanın ayrı bir tedavisi var.
- İlk bayt süresi — sunucu tarafı; barındırma ve önbellek.
- Kaynak keşif gecikmesi — tarayıcı kaynağı ne zaman fark etti? CSS ya da JavaScript içine gömülü kaynaklar geç keşfedilir.
- Kaynak yükleme süresi — boyut ve format sorunu.
- Render gecikmesi — kaynak geldi ama render engelleyiciler yüzünden boyanamadı.
En sık yapılan hata, LCP öğesine tembel yükleme uygulamaktır: görünür alan dışındaki görseller için doğru olan bu ayar, LCP öğesine uygulandığında keşfi geciktirir ve süreyi doğrudan artırır.
Saha verisinde bakılan değer 75. yüzdeliktir — kullanıcıların dörtte üçünün yaşadığı süre. Kendi cihazınızda ölçtüğünüz değer o dağılımın en iyi ucundan bir örnektir.
Süreyi düşürmenin en büyük kazancı genelde üçüncü aşamada — kaynak boyutunda. Modern format kullanmak, duyarlı boyut vermek ve görseli gerçekten görüneceği boyutta üretmek, çoğu sitede LCP'yi tek başına eşiğin altına indiriyor.
Dördüncü aşama ise render engelleyicilerle ilgili: kaynak gelmiş olsa bile stil dosyaları ayrıştırılmadan boyama yapılmıyor. Bu sitede iki stil dosyası birleştirilip yorumları sıyrıldı ve Lighthouse mobilde ölçülen 821 ile 221 milisaniyelik iki engelleme kapandı.
- Sunucudan gelen HTML'de görün — CSS arka planı ya da JavaScript ile eklenen görsel geç keşfedilir.
- Modern format kullan — AVIF ve WebP, aynı kaliteyi belirgin biçimde küçük dosyada verir.
- Duyarlı boyut ver — telefona masaüstü görseli göndermek en yaygın israftır.
- Yüksek öncelik ver — hero görseli için öncelik bildirimi.
- Tembel yükleme UYGULAMA — görünür alandaki kaynağı geciktirmek net kayıptır.
- Render engelleyicileri azalt — kaynak gelse bile stil beklenirse boyama olmaz.
Beşinci madde en sık yapılan ters etkili optimizasyon: tüm görsellere toplu tembel yükleme uygulamak, LCP'yi doğrudan kötüleştiriyor.