LCP (Largest Contentful Paint) user’ın page’in “yüklendi” hissettiği an. Hero image, ana heading, featured video poster – genelde page’in en büyük visible element’i.
Google Core Web Vitals’in SEO-impact metric’i. Hedef 2.5 saniye altı. 4 saniye üstü “poor”, ranking’e negatif etki.
15+ yıldır WordPress performance optimize ederim. LCP iyileştirmek için kullandığım 10 maddelik checklist’i paylaşacağım.
1. LCP element’ini tespit et
Her site’da farklı. Chrome DevTools Lighthouse veya Performance tab’ında LCP element highlight oluyor.
Most common LCP elements:
– Hero image (product page, landing page)
– Featured blog post image
– H1 heading (minimal design sites)
– Video poster image
– Above-fold large text
LCP element’i bilmek optimize’da odak sağlıyor. Diğer optimize’lar fluff.
2. Hero image’ı eagerly load
En sık hata: WordPress lazy load attribute’ını hero image’a da ekliyor. Bu image initial viewport’ta, lazy load olmaması lazım.
Fix (theme’de):
// Hero image'a özel lazy load kapatma
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
if (is_hero_image($attachment)) {
$attr['loading'] = 'eager';
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 2);fetchpriority="high" browser’a “bu image öncelikli” sinyali. Modern browser’lar respect ediyor.
3. Image format modernize
JPEG → WebP: %25-35 smaller.
WebP → AVIF: additional 20-30%.
WordPress setup:
– ShortPixel, Imagify gibi plugin otomatik convert
– Native WordPress 5.8+ WebP support
– AVIF henüz native yok, plugin gerekli
Bir test site’ımda hero image 250KB JPEG → 110KB WebP. LCP 1.2s’den 0.8s’ye.
4. Image dimensions spesifiye et
Browser image yüklenmeden space allocate ediyor. Dimensions’sız → layout shift.
HTML:
<img src="hero.webp" width="800" height="400" alt="..." fetchpriority="high">Responsive:
img {
width: 100%;
height: auto;
aspect-ratio: 2 / 1; /* prevents layout shift */
}aspect-ratio CSS property image gerçek dimension bilinmeden bile space koruyor.
5. Responsive images (srcset)
Mobile’a 4K image göndermek bandwidth kaybı.
<img src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="...">Browser device/viewport’a göre en uygun image’ı choose ediyor.
WordPress’te wp_get_attachment_image() otomatik srcset generate ediyor. Custom tema’da kendi yazıyorsun.
6. Preload LCP image
Browser HTML parse sırasında CSS/JS’e öncelik veriyor. Image DOM’a ulaşmadan aggressive download başlamıyor.
ile image’ı erken başlat:
<link rel="preload"
as="image"
href="hero.webp"
imagesrcset="hero-400.webp 400w, hero-800.webp 800w"
imagesizes="(max-width: 600px) 400px, 800px"
fetchpriority="high">Image HTML’de görünmeden bile indirmeye başlıyor. LCP 200-500ms kazanç.
7. Server-side TTFB iyileştir
LCP’nin önkoşulu TTFB. Server cevap vermese browser hiçbir şey render edemez.
TTFB targets:
– 200ms altı: excellent
– 500ms altı: good
– 800ms altı: OK
– 1s üstü: problem
WordPress’te TTFB optimization ayrı bir konu (başka yazıda ele aldım). Özetle: caching layer (page cache + object cache), database optimization, PHP OPcache, lightweight theme.
8. Critical CSS inline
External CSS file load olana kadar browser render edemiyor. “Render-blocking CSS”.
Solution: Critical CSS. Above-fold style’lar inline