Largest Contentful Paint (LCP)

Geçmişte, web geliştiricileri için 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 uyumlu olmayabilir. İ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ı zor ve genellikle yanlıştır. Diğer bir deyişle, sayfanın ana içeriğinin ne zaman yüklendiğini yine de 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 gitme zamanına bağlı olarak, görüntü alanındaki en büyük resim veya metin bloğunun oluşturulma süresini bildirir.

İyi bir 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ğu için bu hedefe ulaştığınızdan emin olmak amacıyla, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimi iyi bir ölçüm eşiğidir.

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> öğ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ı kümeyle sınırlandırılmasının, başlangıçta işleri basitleştirmek amacıyla bilinçli olarak yapıldığını unutmayın. Gelecekte 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örme olasılıklarının yüksek olduğu 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
• Büyük olasılıkla içerik yerine arka plan olarak kabul edilen, görüntü alanının tamamını kaplayan öğeler
• Sayfanın gerçek içeriğini yansıtmayabilecek yer tutucu resimler veya entropi düşük olan diğer resimler

Tarayıcılar, en büyük içerikli öğenin ne olduğuyla ilgili kullanıcı beklentilerini karşılamamızı sağlamak için büyük olasılıkla bu buluşsal yöntemleri geliştirmeye devam edecektir.

Bu "içerikli" buluşsal yöntemler, İlk Zengin İçerikli Boyama (FCP) tarafından kullanılanlardan farklı olabilir. LCP adayı olmaya uygun olmasalar bile bu öğeler, yer tutucu resimler veya tam görüntü alanı resimleri gibi öğeleri dikkate alabilir. Her ikisi de adlarında "içerikli" sözcüğünü kullansalar da bu metriklerin amacı farklıdır. FCP, herhangi bir içeriğin ekrana ve ana içerik boyandığında LCP'ye boyandığını ölçer. Dolayısıyla 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 uzanırsa 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ında 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 ve bunun sonucunda sayfadaki en büyük öğenin değişmesi mümkündür.

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. Ancak 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 metni oluşturabilir. Bu noktada tarayıcı, element özelliği muhtemelen bir <p> veya <h1> öğesine başvuruda bulunacak bir largest-contentful-paint girişi gönderir. Daha sonra, hero resmin yüklenmesi tamamlandıktan sonra ikinci bir largest-contentful-paint girişi gönderilir ve element özelliği <img> değerine referansta bulunur.

Bir öğe, yalnızca oluşturulduktan ve kullanıcı tarafından görünür hale geldikten sonra en büyük zengin içerikli öğe olarak kabul edilebilir. Henüz yüklenmemiş resimler "oluşturulmuş" olarak kabul edilmez. Yazı tipi bloku dönemi boyunca metin düğümleri de 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 olan öğenin oluşturulması biter bitmez başka bir PerformanceEntry oluşturulur.

Geç yüklenen resimlere ve yazı tiplerine ek olarak bir sayfa, yeni içerik kullanıma sunuldukça 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 de bildirilir.

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 tarayıcı, kullanıcı sayfayla etkileşime girer girmez (dokunma, kaydırma veya tuşa basarak) yeni girişleri bildirmeyi durdurur (bu durum özellikle kaydırma için geçerlidir).

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

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

Güvenlik nedeniyle, Timing-Allow-Origin başlığı bulunmayan çapraz kaynak resimlerde resimlerin oluşturma zaman damgası gösterilmez. Bunun yerine, yalnızca yükleme süreleri gösterilir (çünkü bu süre diğer birçok web API'sinde zaten gösterilmiştir).

Bu durum, web API'leri tarafından LCP'nin FCP'den daha erken raporlanması imkansız gibi görünür. Böyle bir durum söz konusu değildir, yalnızca bu güvenlik kısıtlaması nedeniyle böyle görünür.

Mümkün olduğunda, metriklerinizin daha doğru olması için her zaman Timing-Allow-Origin üst bilgisini ayarlamanız önerilir.

Öğ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 görüntü alanındaki başlangıç boyutu ve 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 aşağı, görüntü alanının dışına itilen öğelerin görüntü içi ilk 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 burada bulabilirsiniz:

Yukarıdaki zaman çizelgelerinin her ikisinde de en büyük öğe içerik yüklenirken değişir. İlk örnekte, DOM'ye yeni içerik eklenmiştir ve hangi öğenin en büyük öğe olduğu değişecektir. İkinci örnekte, düzen değişiklikleri ve önceden en büyük olan içerik görüntü alanından kaldırılır.

Geç yüklenen içerik, genellikle sayfada bulunan içerikten daha büyüktür ancak bu her zaman doğru değildir. Sonraki iki örnekte, sayfa tamamen yüklenmeden önce gerçekleşen LCP değeri gösterilmektedir.

İlk örnekte, Instagram logosu nispeten erken yükleniyor ve diğer içerikler kademeli olarak gösterilse bile en büyük öğe olmaya 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. Tek tek resimlerin tümü bu paragraftan küçük olduğu için 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-vitals JavaScript kitaplığı

Laboratuvar araçları

• Chrome Geliştirici Araçları
• Lighthouse
• PageSpeed Insights
• WebPageTest

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 konsolda günlüğe kaydedilen bir PerformanceObserver'ın 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. LCP ölçümü için largest-contentful-paint girişlerinin tümü 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-paint girişlerini 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şlerini dağıtmaya devam eder ancak LCP hesaplanırken bu girişler yoksayılmalıdır (öğeler yalnızca sayfa tüm süre boyunca ön plandaysa dikkate alınabilir).
• Sayfa geri-ileri önbellekten geri yüklendiğinde API, largest-contentful-paint girişlerini raporlamaz ancak bu durumlarda kullanıcılar ayrı sayfa ziyaretleri olarak deneyimledikleri için LCP bu durumlarda ölçülmelidir.
• API, iframe'lerdeki öğeleri dikkate almaz, ancak sayfanın kullanıcı deneyiminin bir parçası oldukları için metrik dikkate alınır. iFrame içinde LCP bulunan sayfalarda (ör. yerleştirilmiş bir videodaki poster resmi) bu durum, CrUX ve RUM arasındaki fark olarak görünür. LCP'yi doğru şekilde ölçmek için bunları dikkate almanız gerekir. Alt çerçeveler, largest-contentful-paint girişlerini toplama için üst ç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 farkları ezberlemek yerine LCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir. LCP'yi ölçmek için bu farklılıkları kullanabilirsiniz (mümkünse 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 ilişkin eksiksiz 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şturulma sürelerini ölçme konusunda daha istekli olabilirler. Bu işlemi özel metrikler ile ilgili makalede açıklandığı gibi Öğe Zamanlaması API'si kullanarak yapabilirsiniz.

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österecek kapsamlı bir LCP'yi optimize etme kılavuzu 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üğü

Zaman zaman metrikleri ölçmek için kullanılan API'lerde, bazen de 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ştirmeler veya regresyonlar olarak gösterilebilir.

Bu durumu yönetmenize yardımcı olmak amacıyla, metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik günlüğünde gösterilir.

Bu metriklerle ilgili geri bildirimlerinizi web-önemli geri bildirim Google grubunda paylaşabilirsiniz.