Largest Contentful Paint (LCP), bir web sayfasının görünür alanında (viewport) yer alan en büyük içerik öğesinin ekranda tam olarak render edildiği anı ölçen bir performans metriğidir. Google’ın Core Web Vitals setinin parçası olan LCP, kullanıcının sayfanın “yüklendiğini” hissettiği anı temsil eder ve hem kullanıcı deneyimi hem de arama motoru sıralaması açısından kritik öneme sahiptir.
LCP Neden Önemlidir?
Web performansı ölçümünde uzun yıllar boyunca First Contentful Paint (FCP) ve DOMContentLoaded gibi metrikler kullanıldı ancak bu metrikler kullanıcının gerçekte ne zaman sayfayı “kullanılabilir” hissettiğini doğru ölçemiyordu. Google bu boşluğu doldurmak için 2020 yılında LCP’yi Core Web Vitals’ın bir parçası olarak tanıttı.
LCP’nin önemi iki temel nedene dayanır:
- Kullanıcı algısıyla örtüşmesi: Kullanıcı bir sayfayı açtığında sayfanın yüklü hissettirdiği an, genellikle en büyük görsel öğenin belirdiği andır. LCP tam olarak bu anı ölçer; dolayısıyla teknik bir metrik olmaktan çok, gerçek kullanıcı deneyiminin sayısal karşılığıdır.
- Arama motoru sıralamasına doğrudan etkisi: Google, 2021’den itibaren Core Web Vitals’ı sıralama faktörü olarak kullanmaktadır. Zayıf bir LCP skoru, rakiplerinizin gerisinde kalmanıza neden olabilir.
LCP Eşik Değerleri
Google, LCP için üç performans aralığı tanımlamıştır:
| Performans | LCP Değeri |
| İyi | 2,5 saniye veya altı |
| İyileştirme gerekli | 2,5 — 4,0 saniye arası |
| Zayıf | 4,0 saniyenin üzeri |
Bu eşikler, sayfa yükünün başladığı andan — yani kullanıcı sayfaya tıkladığı andan — itibaren ölçülür. Hedef, kullanıcıların en az %75’i için LCP değerini 2,5 saniyenin altında tutmaktır.
LCP Hangi Öğeleri Dikkate Alır?
Tarayıcı, LCP hesaplamasında yalnızca belirli öğe türlerini dikkate alır:
- <img> etiketleri
- <image> içindeki SVG öğeleri
- poster özelliğiyle tanımlanmış <video> elemanları
- url() fonksiyonuyla CSS arka plan görseli yüklenen öğeler
- Metin içeren blok düzeyindeki öğeler (<p>, <h1>, <div> vb.)
LCP öğesi, viewport içinde görünen bu türlerdeki en büyük öğedir. Sayfa yüklenirken LCP öğesi değişebilir; tarayıcı her yeni büyük öğe render ettiğinde LCP değerini günceller ve kullanıcı sayfayla etkileşime geçtiğinde (tıklama, kaydırma) son değeri kesinleştirir.
Dikkate alınmayan öğeler:
- Görünür alandan taşan içerik (overflow ile gizlenen)
- Opaklığı sıfır olan, görünmez öğeler
- Tam ekran kaplayan arka plan görselleri (bilgi içermediği kabul edilir)
- <iframe> içindeki öğeler
LCP Nasıl Ölçülür?
Chrome DevTools
- DevTools’u açın (F12)
- Performance sekmesine geçin
- Sayfayı yeniden yükleyerek kaydı başlatın
- Kayıt tamamlandığında Timings satırında LCP işaretçisini göreceksiniz
- İşaretçiye tıklayarak hangi öğenin LCP olarak belirlendiğini ve tam zamanlamasını inceleyebilirsiniz
PageSpeed Insights
Google’ın PageSpeed Insights aracı hem laboratuvar verisi (Lighthouse) hem de gerçek kullanıcı verisi (CrUX — Chrome User Experience Report) sunar. Gerçek kullanıcı verisi, sitenizin pratikte nasıl performans gösterdiğini anlamak için laboratuvar verisinden daha değerlidir.
Search Console
Google Search Console’daki Core Web Vitals raporu, sitenizin farklı sayfalarındaki LCP performansını toplu olarak gösterir ve hangi URL’lerin iyileştirme gerektirdiğini listeler.
LCP’yi Etkileyen Faktörler Nelerdir?
LCP değeri dört ana kategoride incelenebilir:
Sunucu Yanıt Süresi (TTFB)
Tarayıcı ilk byte’ı almadan hiçbir şey render edemez. Yüksek Time to First Byte (TTFB) değeri, tüm sonraki metrikleri olumsuz etkiler. Sunucu yanıt süresini etkileyen başlıca faktörler: sunucu donanımı, veritabanı sorgu süreleri, sunucu tarafı önbellekleme ve CDN kullanımı.
Render-Blocking Kaynaklar
Tarayıcı, HTML’yi ayrıştırırken <head> bölümünde karşılaştığı CSS ve JavaScript dosyalarını indirip işlemeden render’a devam edemez. Bu dosyalar render sürecini bloke eder ve LCP öğesinin ekrana gelme zamanını geciktirir.
Kaynak Yükleme Süresi
LCP öğesi çoğunlukla bir görsel olduğundan, görselin yükleme süresi doğrudan LCP’yi belirler. Görselin boyutu, formatı, sunucunun konumu ve CDN kullanımı bu süreyi etkiler.
İstemci Tarafı Render
JavaScript ile oluşturulan (client-side rendering) sayfalarda tarayıcı önce boş bir HTML alır, ardından JavaScript’i çalıştırarak içeriği oluşturur. Bu süreç LCP’yi ciddi ölçüde artırabilir çünkü LCP öğesi JavaScript çalışana kadar DOM’da mevcut değildir.
LCP Nasıl İyileştirilir?
-
- LCP Öğesini Önceden Yükleyin (Preload)
- Görsel Formatlarını Optimize Edin
- Lazy Loading’i LCP Öğesine Uygulamayın
-
Render-Blocking Kaynakları Ortadan Kaldırın
-
CDN ve Sunucu Optimizasyonu
-
Kritik CSS’i Inline Olarak Yerleştirin
LCP Öğesi Nasıl Belirlenir?
Tarayıcı, sayfa yüklenirken viewport içinde render edilen öğeleri boyutlarına göre takip eder. Her yeni büyük öğe belirdiğinde LCP adayı güncellenir. Kullanıcı sayfayla etkileşime geçtiği anda (tıklama veya kaydırma) o anki en büyük öğe LCP olarak kesinleşir. Hangi öğenin LCP olduğunu Chrome DevTools’un Performance sekmesinden veya PageSpeed Insights’tan görebilirsiniz.
LCP Skoru Cihaza Göre Değişir mi?
Evet. Mobil cihazlar genellikle daha yavaş işlemci ve ağ bağlantısına sahip olduğundan mobil LCP skorları masaüstüne kıyasla daha yüksek çıkar. Google, mobil ve masaüstü skorlarını ayrı ayrı değerlendirir; her ikisi için de optimizasyon yapılması önerilir.
Tek Sayfa Uygulamalarında LCP nasıl ölçülür?
Tek sayfa uygulamalarında sayfa geçişleri gerçek bir sayfa yüklemesi olmadığından LCP yalnızca ilk yüklemede ölçülür. Sonraki route geçişlerinde LCP hesaplanmaz. Bu nedenle tek sayfa uygulamalarında ilk yükleme performansı ve SSR/SSG kullanımı özellikle kritiktir.
LCP 0 veya Çok Düşük Çıkıyorsa Ne Anlama Gelir?
LCP değerinin sıfır veya beklenmedik derecede düşük çıkması genellikle ölçüm aracının LCP’ye uygun öğe bulamaması anlamına gelir. Sayfa yalnızca metin içeriyorsa veya büyük görsel öğeler viewport dışında kalıyorsa bu durum oluşabilir. DevTools ile hangi öğenin LCP olarak seçildiğini kontrol etmek gerekir.
Font Yüklemesi LCP’yi Etkiler mi?
Dolaylı olarak evet. Eğer LCP öğesi büyük bir metin bloğuysa ve bu metnin fontu geç yükleniyorsa, tarayıcı gerçek fontu gösterene kadar görünmez metin (FOIT) veya yedek fontla gösterim (FOUT) yapabilir. font-display: swap ve <link rel=”preload”> ile font yüklemesi optimize edilebilir.
Görsel CDN Servisleri LCP’ye Nasıl Katkı Sağlar?
Cloudinary, Imgix veya Cloudflare Images gibi görsel CDN servisleri; otomatik format dönüşümü (WebP/AVIF), boyutlandırma, sıkıştırma ve coğrafi dağıtım özelliklerini bir arada sunar. Özellikle görsel ağırlıklı sitelerde bu servisler LCP üzerinde doğrudan ve ölçülebilir iyileşme sağlar.
SSH Nedir?
