Largest Contentful Paint hakkında
Largest Contentful Paint nedir?
Largest Contentful Paint, en büyük görünür öğenin oluşturulmasının tamamlanmasının ne kadar sürdüğünü ölçer; bu öğe genellikle bir ana görsel, video önizleme görseli veya başlık metni bloğudur. Tek bir sayının “sayfa ne zaman göründü?” sorusuna verebileceği en yakın yanıt budur.
LCP, ekranın alt kısmında kalan ve görünür olmayan her şeyi bilerek dikkate almaz. Bir sayfa, LCP oluştuktan çok sonra bile komut dosyalarını ve yazı tiplerini yüklemeye devam edebilir; ziyaretçinin okuyabileceği bir şey zaten ekranda olduğundan, bu ölçüm açısından sorun değildir.
Onu toplam yükleme süresinden ayıran şey budur. Yükleme süresi, tarayıcının işini tamamlamasını ifade eder; LCP ise sayfanın kullanışlı hâle geldiği anı, yani ziyaretçinin bunu gerçekten deneyimlediği anı ifade eder.
İyi bir LCP değeri nedir?
Google, 2,5 saniye veya daha kısa süreleri iyi, 2,5 ila 4 saniye arasını iyileştirilmesi gereken, 4 saniyeden uzun süreleri ise zayıf olarak değerlendirir. Bu eşik, gerçek sayfa yüklemelerinin 75. yüzdelik dilimine uygulanır; dolayısıyla ortalama olarak değil, dört ziyaretçiden üçü için karşılanması gerekir.
Bu yüzdelik dilim, ilk bakışta göründüğünden daha önemlidir. Ortalama değer, hızlı bağlantılardaki hızlı ziyaretlerle kolayca iyileşebilir; 75. yüzdelik dilim ise kitlenizin daha yavaş olan çeyreğini göz önünde tutar. Bu da genellikle mobil kullanıcılarınızı ifade eder.
Bu nedenle bir sayfa, oluşturulduğu makinede son derece hızlı hissedilirken LCP açısından başarısız olabilir. Bu fark istisnadan çok olağan durumdur.
Yavaş LCP’ye genellikle ne sebep olur?
Sorun nadiren öğenin kendisidir. Öğeyi geciktiren şey neredeyse her zaman ondan önce gerçekleşen bir durumdur ve genellikle dört başlıca neden vardır:
- Yavaş sunucu yanıtı, bir bayt görüntülenmeden önce sonraki tüm işlemleri geciktirir.
- Tarayıcının görüntüyü oluşturmadan önce tamamlaması gereken, head bölümündeki oluşturmayı engelleyen CSS ve JavaScript.
- Hero görselinin büyük, optimize edilmemiş olması veya yükleme ertelenmemesi gerekirken lazy load ile yüklenmesi.
- Görselin HTML’de yer almak yerine CSS ile ayarlanması veya bir komut dosyası tarafından eklenmesi nedeniyle geç keşfedilmesi.
Sonuncusu, insanların en sık gözden kaçırdığı noktadır. Tarayıcı yalnızca işaretleme içinde görebildiği kaynakları getirmeye başlayabilir; bu nedenle HTML'de hiç bahsedilmeyen bir görsel, kendisinden bahseden stil sayfası veya komut dosyası getirilip ayrıştırılana kadar yüklenmeye başlayamaz.
Nasıl iyileştirilir?
- Hero görselini, tarayıcının hemen bulabilmesi için HTML'ye bir img etiketi olarak ekleyin.
- LCP öğesini hiçbir zaman lazy-load yöntemiyle yüklemeyin; lazy loading, ekranın alt kısmında kalan içerikler içindir.
- Görseli, gerçekten görüntülendiği boyutta ve modern bir formatta sunun.
- Sayfadaki gerçekten en önemli öğeyse önceden yükleyin.
- Kritik olmayan CSS ve JavaScript’i oluşturma yolunun dışına taşıyın.
- Sunucu yanıt süresini azaltın; çünkü her milisaniye, başka herhangi bir işlem başlamadan önce harcanır.
Bu aracın kontrol ettikleri
LCP testi, sayfaya ilişkin Google saha verilerini (Chrome kullanan gerçek ziyaretçilerden toplanan ölçümleri) okur ve sayfanın yukarıdaki eşiklere göre hangi konumda olduğunu gösterir.
Herhangi bir sonuç gösterilmiyorsa Google’ın raporlama yapabilmesi için sayfanın yeterli trafiği yok demektir; bu durum yeni veya az ziyaret edilen sayfalarda yaygındır. Bu bir başarısızlık değildir. En mantıklı yaklaşım, bir puanın görünmesini beklemek yerine bariz nedenleri düzeltmektir.
Sonraki adımlar