Ana içeriğe geç
Performans

Largest Contentful Paint (LCP) Nedir?

LCP, sayfanın görsel olarak 'yüklendi' hissini ölçen Core Web Vitals metriği — kullanıcının ekranında görülen en büyük content elementinin (genelde hero görseli, başlık veya video) render edilme süresi. <2.5s 'iyi', 2.5-4s 'iyileştirilmeli', >4s 'kötü'. Google sıralama faktörü.

LCP, FCP'den (First Contentful Paint — ilk piksel ne zaman göründü) farklı — gerçek 'sayfanın yüklendi' hissini ölçer. Tipik LCP elementleri: <img>, <video>, <svg>, background image, büyük metin bloğu (H1).

LCP'yi yavaşlatan 5 ana faktör: 1. Büyük hero görseli (4-5MB JPG, optimize edilmemiş) — en yaygın 2. Server yavaşlığı (TTFB >800ms — Time to First Byte) 3. Render-blocking CSS/JS (üst kısımda eşzamanlı yüklenen 3rd party scripts) 4. Web font yüklenme gecikmesi (FOIT — Flash of Invisible Text) 5. Client-side rendering (React SPA — sayfa boş gelir, JS yükleyince doluyor)

LCP optimizasyon teknikleri: 1. Image optimization — WebP/AVIF format, responsive srcset, Next.js Image component (otomatik optimization), lazy load 'below the fold' resimler 2. CDN + Edge caching — Vercel/Cloudflare Edge 3. HTTP/3 + Brotli compression 4. Critical CSS inline (head içinde) 5. Font preload + font-display: swap (FOIT yerine FOUT) 6. Server-Side Rendering veya Static Generation (CSR yerine) 7. Resource hints — preload, preconnect, dns-prefetch

2026 Türkiye web sitelerinde ortalama LCP 3.8s — yarısı 'iyileştirilmeli' aralığında. DevPixel projelerinde hedef <1.2s.

DevPixel Yaklaşımı

DevPixel'in LCP optimizasyon stack'i: Next.js Image + WebP/AVIF (automatic), font preload + display swap, Vercel Edge deployment, critical CSS inline. 50+ projemizde ortalama LCP 0.9s. /tools/seo-audit ile mevcut sitenizin LCP'sini ücretsiz ölçebilirsiniz.

İlgili terimler