Detaylı tanım
Core Web Vitals'ın en önemli metriği. Sayfanın ekranda görünen en büyük içerik öğesinin (genelde hero görseli, video poster veya h1) ne zaman tamamen yüklendiğini ölçer. LCP'yi iyileştirmek için: görselleri sıkıştırma (WebP/AVIF), preload kullanma, CDN, sunucu yanıt süresini azaltma, kritik CSS inline, lazy loading.
LCP (Largest Contentful Paint) nasıl çalışır?
LCP, tarayıcının PerformanceObserver arayüzü üzerinden bildirdiği bir ölçümdür. Tarayıcı sayfa yüklenirken görüntü alanındaki en büyük içerik öğesini sürekli yeniden hesaplar; her yeni ve daha büyük öğe boyandığında bir aday kaydı üretir. Kullanıcı ilk kez tıkladığında veya kaydırdığında ölçüm durur, son aday nihai LCP değeri olur. Aday olabilecek öğeler sınırlıdır: img etiketleri, svg içindeki image, video poster kareleri, url() ile verilmiş arka plan görselleri ve blok düzeyindeki metin düğümleri. Bu yüzden LCP öğesi masaüstünde hero görseli, mobilde başlık metni olabilir ve ikisi ayrı ölçülür. Google'ın sıralama tarafında kullandığı değer laboratuvar testi değil, gerçek ziyaretlerden derlenen alan verisidir: son 28 günün 75. persentili.
Sorunu çözmek için LCP'yi dört parçaya ayırmak gerekir: sunucunun ilk baytı gönderme süresi, kaynağın keşfedilmesine kadar geçen gecikme, kaynağın indirilme süresi ve öğenin ekrana boyanma gecikmesi. Hangi parçanın baskın olduğu bilinmeden yapılan iyileştirme çoğu zaman boşa gider. İlk bayt süresi baskınsa çözüm barındırma, önbellek ve veritabanı tarafındadır; orada görsel sıkıştırmak işe yaramaz. Keşif gecikmesi baskınsa görsel muhtemelen CSS arka planından ya da JavaScript ile sonradan ekleniyordur; hero görselini HTML içine almak, preload vermek ve yüksek getirme önceliği tanımlamak gerekir. İndirme süresi baskınsa format, boyut ve responsive görsel kümesi devreye girer. Boyama gecikmesi baskınsa engelleyen CSS, yazı tipi yükleme davranışı ve istemci tarafı render incelenir.
Pratikte LCP iki işe yarar. Birincisi, sayfa deneyimi sinyalleri içinde ölçülebilir tek yükleme metriği olduğu için Search Console'da URL grupları bazında raporlanır; kötü performans gösteren grup, aynı şablonu kullanan yüzlerce sayfayı işaret eder ve düzeltme tek tek sayfada değil şablon seviyesinde yapılır. İkincisi, kullanıcının sayfa açıldı hissine en yakın metrik olduğu için reklam açılış sayfalarında dönüşüm oranıyla birlikte izlenir. Laboratuvar aracı ile alan verisi arasındaki fark normaldir: Lighthouse tek bir cihazda, sabit ağ koşullarında ve genelde önbelleksiz ölçer; alan verisi ise eski telefonları, zayıf şebekeleri, çerez bildirimlerini ve üçüncü taraf scriptlerini içeren gerçek koşulları yansıtır.
Hangi terimlerle karıştırılıyor?
| Karıştırılan terim | Aradaki fark |
|---|---|
| FCP (First Contentful Paint) | FCP ekrana çizilen ilk herhangi bir içeriği ölçer, bir yükleniyor yazısı bile sayılır. LCP ise ana içerik bloğunu ölçtüğü için kullanıcının gerçek bekleme hissine daha yakındır. |
| INP (Interaction to Next Paint) | LCP yükleme hızını, INP etkileşim sonrası yanıt hızını ölçer. Kök nedenleri farklıdır: LCP çoğunlukla ağ ve sunucu, INP ise ana iş parçacığını meşgul eden JavaScript kaynaklıdır. |
| CLS (Cumulative Layout Shift) | CLS hız değil kararlılık ölçer; sayfa yüklenirken içeriğin kayıp kaymadığına bakar. Hızlı ama zıplayan bir sayfa iyi LCP ile kötü CLS verebilir. |
| TTFB (Time to First Byte) | TTFB, LCP'nin ilk bileşenidir ve ona bir alt sınır koyar. LCP hiçbir zaman TTFB'den küçük olamaz; bu yüzden TTFB yüksekken yapılan ön uç iyileştirmeleri sınırlı fayda verir. |
Sık yapılan hatalar
Lighthouse yeşil olunca iş bitti sanmak
Lighthouse sabit koşullarda çalışan bir laboratuvar simülasyonudur; sıralamada kullanılan değer ise gerçek kullanıcı ziyaretlerinden derlenen alan verisinin 75. persentilidir. Yeşil skor alan bir sayfa, eski Android cihazlarda ve zayıf şebekede eşiği rahatlıkla aşabilir. Karar her zaman alan verisine bakılarak verilmelidir.
Hero görseline lazy loading uygulamak
Tüm görsellere toplu biçimde gecikmeli yükleme eklenince, ilk ekranda görünen ana görsel de bu listeye girer. Tarayıcı onu geç keşfeder, indirme geç başlar ve LCP doğrudan büyür. Ekranın üst kısmındaki görsel gecikmeli yükleme dışında tutulmalı, mümkünse ayrıca yüksek öncelikle işaretlenmelidir.
Yanlış öğeyi optimize etmek
LCP öğesi cihaz genişliğine göre değişir; masaüstünde slider görseli, mobilde başlık metni olabilir. Hangi öğenin ölçüldüğü doğrulanmadan yapılan sıkıştırma çalışması metriği hiç değiştirmez. Öğe, tarayıcı geliştirici araçlarındaki performans kaydından mobil ve masaüstü için ayrı ayrı belirlenmelidir.
Sunucu yanıt süresini görmezden gelmek
Görsel kaç kilobayt olursa olsun, ilk bayt süresi iki saniyeyi buluyorsa iyi eşiğine ulaşmak matematiksel olarak mümkün değildir. Bu durumda öncelik önbellekleme, veritabanı sorguları, sunucu konumu ve dinamik render maliyetidir; görsel çalışması ancak ondan sonra anlam kazanır.
LCP (Largest Contentful Paint) ne zaman kritik hâle gelir?
Mobil trafiği ağırlıklı e-ticaret kategori ve ürün sayfalarında, ücretli reklam açılış sayfalarında ve site yenileme sonrasında kritik hale gelir. Reklam tarafında yavaş açılan sayfa hem tıklama kaybı hem açılış sayfası deneyimi puanı üzerinden maliyet artışı üretir. Yeni tema veya altyapı geçişinden sonra ise LCP, görünmeyen bir performans gerilemesini erken yakalayan ilk göstergedir.
Örnekler
- Hero'da 2MB JPEG yerine 200KB WebP kullanarak LCP'yi 4s'den 2s'ye indirebilirsiniz.