En Büyük İçerikli Boya (LCP): Tam Teknik Kılavuz ve Optimizasyon Standardı

En Büyük İçerikli Boya (LCP), Google'ın algılanan sayfa yükleme hızını ölçmek için oluşturulan üç Temel Web Verileri ölçümünden biridir.LCP, kullanıcının bir web sayfasını yüklemeye başlamasından, ilk görünür görünüm portundaki en büyük resim, video poster çerçevesi veya metin bloğunun ekranda tamamen boyanmasına kadar geçen süreyi izler.

Kullanıcılar web sayfası hızını ana içeriğin ne kadar hızlı görünür ve okunabilir hale geldiğine göre değerlendirdiğinden, LCP yaygın olarak en önemli yükleme performansı ölçütü olarak kabul edilir.Sonuç olarak Google, LCP'yi organik arama için resmi sayfa deneyimi sıralama sinyallerine dahil eder.

Cevap-İlk Özet

En Büyük İçerikli Boya (LCP), görünüm alanındaki en büyük görünür metin bloğu veya görüntü öğesinin oluşturulması tamamlandığında zamanlamaya göre algılanan sayfa yükleme hızını ölçen bir Core Web Vital ölçümüdür.Gerçek kullanıcı alanı verilerindeki (CrUX) sayfa ziyaretlerinin en az %75'i için geçer LCP puanı 2,5 saniye veya daha azdır.LCP gecikmesi dört farklı alt bölümden oluşur: İlk Bayta Kadar Geçen Süre (TTFB), Kaynak Yükleme Gecikmesi, Kaynak Yükleme Süresi ve Öğe İşleme Gecikmesi.LCP'yi optimize etmek, kahraman varlıklarının önceden yüklenmesini, uç önbelleğe almanın dağıtılmasını, görüntülerin WebP/AVIF formatlarına sıkıştırılmasını ve oluşturmayı engelleyen CSS ve JavaScript'in ortadan kaldırılmasını gerektirir.

LCP Puanı Derecelendirme Ölçeği ve Önemli Web Verileri Eşikleri

Kullanıcılara hızlı ve ilgi çekici bir deneyim sağlamak amacıyla web sayfalarının, Google'ın En Büyük İçerikli Boya için belirlenen Temel Web Verileri eşiklerini karşılaması gerekir:

LCP İşleme Süresi	Performans Değerlendirmesi	Kullanıcı Etkisi ve Google Arama Sıralaması Sinyali
$\le 2,5\text{ saniye}$	İyi (Yeşil)	Hızlı algılanan yükleme;Google'ın Önemli Web Verileri değerlendirmesini tamamen karşılıyor.
$> 2.5\text {s} $ ve $\le 4.0\text {s} $	İyileştirme Gerekiyor (Sarı)	Dikkat çekici yükleme gecikmesi;mobil dönüşüm oranlarında ve arama sıralamasında potansiyel düşüş.
$> 4,0\text{ saniye}$	Zayıf (Kırmızı)	Ciddi görsel yükleme gecikmesi;yüksek kullanıcı hemen çıkma oranları ve arama sıralaması cezası.

Önemli Web Verileri değerlendirmesinde geçer not almak için bir web sitesinin, gerçek dünya saha verilerindeki masaüstü ve mobil cihaz gruplarında değerlendirilen sayfa ziyaretlerinin en az %75'i için İyi kategorisinde bir LCP puanı ($\le 2,5\text{ saniye}$) alması gerekir.

Hangi DOM Öğeleri LCP Değerlendirmesine Uygundur?

Resmi W3C Largest Contentful Paint spesifikasyonuna göre tarayıcı, ilk görünüm portunda bulunan belirli görünür DOM öğelerini izler:

Standart <img> öğeleri (duyarlı <picture> etiketleri içinde oluşturulan resimler dahil).
<svg> vektör kapsayıcısının içine gömülü <image> öğeleri.
Video poster resimleri (<video> öğesindeki poster özelliği).
url() işlevi aracılığıyla yüklenen CSS arka plan görüntüsüne sahip öğeler.
Metin düğümleri veya satır içi metin öğesi alt öğelerini içeren blok düzeyinde HTML kapsayıcıları (örneğin, <h1> ila <h6> başlıkları, <p> paragrafları veya <div> blokları).

LCP'nin Yapısızlaştırılması: Dört Alt Bölüm

Performans mühendisleri, yavaş En Büyük İçerikli Boya puanlarını etkili bir şekilde teşhis etmek ve optimize etmek için LCP gecikmesini dört farklı alt bölüme ayırır:

İlk Bayta Kadar Geçen Süre (TTFB): Kullanıcının sayfayı talep etmesinden tarayıcının sunucudan HTML belgesi yanıtının ilk baytını almasına kadar geçen süre.Hedef: $< 800\text {ms} $ (LCP bütçesinin 40$%$'ı).
Kaynak Yükleme Gecikmesi: HTML belgesinin yanıt baytlarını almayı tamamlaması ile tarayıcının LCP kaynağını (kahraman görüntü gibi) keşfedip almaya başlaması arasındaki gecikme.Hedef: $< 200\text {ms} $ (LCP bütçesinin 10$%$'ı).
Kaynak Yükleme Süresi: Tarayıcının ağ üzerinden LCP görüntüsünü veya yazı tipi varlığını indirmesi için gereken süre.Hedef: $< 800\text {ms} $ (LCP bütçesinin 40$%$'ı).
Öğe Oluşturma Gecikmesi: LCP kaynağının indirmeyi bitirmesi ile tarayıcının düzen hesaplamalarını tamamlayıp öğeyi ekrana boyaması arasındaki süre.Hedef: $< 200\text {ms} $ (LCP bütçesinin 10$%$'ı).

Matematiksel olarak toplam LCP gecikmesi şu dört alt bölümün toplamıdır:

$$\text {LCP} = \text {TTFB} + \text{Kaynak Yükleme Gecikmesi} + \text{Kaynak Yükleme Süresi} + \text{Öğe Oluşturma Gecikmesi}$$

LCP'yi Optimize Etmek İçin Kanıtlanmış Teknikler

Kaynak Yükleme Gecikmesini Ortadan Kaldırın: Tarayıcının HTML ayrıştırma sırasında görüntü indirmeyi hemen başlatması için kahraman resim etiketinize <link rel="preload" as="image" href="..."> veya fetchpriority="high" ekleyin.
Sunucu Yanıtını Optimize Etme (TTFB): CDN yoluyla uç önbelleğe almayı dağıtın, veritabanı sorgu performansını optimize edin ve HTTP/2 veya HTTP/3 sunucu push çoğullamadan yararlanın.
Resimleri Sıkıştırın ve Modernleştirin: Mobil ve masaüstü ekran boyutlarına göre uyarlanmış duyarlı srcset boyutlarıyla modern WebP veya AVIF formatlarını kullanarak kahraman görselleri sunun.
İşlemeyi Engelleyen Kaynakları Azaltın: Kritik CSS'yi <head> etiketine satır içi olarak ekleyin ve defer veya async komut dosyası özelliklerini kullanarak kritik olmayan JavaScript'i erteleyin.
Web Yazı Tipi Yüklemesini Optimize Edin: Web yazı tipleri ağ üzerinden indirilmeyi bitirirken metin bloklarının hemen görünür kalmasını sağlamak için CSS @font-face kurallarında font-display: swap veya font-display: optional kullanın.

LCP ve First Contentful Paint (FCP) ile Hız Endeksi karşılaştırması

LCP, FCP ve Hız Endeksi'nin tümü yükleme performansını ölçerken, sayfa yükleme ilerlemesinin farklı yönlerini de yakalar:

İlk İçerikli Boya (FCP): İlk DOM öğesinin (arka plan rengi, döndürücü veya başlık metni gibi) ekranda görüntülenmesinin ne zaman bittiğini ölçer.
En Büyük İçerikli Boya (LCP): Birincil görsel içerik öğesinin (kahraman banner'ı veya ana paragraf bloğu) oluşturmayı ne zaman tamamladığını ölçer.
Hız Endeksi: Görsel ilerleme kaydı sırasında görsel içeriğin zaman içinde görüntü alanını ne kadar hızlı doldurduğunu ölçer.

Google'ın Lighthouse puanlama algoritmasında yükleme metrikleri arasında en yüksek ağırlık LCP'ye verilmektedir (şu anda toplam performans puanının %25'i), çünkü gerçek kullanıcının sayfa yükleme tamamlama algısına en yakın şekilde uyum sağlar.

SimpleOps ile Sürekli LCP İzleme

SimpleOps, sentetik Lighthouse laboratuvar denetimlerini ve Chrome UX Raporu (CrUX) alan veri kümesi ölçümlerini tek bir birleşik izleme panosunda toplayarak En Büyük İçerikli Paint izlemeyi otomatikleştirir.SimpleOps, sitenizin yüzde 75'lik LCP'si 2,5 saniyelik performans bütçenizi aştığında anında proaktif uyarılar göndererek ekibinize dönüşümleri ve arama sıralamalarını koruma gücü verir.