Largest Contentful Paint (LCP)

Philip Walton
Barry Pollard

Tarayıcı Desteği

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: desteklenmez.

Kaynak

Eskiden, web geliştiricilerin bir web sayfasındaki ana içeriğin ne kadar hızlı yüklendiğini ve kullanıcılar tarafından ne kadar hızlı yüklendiğini ölçmesi zordu. load veya DOMContentLoaded gibi eski metrikler, kullanıcının ekranında gördüğüyle her zaman aynı olmadığı için iyi çalışmaz. İlk Zengin İçerikli Boyama (FCP) gibi daha yeni, kullanıcı odaklı performans metrikleri ise yükleme deneyiminin yalnızca ilk kısmını yakalar. Sayfada başlangıç ekranı veya yükleme göstergesi gösteriliyorsa bu an kullanıcı açısından pek alakalı değildir.

Geçmişte, ilk boyanın ardından yükleme deneyimini daha iyi hale getirmek için İlk Anlamlı Boyama (FMP) ve Hız İndeksi (SI) (ikisi de Lighthouse'da mevcuttur) gibi performans metrikleri önermiştik ancak bu metrikler karmaşık, açıklanması zor ve genellikle yanlıştır. Yani sayfanın ana içeriği yüklendiğinde hâlâ tanımlanmamış olurlar.

W3C Web Performansı Çalışma Grubu'ndaki tartışmalar ve Google'da yapılan araştırmalara dayanarak, bir sayfanın ana içeriğinin ne zaman yüklendiğini ölçmenin en doğru yolunun en büyük öğenin ne zaman oluşturulduğuna bakmak olduğunu tespit ettik.

LCP nedir?

LCP, kullanıcının sayfaya ilk kez gittiği zamana bağlı olarak görüntü alanında görünen en büyük resim, metin bloğu veya videonun oluşturma süresini bildirir.

İyi LCP puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için sitelerde Largest Contentful Paint'in 2,5 saniye veya daha kısa olması gerekir. Kullanıcılarınızın çoğunda bu hedefe ulaştığınızdan emin olmak için iyi bir ölçüm eşiği, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

İyi LCP değerleri 2,5 saniye veya daha kısa, zayıf değerler 4,0 saniyeden uzundur ve iyileştirilmesi gerekenlerin arasındaki tüm değerlerdir
İyi bir LCP değeri 2,5 saniye veya daha kısadır.
ziyaret edin.

Hangi öğeler dikkate alınır?

Şu anda Largest Contentful Paint API'de belirtildiği gibi, Largest Contentful Paint için dikkate alınan öğe türleri şunlardır:

  • <img> öğeleri (ilk kare sunum süresi, GIF'ler veya animasyonlu PNG'ler gibi animasyonlu içerikler için kullanılır)
  • <svg> öğesinin içinde <image> öğeleri
  • <video> öğeleri (poster resmi yükleme süresi veya videolar için ilk kare sunum süresi kullanılır. Hangisi daha önceyse o kullanılır.)
  • url() işlevi kullanılarak yüklenen arka plan resmine sahip bir öğe (CSS renk geçişinin aksine)
  • Metin düğümleri veya diğer satır içi metin öğesi alt öğelerini içeren blok düzeyindeki öğeler.

Öğelerin bu sınırlı grupla kısıtlanmasının, başlangıçta her şeyi basit tutmak amacıyla kasıtlı olarak yapıldığını unutmayın. Daha fazla araştırma yapıldıkça gelecekte ek öğeler (ör. tam <svg> desteği) eklenebilir.

LCP ölçümleri, yalnızca bazı öğeleri dikkate almanın yanı sıra kullanıcıların "içerik içermeyen" olarak görme olasılığı yüksek olan belirli öğeleri hariç tutmak için sezgisel yöntemler kullanır. Chromium tabanlı tarayıcılar için bunlar şunları içerir:

  • Kullanıcının göremediği, opaklığı 0 olan öğeler
  • Muhtemelen içerik yerine arka plan olarak kabul edilen, tüm görüntü alanını kaplayan öğeler
  • Sayfanın gerçek içeriğini yansıtmayabilecek yer tutucu resimler veya entropisi düşük diğer resimler

Tarayıcılar, kullanıcıların en büyük içerik dolu öğenin ne olduğuna dair beklentilerini karşıladığından emin olmak için bu buluşsal yöntemleri iyileştirmeye devam edebilir.

Bu "memnuniyetli" bulgular, First Contentful Paint (FCP) tarafından kullanılanlardan farklı olabilir. Bu öğe, LCP adayları olmaya uygun olmasa bile yer tutucu resimler veya tam görüntü alanı resimleri gibi bu öğelerden bazılarını dikkate alabilir. Her iki metrik de adında "contentful" ifadesini kullansa da amaçlarının farklı olduğunu unutmayın. FCP, ana içerik boyandığında herhangi bir içeriğin ekrana ve LCP'ye boyandığını ölçer. Bu nedenle, LCP'nin daha seçici olması amaçlanır.

Bir öğenin boyutu nasıl belirlenir?

LCP için raporlanan öğenin boyutu genellikle görüntü alanında kullanıcı tarafından görülebilen boyuttur. Öğe, görüntü alanının dışına uzanıyorsa veya herhangi bir öğe kırpılmışsa ya da görünmez taşıma içeriyorsa bu bölümler öğenin boyutuna dahil edilmez.

İçeriksel boyutlarından yeniden boyutlandırılmış resim öğeleri için raporlanan boyut, görünür boyut veya içsel boyutun hangisi daha küçükse o boyuttur.

Metin öğeleri için LCP, yalnızca tüm metin düğümlerini içerebilen en küçük dikdörtgeni dikkate alır.

LCP, tüm öğeler için CSS kullanılarak uygulanan kenar boşlukları, dolgular veya kenarlıkları dikkate almaz.

LCP ne zaman raporlanır?

Web sayfaları genellikle aşamalı olarak yüklenir. Bunun sonucunda, sayfadaki en büyük öğenin değişmesi mümkündür.

Tarayıcının ilk kareyi boyamasından hemen sonra, bu olası değişikliği ele almak için tarayıcının en büyük içerik öğesini tanımlayan largest-contentful-paint türündeki bir PerformanceEntry gönderir. Ancak sonraki kareleri oluşturduktan sonra, en büyük içerik öğesi her değiştiğinde başka bir PerformanceEntry gönderir.

Örneğin, metin ve hero resim içeren bir sayfada, tarayıcı başlangıçta metni oluşturabilir. Bu noktada tarayıcı, element özelliği muhtemelen bir <p> veya <h1> öğesine başvuruda bulunacak olan bir largest-contentful-paint girişi gönderir. Daha sonra, hero resminin yüklenmesi tamamlandığında ikinci bir largest-contentful-paint girişi gönderilir ve element mülkü <img>'ye referans verir.

Bir öğe, yalnızca oluşturulduktan ve kullanıcıya gösterildikten sonra en büyük zengin içerikli öğe olarak kabul edilebilir. Henüz yüklenmemiş resimler "oluşturulmuş" olarak kabul edilmez. Metin düğümleri de yazı tipi bloku dönemi sırasında web yazı tiplerini kullanmaz. Bu gibi durumlarda, en büyük içerikli öğe olarak daha küçük bir öğe bildirilebilir ancak daha büyük öğe oluşturulduktan hemen sonra başka bir PerformanceEntry oluşturulur.

Bir sayfa, geç yüklenen resim ve yazı tiplerine ek olarak yeni içerikler kullanıma sunulduğunda DOM'ye yeni öğeler ekleyebilir. Bu yeni öğelerden herhangi biri önceki en büyük içerikli öğeden büyükse yeni bir PerformanceEntry de raporlanır.

En büyük zengin içerikli öğe görüntü alanından veya hatta DOM'dan kaldırılırsa daha büyük bir öğe oluşturulmadığı sürece en büyük zengin içerikli öğe olarak kalır.

Kullanıcı etkileşimi genellikle kullanıcının gördüğü içeriği değiştirdiği için (özellikle de kaydırma işleminde) tarayıcı, kullanıcı sayfayla etkileşime girer girmez (dokulama, kaydırma veya tuş basma yoluyla) yeni girişleri bildirmeyi durdurur.

Analiz amacıyla, analiz hizmetinize yalnızca en son gönderilen PerformanceEntry verilerini raporlamalısınız.

Yükleme süresi ile oluşturma süresi karşılaştırması

Güvenlik nedeniyle, Timing-Allow-Origin başlığı bulunmayan kaynaklar arası resimlerde resimlerin oluşturma zaman damgası açığa çıkarılmaz. Bunun yerine, bunların yalnızca yükleme süreleri gösterilir (bunun nedeni, diğer birçok web API'si üzerinden zaten kullanıma sunulmuş olmasıdır).

Bu durum, web API'leri tarafından LCP'nin FCP'den daha erken bildirildiği imkansız gibi görünen bir duruma yol açabilir. Böyle bir durum söz konusu değildir ancak yalnızca bu güvenlik kısıtlaması nedeniyle öyle görünür.

Metriklerinizin daha doğru olması için mümkün olduğunda her zaman Timing-Allow-Origin başlığını ayarlamanız önerilir.

Öğe düzeni ve boyut değişiklikleri nasıl ele alınır?

Yeni performans girişlerini hesaplama ve dağıtma işleminin performans yükü düşük tutmak için bir öğenin boyutunda veya konumunda yapılan değişiklikler yeni LCP adayları oluşturmaz. Yalnızca öğenin görüntü alanındaki ilk boyutu ve konumu dikkate alınır.

Bu, başlangıçta ekran dışında oluşturulan ve ardından ekranda geçiş yapılan resimlerin raporlanamayacağı anlamına gelir. Ayrıca, başlangıçta görüntü alanında oluşturulan ve daha sonra aşağı itilerek görüntü alanından çıkan öğeler, başlangıçtaki görüntü alanındaki boyutlarını bildirmeye devam eder.

Örnekler

Largest Contentful Paint'in birkaç popüler web sitesinde ne zaman gerçekleştiğine dair bazı örnekleri aşağıda bulabilirsiniz:

cnn.com&#39;dan alınan Largest Contentful Paint zaman çizelgesi
cnn.com'dan LCP zaman çizelgesi.
techcrunch.com&#39;dan alınan Largest Contentful Paint zaman çizelgesi
techcrunch.com'dan LCP zaman çizelgesi.

Yukarıdaki her iki zaman çizelgesinde de en büyük öğe, içerik yüklenirken değişir. İlk örnekte, DOM'a yeni içerik eklenir ve bu da en büyük öğenin ne olduğunu değiştirir. İkinci örnekte, düzen değişir ve daha önce en büyük olan içerik, görüntü alanından kaldırılır.

Geç yüklenen içerik genellikle sayfadaki içerikten daha büyük olsa da bu her zaman böyle değildir. Sonraki iki örnekte, sayfa tamamen yüklenmeden önce gerçekleşen LCP gösterilmektedir.

instagram.com&#39;dan alınan Largest Contentful Paint zaman çizelgesi
instagram.com'dan bir LCP zaman çizelgesi.
google.com&#39;dan alınan Largest Contentful Paint zaman çizelgesi
google.com'dan bir LCP zaman çizelgesi.

İlk örnekte, Instagram logosu nispeten erken yüklenir ve diğer içerikler kademeli olarak gösterilirken en büyük öğe olarak kalır. Google Arama sonuçları sayfası örneğinde en büyük öğe, resimlerden veya logodan herhangi biri yüklenmeden önce görüntülenen bir metin paragrafıdır. Tek tek resimlerin tamamı bu paragraftan daha küçük olduğu için yükleme süreci boyunca en büyük öğe olmaya devam eder.

LCP'yi ölçme

LCP, laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda kullanılabilir:

Saha araçları

Laboratuvar araçları

JavaScript'de LCP'yi ölçme

JavaScript'te LCP'yi ölçmek için Largest Contentful Paint API'yi kullanabilirsiniz. Aşağıdaki örnekte, largest-contentful-paint girişlerini işleyen ve bunları konsola kaydeden bir PerformanceObserver özelliğinin nasıl oluşturulacağı gösterilmektedir.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Yukarıdaki örnekte, günlüğe kaydedilen her largest-contentful-paint girişi mevcut LCP adayını temsil eder. Genel olarak, yayınlanan son girişin startTime değeri LCP değeridir ancak bu her zaman geçerli değildir. largest-contentful-paint girişlerinin tümü LCP'yi ölçmek için geçerli değildir.

Aşağıdaki bölümde, API'nin raporladığı değerler ile metriğin nasıl hesaplandığı arasındaki farklar listelenmiştir.

Metrik ile API arasındaki farklar

  • API, arka plan sekmesinde yüklenen sayfalar için largest-contentful-paint giriş gönderir ancak LCP hesaplanırken bu sayfalar yoksayılmalıdır.
  • API, bir sayfa arka plana alındıktan sonra largest-contentful-paint girişleri göndermeye devam eder ancak bu girişler LCP hesaplanırken yoksayılmalıdır (öğeler yalnızca sayfa tüm süre boyunca ön plandaysa dikkate alınabilir).
  • API, sayfa geri/ileri önbellekten geri yüklendiğinde largest-contentful-paint girişlerini bildirmez ancak kullanıcılar bunları farklı sayfa ziyaretleri olarak deneyimlediğinden bu durumlarda LCP ölçülmelidir.
  • API, iframe'lerin içindeki öğeleri dikkate almaz. Ancak metrik, sayfanın kullanıcı deneyiminin bir parçası olduğu için dikkate alır. Bir iframe içinde LCP'nin bulunduğu sayfalarda (ör. yerleştirilmiş bir videodaki poster resmi), bu durum CrUX ile RUM arasında bir fark olarak gösterilir. LCP'yi doğru şekilde ölçmek için bunları göz önünde bulundurmanız gerekir. Alt çerçeveler, toplama için largest-contentful-paint girişlerini ebeveyn çerçeveye bildirmek üzere API'yi kullanabilir.
  • API, gezinme başlangıcından itibaren LCP'yi ölçer ancak önceden oluşturulmuş sayfalarda LCP, kullanıcının deneyimlediği LCP süresine karşılık geldiği için activationStart tarihinden itibaren ölçülmelidir.

Geliştiriciler, tüm bu ince farklılıkları ezberlemek yerine LCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir. Bu kitaplık, bu farklılıkları sizin için yönetir (mümkün olduğunda; iframe sorununun bu kapsamda yer almadığını unutmayın):

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

JavaScript'te LCP'nin nasıl ölçüleceğine dair eksiksiz bir örnek için onLCP() kaynak koduna bakın.

En büyük öğe en önemli öğe değilse ne olur?

Bazı durumlarda sayfadaki en önemli öğe (veya öğeler) en büyük öğeyle aynı olmaz ve geliştiriciler bunun yerine bu diğer öğelerin oluşturma sürelerini ölçmek isteyebilirler. Özel metrikler ile ilgili makalede açıklandığı gibi bunu Element Timing API kullanarak yapabilirsiniz.

LCP'yi iyileştirme

Sahadaki LCP zamanlamalarını tanımlama ve bunları ayrıntılı inceleyip optimize etmek için laboratuvar verilerini kullanma sürecinde size yol gösterecek eksiksiz bir LCP'yi optimize etme kılavuzu mevcuttur.

Ek kaynaklar

Değişiklik günlüğü

Hatalar bazen metrikleri ölçmek için kullanılan API'lerde ve bazen metriklerin tanımlarında keşfedilir. Sonuç olarak, bazen değişikliklerin yapılması gerekir. Bu değişiklikler, dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya regresyonlar olarak görünebilir.

Bu metrikleri yönetmenize yardımcı olmak amacıyla, söz konusu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilecektir.

Bu metrikler hakkında geri bildiriminiz varsa web-vitals-feedback Google grubunda paylaşabilirsiniz.