En büyük içerikli boyama, yani LCP, ziyaretçinin ekranda gördüğü en büyük görsel ya da metin bloğunun yüklenme anını ölçer. Google bu değer için 2,5 saniyenin altını iyi kabul eder. Süreyi düşürmek için önce sorunun nerede olduğunu bulmak, sonra o noktaya odaklanmak gerekir.
Önce LCP elemanını belirleyin
Her sayfanın LCP elemanı farklıdır. Çoğu zaman ilk ekrandaki büyük bir görsel, bazen de bir başlık paragrafıdır. Tarayıcı geliştirici araçlarındaki performans panelinden ya da PageSpeed Insights raporundan bu elemanı görebilirsiniz. Ölçümü hem laboratuvar verisiyle hem de gerçek kullanıcı verisiyle yapın; mobil sonuçlar genellikle daha kötüdür ve asıl önceliğiniz bunlar olmalıdır. LCP süresini dört parçaya bölerek düşünün: sunucunun yanıt vermesi, kaynağın keşfedilmesi, kaynağın indirilmesi ve ekrana çizilmesi.
Görseli hafifletin ve öne alın
Ana görsel LCP elemanıysa ilk iş boyutunu küçültmektir. WebP ya da AVIF biçimi, aynı kalitede JPEG’e göre belirgin biçimde daha az veri taşır. Görseli görüntülendiği genişliğe göre yeniden boyutlandırın ve srcset ile farklı ekranlara uygun sürümler sunun. Bu görselde kesinlikle lazy loading kullanmayın; gecikmeli yükleme tam tersine süreyi uzatır. Bunun yerine fetchpriority=”high” özniteliği ekleyin ve gerekiyorsa head içinde preload ile tarayıcıya görseli erken bulmasını söyleyin. CSS arka plan görselleri tarayıcı tarafından geç keşfedildiği için, ana görseli mümkünse img etiketiyle verin.
Sunucu yanıtını ve engelleyici kaynakları azaltın
Sayfanın ilk baytı geç geliyorsa görsel optimizasyonu tek başına yetmez. Sayfa önbellekleme, güncel bir PHP ya da sunucu sürümü ve bir CDN kullanımı ilk bayt süresini ciddi şekilde kısaltır. Ardından çizimi bekleten kaynaklara bakın. Kritik CSS’i satır içine alıp kalanını geciktirmek, kullanılmayan stilleri temizlemek ve JavaScript dosyalarına defer ya da async eklemek çizim başlangıcını öne çeker. Web fontları metin tabanlı LCP’de sık görülen bir yavaşlık sebebidir; font-display: swap kullanın ve yalnızca gerçekten ihtiyaç duyduğunuz ağırlıkları yükleyin.
Üçüncü taraf yüklerini kontrol edin
Sohbet eklentileri, reklam kodları ve analiz betikleri ana iş parçacığını meşgul eder. İlk ekranda gerekmeyenleri sayfa yüklendikten sonra çalışacak şekilde erteleyin ve artık kullanmadığınız kodları kaldırın. Her değişiklikten sonra aynı sayfayı yeniden ölçün; hangi adımın ne kadar kazandırdığını görmek, bir sonraki önceliği netleştirir.
LCP iyileştirmesi tek seferlik bir iş değildir. Yeni görsel, eklenti ya da tasarım değişikliği süreyi tekrar bozabilir; bu yüzden ayda bir ölçüm yapmak iyi bir alışkanlıktır.