Geçmişte, 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ükleriyle uyuşmadığından 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 boyama işleminden sonra daha iyi bir yükleme deneyimi elde etmenize yardımcı olması için İlk Anlamlı Boyama (FMP) ve Hız İndeksi (SI) (ikisi de Lighthouse'ta mevcuttur) gibi performans metrikleri önermiştik ancak bu metrikler karmaşıktır, açıklanması zordur ve genellikle yanlıştır. Yani sayfanın ana içeriği yüklendiğinde hâlâ tanımlanmaz.
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ünen en büyük resim veya metin bloğunun oluşturma süresini bildirir.
İyi LCP puanı nedir?
İyi bir kullanıcı deneyimi sağlamak için siteler 2, 5 saniye veya daha kısa Largest Contentful Paint kullanmaya çalışmalıdır. 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.
Hangi öğeler dikkate alınır?
Şu anda Largest Contentful Paint API, öğelerin türlerini Largest Contentful Paint için düşünülen özellikler şunlardır:
<img>öğeleri (ilk kare sunum süresi, GIF veya animasyonlu PNG gibi animasyonlu içerikler için kullanılır)- Bir
<svg>öğesinin içinde<image>öğeleri <video>öğeleri (hangisi önceyse, videolar için poster resmi yükleme süresi veya ilk kare sunu süresi 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 öğ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 yeni öğeler (ör. tam <svg> desteği) eklenebilir.
LCP ölçümleri, yalnızca bazı öğeleri göz önünde bulundurmanın yanı sıra kullanıcıların "uygunsuz" olarak görme olasılığı yüksek belirli öğeleri hariç tutmak için buluşsal 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 ikisinde de "contentful" parametresi kullanılmasına rağmen Bu metriklerin amacı farklıdır. 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 bildirilen öğenin boyutu, genellikle görüntü alanında kullanıcının görebildiği boyuttur. Öğe, görüntü alanının dışına çıkı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.
Gerçek boyutundan yeniden boyutlandırılan resim öğeleri için raporlanan boyut, görünür boyut veya gerçek boyuttur (hangisi daha küçükse).
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ını, 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ı, bu değişiklik potansiyelini işlemek için largest-contentful-paint türünde bir PerformanceEntry gönderir. Tarayıcı ilk kareyi boyadığı anda en büyük zengin içerikli öğeyi tanımlar. Ancak sonraki kareler oluşturulduktan sonra en büyük zengin içerikli öğe 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 yalnızca 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 resmin yüklenmesi bittikten sonra ikinci bir largest-contentful-paint girişi gönderilir ve bunun element özelliği <img> öğesine başvurur.
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, daha küçük bir öğe en büyük zengin içerikli öğe olarak raporlanabilir, ancak daha büyük öğ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 bir sayfa DOM'ye yeni öğeler ekleyebilir. Bu yeni öğelerden herhangi biri önceki en büyük zengin içerikli öğeden daha büyükse yeni bir PerformanceEntry de bildirilir.
En büyük zengin içerikli öğe görüntü alanından, hatta DOM'den 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ı tarafından görülebilen öğeleri değiştirdiğinden (özellikle kaydırma işleminde geçerli olan), kullanıcı sayfayla etkileşime girer girmez (dokunma, kaydırma veya tuşa basma yoluyla) yeni girişler raporlamayı 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, web API'leri tarafından LCP'nin FCP'den önce raporlandığı, imkânsız gibi görünebilecek 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 boyutu değişiklikleri nasıl işlenir?
Yeni performans girişlerini hesaplama ve göndermenin performans 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, başlangıçta ekran dışında oluşturulan ve ardından ekranda geçiş yapılan resimlerin raporlanamayacağı anlamına gelir. Bu, başlangıçta görüntü alanında oluşturulan ve daha sonra aşağı itilen ve görünümün dışına itilen öğelerin, ilk görüntü alanı boyutlarını raporlamaya devam edeceği anlamına da gelir.
Örnekler
Largest Contentful Paint'in birkaç popüler web sitesinde ne zaman gerçekleştiğine dair bazı örnekleri aşağıda bulabilirsiniz:
Yukarıdaki her iki zaman çizelgesinde de en büyük öğe, içerik yüklenirken değişir. İlk örnekte, DOM'ye yeni içerik eklenmiştir ve bu, hangi öğenin en büyük 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çeriğin, sayfada halihazırda bulunan içerikten daha büyük olması genellikle pek geçerli değildir. Sonraki iki örnekte, sayfa tamamen yüklenmeden önce gerçekleşen LCP gösterilmektedir.
İlk örnekte Instagram logosu nispeten erken yüklendi ve diğer içerikler aşamalı olarak gösterilmesine rağmen en büyük öğe olarak kalmaya devam ediyor. Google Arama sonuçları sayfası örneğinde en büyük öğe, resimlerin veya logonun yüklenmesi tamamlanmadan önce görüntülenen 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:
Alan araçları
- Chrome Kullanıcı Deneyimi Raporu
- PageSpeed Insights
- Search Console (Core Web Vitals 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 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 olmayabilir. LCP'yi ölçmek için her largest-contentful-paint giriş geçerli değil.
Aşağıdaki bölümde, API'nin raporladıkları ile metriğin hesaplanma şekli arasındaki farklar listelenmiştir.
Metrik ile API arasındaki farklar
- API, arka plan sekmesinde yüklenen sayfalar için
largest-contentful-paintgiriş 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 göndermeye devam eder ancak LCP hesaplanırken bu girişler göz ardı edilmelidir (öğeler yalnızca sayfa sürekli olarak ön plandaysa dikkate alınabilir). - Sayfa geri-ileri önbellekten geri yüklendiğinde API,
largest-contentful-paintgirişlerini raporlamaz. Ancak bu durumlarda, kullanıcılar bunları ayrı sayfa ziyaretleri olarak deneyimlediği için 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. iFrame içinde LCP bulunan sayfalarda (ör. yerleştirilmiş bir videodaki poster resmi) bu durum CrUX ve RUM arasında bir fark olarak gösterilir. LCP'yi doğru ölçmek için bunları göz önünde bulundurmalısınız. Alt çerçeveler API'yi kullanarak
largest-contentful-paintgirişlerini toplama için üst çerçeveye bildirebilir. - 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
activationStarttarihinden itibaren ölçülmelidir.
Geliştiriciler, tüm bu ince farkları ezberlemek yerine, bu farklılıkları sizin için ele alan LCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir (mümkün olduğunda iframe sorununun ele alınmadığı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
- Annie Sullivan'ın performance.now() (2019) sayfasında Chrome'da performans izlemeden öğrendiği dersler
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 metriklerle ilgili geri bildirimlerinizi web-vitals-feedback Google grubunda paylaşabilirsiniz.