Largest Contentful Paint (LCP), algılanan yükleme hızını ölçmek için kullanılan kararlı bir Core Web Vital metriğidir. Sayfa yükleme zaman çizelgesinde, sayfanın ana içeriğinin yüklenebileceği noktayı işaretler. Hızlı bir LCP, kullanıcıyı sayfanın yararlı olduğuna ikna etmenize yardımcı olur.
Geçmişte, web geliştiricilerinin bir web sayfasındaki ana içeriğin ne kadar hızlı yüklendiğini ve kullanıcılar tarafından görülebildiğini ölçmek zordu. load veya DOMContentLoaded gibi eski metrikler, kullanıcının ekranında gördükleriyle uyuşmayabileceğinden iyi çalışmaz. İlk Zengin İçerikli Boyama (FCP) gibi daha yeni, kullanıcı merkezli performans metrikleri yalnızca yükleme deneyiminin en başlangıcını yakalar. Bir sayfada başlangıç ekranı veya yükleme göstergesi görüntüleniyorsa bu an, kullanıcıyla pek alakalı değildir.
Geçmişte, ilk boyama işleminden sonra yükleme deneyimini daha iyi yakalamanıza yardımcı olması için İlk Anlamlı Boyama (FMP) ve Hız İndeksi (SI) (her ikisi de Lighthouse'da bulunur) gibi performans metrikleri öneriyorduk ancak bu metrikler karmaşıktır, açıklanması zordur ve genellikle yanlıştır. Diğer bir deyişle, sayfanın ana içeriğinin ne zaman yüklendiğini hâlâ ayırt etmezler.
W3C Web Performansı Çalışma Grubu'ndaki tartışmalara ve Google'da yapılan araştırmalara dayanarak, bir sayfanın ana içeriğinin ne zaman yüklendiğini ölçmenin daha doğru bir 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ünür olan en büyük resim veya metin bloğunun oluşturma süresini bildirir.
İyi bir LCP puanı nedir?
İyi bir kullanıcı deneyimi sağlamak için sitelerde LCP'nin 2, 5 saniye veya daha kısa olması gerekir. Kullanıcılarınızın çoğu için bu hedefe ulaştığınızdan emin olmak amacıyla, mobil ve masaüstü cihazlar genelinde segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimi, ölçmek için iyi bir eşiktir.
Hangi öğeler dikkate alınır?
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>öğesi içinde<image>öğeleri<video>öğeleri (videolar için poster resmi yükleme süresi veya ilk kare sunum süresi (hangisi önceyse) kullanılır)url()işlevi kullanılarak yüklenen, arka plan resmine sahip bir öğe (CSS gradyanı yerine)- Metin düğümleri veya diğer satır içi metin öğesi alt öğeleri içeren blok düzeyindeki öğeler.
Öğelerin bu sınırlı grupla sınırlandırılması karmaşıklığı azaltmak için yapılmıştır.
İleride daha fazla araştırma yapıldıkça daha fazla öğe (tam <svg> desteği gibi) eklenebilir.
LCP ölçümlerinde yalnızca bazı unsurları dikkate almanın yanı sıra, kullanıcıların "içerik içermeyen" olarak görebilecekleri belirli öğeleri hariç tutmak için bulgusal yöntemler kullanılır. Chromium tabanlı tarayıcılar için bunlar aşağıdakileri içerir:
- Opaklığı 0 olan ve kullanıcı tarafından görülmeyen öğeler.
- Arka plan öğeleri olması muhtemel, tam görüntü alanını kaplayan öğeler.
- Muhtemelen sayfanın gerçek içeriğini yansıtmayan, entropisi düşük olan yer tutucu resimler veya diğer resimler.
Tarayıcılar, en büyük contentful öğesinin ne olduğuna dair kullanıcı beklentilerini karşılamamızı sağlamak için muhtemelen bu buluşsal yöntemleri geliştirmeye devam edecektir.
Bu "içerik barındıran" buluşsal yöntemler, FCP tarafından kullanılanlardan farklıdır. FCP adayı olmaya uygun olmasalar bile bu öğelerden bazılarını (ör. yer tutucu resimler veya tam görüntü alanı resimleri) dikkate alabilir. Her ikisi de adlarında "kapsamlı" kelimesini kullansalar da, bu metriklerin amacı farklıdır. FCP, herhangi bir içeriğin ekrana, LCP ise ana içeriğin ne zaman boyandığını ölçer.
Bir öğenin boyutu nasıl belirlenir?
LCP için bildirilen öğenin boyutu, genellikle görüntü alanında kullanıcıya görünür olan boyuttur. Öğe görüntü alanının dışına uzarsa veya herhangi bir öğe kırpılmışsa ya da görünmeyen overflow içeriyorsa bu bölümler öğenin boyutuna dahil edilmez.
Doğal boyutlarından yeniden boyutlandırılan resim öğeleri için raporlanan boyut, görünür boyut veya içsel boyuttur (hangisi daha küçükse).
LCP, metin öğeleri için yalnızca tüm metin düğümlerini içerebilecek en küçük dikdörtgeni dikkate alır.
LCP, tüm öğeler için CSS kullanılarak uygulanan kenar boşluklarını, dolguları veya kenarlıkları dikkate almaz.
LCP ne zaman raporlanır?
Web sayfaları genellikle aşamalı olarak yüklenir. Bu nedenle, sayfanın en büyük öğesi yükleme sırasında değişebilir.
Bu potansiyeli değerlendirmek için tarayıcı, ilk kareyi boyadığı anda en büyük zengin içerikli öğeyi tanımlayan largest-contentful-paint türünde bir PerformanceEntry gönderir. Sonraki kareleri oluşturduktan sonra, en büyük zengin içerikli öğe her değiştiğinde başka bir PerformanceEntry gönderir.
Örneğin, metin ve bir hero resim içeren bir sayfada, tarayıcı başlangıçta yalnızca metni oluşturabilir ve tarayıcı, element özelliği bir <p> veya <h1> değerine referansta bulunan bir largest-contentful-paint girişi gönderir. Lokomotif resmin yüklenmesi bittikten sonra, <img> referansını referans alan element özelliğiyle ikinci bir largest-contentful-paint girişi gönderilir.
Bir öğe, yalnızca oluşturulduktan ve kullanıcı tarafından görülebilir hale geldikten sonra en büyük zengin içerikli öğe olarak kabul edilebilir. Henüz yüklenmemiş resimler
"oluşturuldu" olarak kabul edilmez. Yazı tipi bloku dönemi boyunca metin düğümleri de web yazı tiplerini kullanmaz.
Böyle durumlarda, daha küçük bir öğe en büyük zengin içerikli öğe olarak raporlanabilir ancak daha büyük olan öğenin oluşturulması biter bitmez başka bir PerformanceEntry oluşturulur.
Geç yüklenen resimlere ve yazı tiplerine ek olarak, yeni içerik kullanıma sunuldukça sayfa DOM'ye yeni öğeler ekleyebilir. Bu yeni öğelerin herhangi biri önceki en büyük zengin içerikli öğeden daha büyükse yeni bir PerformanceEntry oluşturulur.
En büyük zengin içerikli öğe görüntü alanından, 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örebildiği içeriği değiştirdiğinden (özellikle kaydırma sırasında) tarayıcı, kullanıcı sayfayla etkileşimde bulunur bulunmaz (dokunma, kaydırma veya tuşa basarak) yeni girişleri bildirmeyi durdurur.
Analiz amacıyla, analiz hizmetinize yalnızca en son gönderilen PerformanceEntry bilgisini rapor edin.
Yükleme süresi ve oluşturma süresinin karşılaştırması
Güvenlik nedeniyle, Timing-Allow-Origin başlığı olmayan çapraz kaynak resimlerde görüntülerin oluşturma zaman damgası gösterilmez. Bunun yerine, yalnızca diğer API'lerin kullanıma sunduğu yükleme süreleri kullanılabilir.
Bu durum, web API'leri tarafından LCP'nin FCP'den daha erken raporlanması imkansız gibi görünür. Bunun nedeni sadece güvenlik kısıtlamasıdır ve gerçekte neler olduğunu göstermez.
Metriklerinizi daha doğru hale getirmek için mümkün olduğunda her zaman Timing-Allow-Origin üst bilgisini ayarlamanızı öneririz.
Öğe düzeni ve boyutu değişiklikleri nasıl işlenir?
Yeni performans girişlerini hesaplama ve gönderme performans ek yükünü düşük tutmak için bir öğenin boyutunda veya konumunda yapılan değişiklikler yeni LCP adayları oluşturmaz. Yalnızca öğenin başlangıç boyutu ve görüntü alanındaki konumu dikkate alınır.
Bu nedenle, başlangıçta ekran dışında oluşturulan ve ardından ekrana geçiş yapan resimler raporlanmayabilir. Ayrıca, başlangıçta görüntü alanında oluşturulan ve daha sonra görünüm dışına itilen öğelerin yine de ilk görüntü içi alan boyutunu rapor etmesi anlamına gelir.
Örnekler
Largest Contentful Paint'in birkaç popüler web sitesinde ne zaman gerçekleştiğine dair bazı örnekleri burada bulabilirsiniz:
Bu zaman çizelgelerinin her ikisinde de içerik yüklenirken en büyük öğe (yeşil renkle vurgulanmıştır) değişir. İlk örnekte, DOM'ye yeni içerik eklenerek en büyük öğe değiştirilmiştir. İkinci örnekte, düzen değişerek görüntü alanındaki önceki en büyük içerik öğesi kaldırılmaktadır.
Geç yüklenen içerik genellikle sayfada halihazırda bulunan içerikten daha büyük olsa da bu her zaman doğru değildir. Sonraki iki örnek, sayfa tamamen yüklenmeden önce gerçekleşen LCP'yi göstermektedir.
İlk örnekte Instagram logosu nispeten erken yükleniyor ve başka içerik eklense bile en büyük öğe olarak kalmaya devam ediyor. Google Arama sonuçları sayfası örneğinde en büyük öğe, herhangi bir resim veya logonun yüklenmesi tamamlanmadan önce görüntülenen bir metin paragrafıdır. Her bir resim bu paragraftan daha küçük olduğundan yükleme işlemi boyunca en büyük öğe olmaya devam eder.
LCP nasıl ölçülür?
LCP, laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda kullanılabilir:
Saha araçları
- Chrome Kullanıcı Deneyimi Raporu
- PageSpeed Insights
- Search Console (Önemli Web Verileri raporu)
web-vitalsJavaScript kitaplığı
Laboratuvar araçları
JavaScript'te LCP'yi ölçme
JavaScript'te LCP'yi ölçmek için Largest Contentful Paint API'yi kullanın.
Aşağıdaki örnekte, largest-contentful-paint girişlerini dinleyen ve bunları konsola kaydeden bir PerformanceObserver oluşturma işlemi 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});
Önceki ö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 tüm largest-contentful-paintgirişler LCP ölçümü için geçerli değildir.
Aşağıdaki bölümde, API'nin bildirdikleri ile metriğin hesaplanma şekli arasındaki farklar listelenmiştir.
Metrik ve API arasındaki farklar
- API, bir arka plan sekmesinde yüklenen sayfalar için
largest-contentful-paintgirişleri gönderir ancak LCP hesaplanırken bu sayfalar yoksayılmalıdır. - API, bir sayfa arka plana alındıktan sonra
largest-contentful-paintgirişlerini dağıtmaya devam eder ancak LCP hesaplanırken bu girişler yoksayılmalıdır. Öğeler, yalnızca sayfanın tüm süre boyunca ön planda olması durumunda dikkate alınabilir. - API, sayfa geri-ileri önbellekten geri yüklendiğinde
largest-contentful-paintgirişlerini raporlamaz ancak bu durumlarda LCP ölçülmelidir çünkü kullanıcılar bunları farklı sayfa ziyaretleri olarak görür. - API, iframe'lerin içindeki öğeleri dikkate almaz ancak metrik, sayfanın kullanıcı deneyiminin bir parçası oldukları için dikkate alır. Bu, iframe içinde LCP bulunan sayfalarda (örneğin, yerleştirilmiş bir videodaki poster resminde) CrUX ve RUM arasındaki bir fark olarak görünür.
LCP'yi doğru şekilde ölçmek için iframe'leri eklemeniz gerekir. Alt çerçeveler,
largest-contentful-paintgirişlerini toplama için üst çerçeveye bildirmek amacıyla API'yi kullanabilir. - API, gezinme başlangıcından itibaren LCP'yi ölçer. Önceden işlenmiş sayfalar için LCP'yi
activationStartüzerinden ölçün. Bu, kullanıcının deneyimlediği LCP süresine karşılık gelir.
Tüm bu ince farkları ezberlemek yerine, LCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanmalarını öneririz. Bu kitaplık, bu farklılıkların çoğunu sizin yerinize yönetir. (Bu, iFrame sorununu ele almaz.)
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 ilişkin tam bir örnek için onLCP() kaynak koduna bakın.
En büyük öğe en önemli değilse ne olur?
Bazı durumlarda, sayfadaki en önemli öğe (veya öğeler) en büyük öğeyle aynı değildir ve geliştiriciler bunun yerine bu diğer öğelerin oluşturma sürelerini ölçmek isteyebilir. Bu işlem, özel metrikler ile ilgili makalede açıklandığı gibi Element Timing API kullanılarak yapılabilir.
LCP'yi iyileştirme
Sahada LCP zamanlamalarını tanımlama ve laboratuvar verilerini kullanarak ayrıntılı inceleme ve optimize etme sürecinde size yol göstermek için LCP'yi optimize etme ile ilgili eksiksiz bir kılavuz mevcuttur.
Ek kaynaklar
- Annie Sullivan tarafından performance.now() başlıklı makalede (2019) Chrome'daki performans izlemeden alınan dersler
Değişiklik günlüğü
Bazı durumlarda, metrikleri ölçmek için kullanılan API'lerde veya bazen metriklerin tanımlarında hatalar keşfedilir. Bu nedenle, değişikliklerin bazen yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirme veya regresyon olarak gösterilebilir.
Bunu yönetmenize yardımcı olmak için, 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österilmiştir.
Bu metriklerle ilgili geri bildiriminiz varsa web-önemli geri bildirim Google grubunda geri bildiriminizi paylaşın.