Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) Nedir?

Largest Contentful Paint, ekranın görünür bölümüne çizilmiş olan en büyük içerik öğesinin (resim, video veya metin türünde) render süresinin ölçümüdür. LCP zamanlaması, sayfanın talep edilmesi ile en büyük içerikli öğenin web sayfasının görünür bölümünde (ekranın üst kısmında) görüntülenmesi arasındaki süreyi milisaniye cinsinden gösterir.

Largest Contentful Paint'in Tarihçesi

Düşündüğünüzde, LCP Core Web Vitals'ın yükleme kısmını temsil etmek için basit bir metrik gibi görünebilir. Neden yükleme hızını 'sayfanın yüklenmesi için geçen süre' olarak ölçmeyelim?

Bunun nedeni, çoğu modern web sitesinde sayfanın ne zaman yüklendiğini tanımlamanın zor (hatta imkansız) olmasıdır. Giderek daha fazla web sitesi, sayfanın temelde sonsuza kadar yüklenmeye devam edebileceği lazy loading veya progressive loading gibi teknikler kullanmaktadır. Bu, sayfa hızının tek bir zaman noktasıyla ölçülemeyeceği anlamına gelir.

Sayfa yüklenirken kullanıcının sayfayı hızlı veya yavaş olarak deneyimlemesine neden olabilecek birkaç an vardır. Örneğin sunucu gecikmesi (Time to First Byte), içeriğin ilk kez görünür olduğu an (First Contentful Paint), görünür alanın tamamlanmış görünebileceği an (Largest Contentful Paint) ve sayfanın etkileşimli hale geldiği an (bir bağlantıya tıklamanın mümkün olduğu an) yükleme sürecinde sitenin yavaş veya hızlı görünebileceği noktalardır!

Largest Contentful Paint (LCP), ziyaretçinin user experience'ına odaklandığı için seçilmiştir. LCP gerçekleştiğinde, ziyaretçinin sayfanın yüklenmesinin tamamlandığını düşündüğünü varsayabilirsiniz (arka planda işlemler hâlâ devam ediyor olsa bile). LCP, 'Bir sayfanın içeriği ne zaman görünür?' sorusunu yanıtlamak için oluşturulmuştur. Bu nedenle LCP, kullanıcı odaklı performansın temel göstergesi olarak kabul edilir.

LCP İşletmeniz İçin Neden Önemli?

Largest Contentful Paint, 3 Core Web Vitals'tan biridir. Bir Core Web Vital olarak Largest Contentful Paint, SEO için önemlidir, ancak daha da önemlisi LCP, UX için kritiktir. Ziyaretçiler bekletilmekten hoşlanmaz ve giderek artan mobil trafik (masaüstü trafiğinden daha yavaş olma eğiliminde) ile Largest Contentful Paint'i optimize etmek çok mantıklıdır.

• SEO için. Evet, Google arama sonuçlarında en iyi sayfaları sunmaya odaklanır. LCP, Google'ın Core Web Vitals'ının bir parçasıdır. Google, site hızının arama sonuçlarında bir faktör olduğunu açıkça belirtir.
• Ziyaretçiler için: Google'ın kendi yaptığı güncel araştırmalara göre, 3 saniyelik bir yükleme süresiyle bir kullanıcının siteyi terk etme olasılığı iki katına çıkar. Muhtemelen bunu kendiniz de fark etmişsinizdir. İnternette gezinirken yavaş yüklenen bir web sitesi kadar sinir bozucu neredeyse hiçbir şey yoktur. Yavaş yüklenen bir sayfayı hızla terk etme olasılığınız yüksektir.
• Diğer nedenler: Sayfa Hızı, Google Reklam Skorunuzda bir faktördür. Bu, reklamlarınızı daha ucuza satın alabileceğiniz anlamına gelir ve son olarak Core Web Vitals'ı geçmek, Google'ın üst Haber kutusunun ön koşullarından biridir.

Hızlı bir LCP, ziyaretçiye sayfanın hızlı yüklendiği izlenimini verir. Sonuç olarak, bir ziyaretçinin sayfadan ayrılma olasılığı azalır.

Hangi Öğeler LCP Öğesi Olarak Kabul Edilir?

Tüm öğeler LCP öğesi olarak kabul edilmez. En büyük içerikli öğe, kullanıcı sayfayla etkileşime geçmeden önce ekranın görünür bölümüne (görüntü alanına) çizilmiş olmalıdır.

Öğe şunlardan biri olmalıdır:

• Bir <img> öğesi.
• Bir <svg> öğesinin içinde yer alan <image> öğesi.
• Bir <video> öğesi (poster görüntüsü veya ilk video karesi, hangisi daha önce gerçekleşirse o kullanılır).
• CSS url() fonksiyonu aracılığıyla yüklenen arka plan görüntüsüne sahip bir öğe. (Not: Bu, LCP optimizasyonu için bir anti-pattern'dir çünkü görüntüyü tarayıcının preload tarayıcısı tarafından keşfedilemez hale getirir).

• Metin düğümleri veya diğer satır içi metin öğeleri içeren blok düzeyinde bir öğe (<span> gibi satır içi metin öğeleri durumunda en yakın blok düzeyinde öğe olan <div> veya <p> dikkate alınır).

Şu anda bazı öğeler LCP adayı olarak hariç tutulmaktadır; örneğin opacity: 0 ile gizlenen öğeler, görüntü alanının %100'üyle eşleşen görüntüler (kapak görüntüleri) ve yer tutucular (düşük entropili görüntüler). Unutmayın, spesifikasyon geliştikçe bu değişebilir!

Teknik detaylar: LCP Öğe Boyutunu Ölçme

LCP, görüntü alanındaki en büyük görünür içerik öğesini belirler ve boyutunu bir dizi kesin kurala göre hesaplar. Bu kurallar, karmaşık düzenlerde bile tutarlılık ve doğruluk sağlar:

• Yalnızca Görüntü Alanı - Yalnızca sayfanın görünür kısmı dikkate alınır. Bir öğe yalnızca kısmen görünür görüntü alanında ise, dikkate alınan boyut kırpılır.
• Kenarlık, dolgu veya kenar boşluğu yok. Tüm öğeler için metin ve görüntü kenarlıkları, dolgu ve kenar boşlukları tamamen göz ardı edilir.
• Metin boyutu - metin öğelerinin boyutu, metin düğüm(ler)inin etrafına çizilebilecek en küçük dikdörtgen olarak raporlanır.
• Görüntü boyutu - görüntüler için iç boyutlar (orijinal genişlik ve yükseklik) ile görüntüleme boyutunun (ekrandaki boyut) en küçüğü LCP öğe boyutunu hesaplamak için kullanılır
• İlk boyut geçerlidir - düzen değiştiğinde veya bir öğe boyutu değiştiğinde yalnızca ilk boyut LCP için dikkate alınır
• Kaldırılan öğeler dahildir - bir öğe DOM'dan kaldırıldığında hâlâ bir LCP adayıdır

LCP'nin Dinamik Yapısı

Largest Contentful Paint (LCP) dinamik bir metriktir. Oluşturma karmaşık olabilir ve aşamalar halinde gerçekleşebilir; sayfa yüklenme sırasında LCP öğesinin değişmesi normaldir. İlk kullanıcı etkileşiminden önce, tarayıcının performans gözlemcisi LCP adayı olarak kabul edilebilecek tüm öğeleri belirler. Hem görüntü alanında görünür hem de daha önce belirlenen LCP öğesinden daha büyük yeni bir öğe oluşturulursa, bu yeni LCP olur.

LCP alan verilerinden çıkarımlar: CoreDash'te günde milyonlarca LCP kaydını takip ediyoruz. Sonuç olarak, mobil sayfa görüntülemelerinde LCP öğesi genellikle metin tabanlı bir öğedir; bir paragraf veya başlık. Ortalamada (veya kesin olmak gerekirse 75. yüzdelikte) LCP öğesi bir metin düğümü veya normal bir görüntü olduğunda Core Web Vitals geçer. LCP öğesi bir arka plan görüntüsü, video veya lazy-loaded görüntü olduğunda, Core Web Vitals genellikle başarısız olur.

İyi Bir LCP Skoru Nedir?

Largest Contentful Paint için Core Web Vitals'ı geçmek için ziyaretçilerinizin en az %75'inin 'iyi' bir LCP skoruna sahip olması gerekir. 0 ile 2,5 saniye arasındaki bir LCP skoru iyi kabul edilir, 2,5 ile 4 saniye arasındaki bir LCP skoru iyileştirme gerektirir ve 4 saniyenin üzerindeki bir LCP skoru kötü kabul edilir.

LCP Nasıl Ölçülür: Dört Temel Aşama

Google'a göre Largest Contentful Paint 4 alt bölüme ayrılabilir.

Bir sayfanın nihai LCP süresi tek, yekpare bir değer değildir. Dört ayrı alt bölümün toplamıdır. Bu dağılımı anlamak, LCP sorunlarını verimli bir şekilde teşhis etmenin ve düzeltmenin anahtarıdır.

İşte dört aşamanın dökümü:

• Time to first byte (TTFB) - Bu tamamen sunucu yanıt süresidir. Tarayıcının sunucunuzdan ilk veri baytını alması için geçen süredir. Yavaş bir TTFB, LCP'nizi her zaman olumsuz etkileyecek temel bir sorundur.
• Kaynak yükleme gecikmesi - Bu "keşif boşluğu"dur. TTFB ile tarayıcının LCP kaynağını indirmeye başlaması arasındaki süredir. Buradaki uzun bir gecikme, tarayıcının LCP kaynağını geç bulduğu anlamına gelir; CSS arka plan görüntüleri veya istemci tarafı oluşturma kullanmanın klasik bir belirtisidir.
• Kaynak yükleme süresi - Bu, LCP kaynak dosyasını (örneğin görüntü veya yazı tipi) gerçekten indirmek için geçen süredir. Bu tamamen dosya boyutu ve ağ koşullarıyla ilgilidir.
• Öğe render gecikmesi - Bu son gecikmedir. LCP kaynağının indirilmesinin tamamlanması ile öğenin tamamen oluşturulması arasındaki süredir. Bu gecikme neredeyse her zaman tarayıcının ana iş parçacığının diğer görevler, özellikle JavaScript işleme tarafından bloke edilmesinden kaynaklanır.

Bu odak alanlarının her biri Largest Contentful Paint'i iyileştirmek için optimize edilebilir. Atmanız gereken adımları anlamak için Largest Contentful Paint (LCP) Sorunlarını Belirleme ve Düzeltme bölümünü okuyun.

Largest Contentful Paint Nasıl Ölçülür?

Largest Contentful Paint (LCP), saf JavaScript, Lab verileri ve Alan araçlarıyla ölçülebilir. Her ikisinin de avantajları ve dezavantajları vardır.

Largest Contentful Paint'i JavaScript ile Ölçme

Largest Contentful Paint'i (LCP) JavaScript kullanarak ölçmek için Performance Observer API hızlı bir çözüm sunar. Aşağıdaki kod parçası, LCP zamanlamasını ve öğe bilgilerini nasıl yakalayacağınızı gösterir:

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    console.log('LCP value: ', lcpEntry.startTime);
    console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
  }).observe({ type: 'largest-contentful-paint', buffered: true });

Bu kod parçası, raporlanan LCP kaydını takip eder ve zaman damgası ile öğe ayrıntılarını konsolda görüntüler. Daha kapsamlı bilgiler için Web Vitals Kütüphanesi'ni kullanmayı düşünebilirsiniz.

Chrome DevTools'ta Largest Contentful Paint (LCP) Ölçme

1. Ctrl+Shift+I (veya Mac'te Cmd+Option+I) tuşlarına basarak Chrome DevTools'u açın.
2. Performance sekmesine gidin.
3. Core Web Vitals'ı görüntülemek için sayfayı yeniden yükleyin.

DevTools performans sekmesi artık Largest Contentful Paint'in zamanlaması ve öğesi dahil olmak üzere Core Web Vitals hakkında bilgi görüntüler.

Largest Contentful Paint'i Lab ve Alan Araçlarıyla Ölçme

Açıkça belirtelim: Lab ve Alan verileri iki farklı amaca hizmet eder. İkisine de ihtiyacınız var.

• Alan verileri (RUM ve CrUX) Core Web Vitals'ı geçmek için gerçekten önemli olan tek veridir. Gerçek kullanıcılarınızın deneyimlediği şeydir. Google bu veriyi CrUX veri setinden kullanır. Bir sorununuz olup olmadığını anlamak için buradan başlarsınız.
• Lab verileri (Lighthouse, vb.) kontrollü bir testtir. Google'ın sıralama için kullandığı veri değildir, ancak hata ayıklama için vazgeçilmezdir. Neden bir sorununuz olduğunu anlamak için bunu kullanırsınız.

İşte temel araçlara hızlı bir rehber:

Largest Contentful Paint'i İyileştirme

LCP'yi optimize etmek, dört aşamayı ele alan sistematik bir yaklaşım gerektirir. LCP öğesi çizilmeden önce gerçekleşen her şey, ister ağla ilgili ister CPU yoğun olsun, LCP skorunu etkileyebilir. Tek bir düzeltmenin peşine düşmeyin; tüm zinciri anlayın. İşte üst düzey strateji:

• TTFB'yi Optimize Edin: Sunucunuzun hızlı olması gerekir. TTFB'niz yavaşsa, başka hiçbir şeyin önemi yoktur. Bu, sunucu tarafı önbellekleme, CDN kullanımı ve verimli backend kodu gerektirir. Daha fazla bilgi için TTFB optimizasyon rehberimizi okuyun.
• Kaynak Yükleme Gecikmesini Ortadan Kaldırın: LCP öğesinin ilk HTML'de olduğundan emin olun, böylece tarayıcının preload tarayıcısı onu anında bulabilir. LCP için CSS arka plan görüntülerinden kaçının. Geç keşfedilen kritik görüntüleri önceden yükleyin. Kaynak Yükleme Gecikmesini düzeltme rehberimizde nasıl yapılacağını öğrenin.
• Kaynak Yükleme Süresini Azaltın: LCP dosyasını küçültün. Bu, AVIF gibi modern görüntü formatları, duyarlı görüntüler ve uygun sıkıştırma kullanmak anlamına gelir. LCP Görüntüsünü Optimize Etme konusundaki kapsamlı rehberimize bakın.
• Öğe Render Gecikmesini Kısaltın: Ana iş parçacığını engellemeyi durdurun. Kritik olmayan JavaScript'i erteleyin, uzun görevleri parçalayın ve render engelleyen CSS'yi en aza indirin. Bu konu, LCP sorunlarını düzeltme rehberimizde ele alınmaktadır.