Largest Contentful Paint (LCP), web sayfalarının performansını ölçmek için kullanılan bir metriktir. Bu metrik, kullanıcının bir sayfada en büyük içeriğin yüklenmesi için beklediği süreyi ölçer.
LCP'ye dahil olan elementler; görseller, videolar, url() fonksiyonu ile yüklenen arka plan görselleri, yazı kutucukları veya satır içi elemanları içeren blok seviyeli elemanlardır. Görüntüleme alanını kaplayan görseller LCP değerlerinde kullanılmaz.
LCP, kullanıcı deneyiminin önemli bir parçasıdır ve web sayfalarının yüklenme süresini azaltmak için yapılan çalışmalarda da sıkça kullanılır.
Google, LCP metriğini Core Web Vitals’ın önemli bir kriteri olarak değerlendiriyor, web sitelerin sıralamalarda yükselmek için iyi bir LCP puanı elde etmeleri gerekir.
İyi Bir LCP Değeri Ne Kadardır?
LCP’de iyi bir kullanıcı deneyimi sunmak için 2,5 saniye veya daha kısa sürede LCP değeri elde edilmelidir. Kullanıcılar için bu hedefi sağlandığından emin olmak için mobil ve masaüstü cihazlar arasında %75’lik kullanıcı diliminde LCP’nin iyi değerini sağlamış olması gerekir.
Element Boyutuna Nasıl Karar Verilir?
Genellikle kullanıcının görüntüleme alanındaki elementlerin boyutları alınıyor. Element kırpılmışsa, görüntüleme alanının dışına taşmışsa bu kısımlar elementin boyutuna dahil edilmez. Metin elementleri için oluşturdukları en küçük dörtgen kabul alınıyor. Tüm elementler için CSS için eklenmiş kenarlık çevresindeki boşluk (margin), kenarlık (padding) ve kenarlık ile içerik arasındaki boşluk (border) değerleri dikkate alınmaz.
LCP Ne Zaman Raporlanır?
Web sayfaları aşamalı olarak yüklenir bu yüzden en büyük element değişebilir. Bu potansiyel değişimleri kontrol edebilmek için tarayıcı ilk frame ekrana çıktığı gibi LCP değerinini tutacak bir “Performance Entry” girdisi oluşturur. Başka frameler ekrana verildikçe daha büyük bir element geldiğinde yeni bir “Performance Entry” girdisi oluşarak LCP değeri değişir. Bir element yalnızca işlendiğindeve kullanıcı gördüğünde LCP elementi olarak değerlendirilebilir. Yüklenmemiş görseller işlenmemiş (render edilmemiş) sayılırlar.
Geç yüklenen görseller ve yazı tiplerinde sayfa, Document Object Model'e (DOM) yeni elementler olarak, yeni içerikler ekleyebilir. Eğer görüntüleme ekranından veya DOM’dan LCP kaldırılırsa yeni bir LCP ekrana verilene kadar LCP değeri o olarak kalır. Tarayıcı, kullanıcı sayfayla etkileşimi kestiği gibi raporlamayı durdurur. Sayfa eğer arka planda yüklenmişse LCP girişleri kullanıcı sayfaya girene kadar raporlanmaması olasıdır.
LCP Değeri Nasıl İyileştirilebilir?
LCP değeri bir metin bloğunun veya bir görselin hızlı bir şekilde indirilmesini engelleyen şeylerden etkilenir, bu yüzden bunlara sebep olan faktörleri ortadan kaldırmak LCP değerini optimize etmek için yeterlidir.
- Güvenilir ve hızlı web sağlayıcısı kullanmak, sunucu yanıt sürelerini iyileştirmek (TTFB).
- İçerik dağıtım ağı (Content Delivery Network - CDN) kullanmak. CDN fazladan sunucu kullanarak ana sunucuya giden trafiğin yükünü hafifletir. Bu yüzden CDN, ağın yükleme işini dengeleyerek LCP değerinin azalmasına yardımcı olur.
- Veri tabanlarını optimize etmek.
- Yazı tiplerini optimize etmek.
- Önbellek yapılandırılması kullanmak. Bir sayfanın statik yapılarını geçici olarak depolayarak daha hızlı sayfa yüklenmesini sağlar.
- JavaScript, CSS ve HTML dosyalarını küçültmek.
- Görselleri optimize etmek. Bazı görseller boyutlarına bağlı olarak LCP değerini etkileyebilir. Masaüstünde büyük boyutlu resimler kullanılıyorsa, mobilde orta boyutlu görseller kullanılmalı.
- Tembel yükleme (Lazy Load) kullanmak veya varsa sorunlarını gidermek.
- Görüntü işlemeyi (render) engelleyen JavaScript ve CSS dosyalarını kaldırmak.
- PRPL modeli kullanarak anında yüklemeyi kullanmak
PRPL Modeli:
(Pre-load.., Render.., Pre-cache.., Lazy-load..)
- En önemli kaynakları önceden yükleyin
- İlk yönlendirmeyi mümkün olan en kısa sürede oluşturun
- Kalan varlıklarlı (assetl) önbelleğe alın
- Diğer yönlendirmeleri ve kritik olmayan içerikleri geç yükleyin (lazy load)
LCP Değeri Nasıl Ölçülür?
Bu değeri öğrenmek için iki tür puanlama aracı kullanılabilir: alan araçları, puanlanacak siteyi ziyaret eden gerçek kullanıcılardan toplanan verilerle ölçüm yapan: PageSpeed Insights, Search Console (Core Web Vitals raporu); laboratuvar araçları, bazı algoritmalar kullanarak kontrollü bir ortamda önceden tanımlanmış algoritmalarla veriler sunan: WebPage Test, ChromeDev Tools, Lighthouse.
