Largest Contentful Paint (LCP) Nedir?

[DursunKaptan]

Largest Contentful Paint (LCP), bir web sayfasının ana içeriğinin ne kadar hızlı yüklenip kullanıcıya görüntülendiğini ölçen bir performans metriğidir. Google'ın Core Web Vitals metriklerinden biri olan LCP, kullanıcı deneyiminin önemli bir göstergesidir ve sayfa yükleme performansını değerlendirir.

---

LCP Nedir?​

LCP, bir sayfanın görüntü alanı (viewport) içinde görünen en büyük içerik öğesinin (metin bloğu, resim, video vb.) yüklenip render edilme süresini ifade eder. Tarayıcı, sayfa yükleme sırasında en büyük öğeyi dinamik olarak belirler ve bu öğenin paint (boyama) zamanını kaydeder.

Örnek LCP Öğeleri:​

• Bir başlık (<h1> ) veya büyük metin bloğu
• Sayfanın ana resmi (<img> veya <svg> )
• Arka plan resmi (background-image)
• Video posterleri (<video> )

---

Neden Önemli?​

• Kullanıcı Algısı: Kullanıcılar, sayfanın "kullanıma hazır" olduğunu LCP ile hisseder.
• SEO Etkisi: Google, LCP'yi sıralama faktörü olarak kullanır (2020'den beri Core Web Vitals kapsamında).
• Hızlı Yükleme: Düşük LCP, daha az bekleyen ve daha memnun kullanıcılar demektir.

---

İyi ve Kötü LCP Değerleri​

• İyi (Good): 2.5 saniye veya altı
• Geliştirilmeli (Needs Improvement): 2.5-4 saniye
• Kötü (Poor): 4 saniye üzeri

---

LCP Nasıl Ölçülür?​

1. Gerçek Kullanıcı Verisi (RUM)
   • Chrome User Experience Report (CrUX)
   • Web Vitals JavaScript Kütüphanesi (web-vitals.js)
2. Lab Verisi (Sentetik Test)
   • Google Lighthouse (Chrome DevTools veya PageSpeed Insights)
   • WebPageTest

---

LCP'yi Etkileyen Faktörler​

1. Yavaş Sunucu Yanıtı
   • Optimize edilmemiş backend, veritabanı sorguları veya API gecikmeleri.
   • Çözüm: CDN kullanın, önbelleğe alın, sunucu tepki süresini (TTFB) iyileştirin.
2. Render Engelleme JS/CSS
   • Kritik olmayan JavaScript/CSS dosyalarının main thread'i bloklaması.
   • Çözüm:
     • JavaScript'i async/defer ile yükleyin.
     • Kritik CSS'yi inline yapın.
3. Yavaş Kaynak Yükleme
   • Büyük resimler/videolar, optimize edilmemiş fontlar.
   • Çözüm:
     • Resimleri sıkıştırın (WebP formatı).
     • Lazy loading kullanın (loading="lazy").
     • Yazı tiplerini preload edin.
4. İstemci Tarafı Render (CSR) Sorunları
   • React, Angular gibi framework'lerde fazla JS işlemi.
   • Çözüm:
     • Server-Side Rendering (SSR) veya Static Site Generation (SSG) kullanın.
     • Kod bölme (code splitting) yapın.

---

LCP Optimizasyonu İçin Pratik Adımlar​

1. TTFB'yi Düşürün
   • Sunucu optimizasyonu, önbellek politikaları, CDN.
2. Önemli Kaynakları Önceden Yükleyin
   • <link rel="preload" as="image" href="critical-image.jpg">
3. Resim Optimizasyonu
   • srcset kullanarak responsive resimler sağlayın.
4. Temel HTML'yi Hızlı Gönderin
   • Sunucu tarafı render ile "above-the-fold" içeriği erken yükleyin.

---

LCP vs FCP (First Contentful Paint)​

• FCP: Sayfada herhangi bir içeriğin (küçük bir metin bile) göründüğü an.
• LCP: En büyük içeriğin render edildiği an.
  → LCP, kullanıcının "sayfa yüklendi" hissini daha iyi yansıtır.