LCP (Largest Contentful Paint)
Tanım
Largest Contentful Paint (LCP), bir sayfa yüklenmeye başladıktan sonra en büyük görünür öğenin, genellikle kapak ya da ana ürün görselinin, ekranda belirmesinin ne kadar sürdüğünü ölçer. Google'ın iyi eşiği, ziyaretlerin 75. yüzdeliğinde 2,5 saniye ya da altıdır. Bir ürün sayfasında LCP öğesi neredeyse her zaman ana görseldir; bu yüzden puanı görsel ağırlığı, sunucu yanıt süresi ve oluşturmayı engelleyen kaynaklar belirler.
Mağazanız için neden önemli
LCP, bir ziyaretçinin "sayfa yüklendi" dediği ana en yakın metriktir. Ana görsel ekrana gelene kadar ürün sayfası kullanılabilir değildir. Buradaki her ek saniye ziyaretçi kaybettirir ve sahadaki mobil bağlantılar, mağazaların test edildiği ofis Wi-Fi'sinden yavaştır.
LCP'yi dört şey oluşturur: sunucunun ne kadar hızlı yanıt verdiği, tarayıcının oluşturmaya ne kadar çabuk başlayabildiği (CSS ve betiklerle engellenir), görseli ne kadar erken keşfettiği ve görselin ne kadar ağır olduğu. Bir sayfa bunlardan herhangi birinde kalabilir. Çözümler bilinir: sayfayı önbelleğe alın, CSS'i küçük tutun, tarayıcıya görseli erken haber verin ve görseli doğru boyutta modern bir biçimde sunun.
Kambloo bunu nasıl ele alıyor
Kambloo'nun vitrin bütçesi, Google'ın eşiğinden katı biçimde, mobilde 75. yüzdelikte LCP'yi 2,0 saniyenin altına koyar ve bunu derleme hattında zorunlu kılar.
Ürün sayfaları sunucu tarafında oluşturulur ve anonim ziyaretçiler için bir CDN'in arkasındaki tam sayfa önbelleğinden sunulur; böylece sunucu yanıtı hızlıdır. Ana ürün görseli yüksek öncelikli olarak işaretlenir ve önceden yüklenir; asla tembel yüklenmez, diğer tüm görseller ise yüklenir. Yüklenen her görsel önceden beş boyutta AVIF ve WebP'ye dönüştürülür; böylece tarayıcı ekrana uyan en küçük dosyayı indirir.
CDN'den sunulan, önceden derlenmiş tek bir çekirdek CSS dosyası vardır; mağazanın renkleri ve yazı tipleri küçük bir satır içi belirteç bloğu olarak eklenir, böylece oluşturmayı engelleyen büyük bir şey kalmaz. Yazı tipleri varsayılan olarak sistem kümesidir; kendi yazı tipiyle gelen temalar bunları kendi sunucusunda barındırmak ve önceden yüklemek zorundadır.
LCP (Largest Contentful Paint) hakkında sorular
Bir ürün sayfasında LCP öğesi genellikle nedir?
Ana ürün görseli. Büyükse, tembel yükleniyorsa ya da eski bir biçimde sunuluyorsa LCP bundan zarar görür. Bu görsel önceden yüklenmeli, öncelikli işaretlenmeli ve doğru boyutta AVIF ya da WebP olarak sunulmalıdır.
Tembel yükleme neden LCP'ye zarar verir?
Tembel yükleme, bir görseli tarayıcı gerekli olduğuna karar edene kadar geciktirir. Ana görsele uygulandığında tam da LCP'nin ölçtüğü öğeyi geciktirir. Tembel yükleme yalnızca ekranın altında kalan görsellere uygundur.