Core Web Vitals 2026: LCP, INP, CLS'yi gerçekten anlamak

Google 2020’den beri Core Web Vitals’i search ranking factor olarak kullanıyor. 2024’te INP (Interaction to Next Paint) FID’in yerini aldı. 2026’da bu metric’ler daha da kritik.

19 yılda 100+ WordPress sitesini optimize ettim. Core Web Vitals Google’dan önce de good practice’di, şimdi measurable hedef. Bu yazıda 3 ana metric’in ne olduğunu ve nasıl optimize ettiğimi anlatacağım.

LCP (Largest Contentful Paint)

Sayfanın “significant content”ini ne kadar hızlı yükledi. Büyük image, video poster, heading block – genelde hero element.

Hedef: 2.5 saniye altı (good). 2.5-4 saniye (needs improvement). 4+ (poor).

Measurement: Chrome DevTools > Lighthouse. Veya PageSpeed Insights.

Common LCP killers:

1. Large hero image. 2MB JPEG yükleniyor. Her network condition’ında yavaş.

Fix:
– WebP/AVIF format (30-50% smaller)
– Responsive images (srcset)
– Appropriate dimensions (don’t serve 4K for mobile)
– Priority Hints:

2. Lazy-loaded hero image. Yanlışlıkla loading="lazy" eklenmiş. First paint’te yüklenmiyor.

Fix: Hero image’i ALWAYS eagerly load. Below-fold images lazy load OK.

3. CSS blocking render. Stylesheet büyük ve render-blocking.

Fix:
– Critical CSS inline
– Non-critical CSS async load
– CSS minification

4. Slow server response. Backend TTFB yüksek.

Fix:
– Database query optimization
– Caching (page cache, object cache)
– CDN

5. Web fonts blocking. FOIT (Flash of Invisible Text).

Fix:
– font-display: swap CSS property
– Preload critical font files
– System fonts fallback

LCP benchmark target: 1.5-2.0 saniye için aggressive. Good UX.

INP (Interaction to Next Paint)

2024’te FID’in yerini aldı. User interaction’dan (click, tap, keypress) visual feedback’e ne kadar süre geçiyor.

Hedef: 200ms altı (good). 200-500ms (needs improvement). 500+ (poor).

Measurement: Lighthouse, Chrome UX Report (real user data).

FID vs INP:

FID: Sadece first interaction ölçülüyordu
INP: Entire session’da worst interaction ölçülüyor

INP daha realistic. User bir session’da defalarca interact ediyor, biri yavaşsa UX bozuk.

Common INP killers:

1. Heavy JavaScript. Main thread uzun süre blocked, user input’a cevap veremiyor.

Fix:
– Code splitting (dynamic import)
– Remove unused JavaScript
– Web Workers (background thread)
– requestIdleCallback for non-critical work

2. Slow event handlers. onClick handler 500ms çalışıyor.

Fix:
– Handler optimize et, heavy work defer
– Debounce frequent events (scroll, input)
– requestAnimationFrame for visual updates

3. Layout thrashing. DOM read/write interleave.

// Bad
for (let i = 0; i < elements.length; i++) {
    const height = elements[i].offsetHeight;  // Read
    elements[i].style.height = height * 2 + 'px';  // Write
}

// Good
const heights = elements.map(el => el.offsetHeight);  // Batch read
heights.forEach((h, i) => elements[i].style.height = h * 2 + 'px');  // Batch write

4. Third-party scripts. Google Tag Manager, analytics, chat widget main thread’i tutuyor.

Fix:
– async/defer scripts
– Lazy-load third-party (after user interaction)
– Facade pattern (preview, load on demand)

CLS (Cumulative Layout Shift)

Sayfa yüklenirken content shift oluyor mu? Reading experience broken.

Hedef: 0.1 altı (good). 0.1-0.25 (needs improvement). 0.25+ (poor).

CLS nasıl hesaplanıyor: Layout shift fraction * viewport coverage. 5 satır shift + %80 kaplanıyor = 0.4 CLS. Bad.

Common CLS killers:

1. Image without dimensions. Image yükleniyor, sonra space ayrılıyor, content aşağı itiliyor.

Fix:

<img src="hero.jpg" width="800" height="400" alt="...">

HTML’de explicit width/height. Browser pre-allocate space.

Responsive için: CSS aspect-ratio property:

img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
}

2. Web fonts causing reflow. Fallback font metrics farklı. Web font yüklenince text reflow.

Fix:
– font-display: optional (no swap)
– size-adjust, ascent-override CSS (match fallback metrics)
– Preload critical fonts

3. Ads/iframes. Banner ad yüklendiğinde space acilişiyor.

Fix:
– Reserve space baştan
– Min-height on ad container
– Skeleton loader pattern

4. Dynamically injected content. User scroll sırasında banner ekleniyor.

Fix: Pre-allocate placeholder. Content injection non-CLS yolla yap (modal overlay, etc).

5. CSS-driven animations. Transform yerine top/left animation.

Fix:

/* Bad: triggers layout */
.el { transition: top 0.3s; }

/* Good: GPU-accelerated, no reflow */
.el { transition: transform 0.3s; }

Measurement tools

1. Lighthouse (Chrome DevTools). Single run. Synthetic test environment.

2. PageSpeed Insights (pagespeed.web.dev). Web-based. Mobile + Desktop.

3. Chrome User Experience Report (CrUX). Real user data. 28-day aggregate.

4. Search Console. Site-wide Core Web Vitals report.

5. Web Vitals library. JavaScript library, real user monitoring (RUM).

import {onCLS, onINP, onLCP} from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onLCP(console.log);

Backend’e metrics send, Grafana/Datadog’da visualize.

Real user data synthetic test’ten daha reliable. Actual users actual devices, actual networks.

Field data vs lab data

Lab data: Lighthouse, PageSpeed (one-time synthetic test)
Field data: CrUX, web-vitals library (real users, aggregate)

İki kaynak genelde farklı sonuç veriyor. Her ikisini de takip et.

Field data Google’ın ranking için kullandığı. En azından field data’yı iyileştir.

Mobile-first optimization

Google mobile-first indexing kullanıyor. Mobile Core Web Vitals desktop’tan kritik.

Mobile’da:
– Slower CPU
– Slower network (3G, 4G)
– Smaller viewport
– Battery concerns

Optimize mobile first. Desktop genelde otomatik iyi olur.

Mobile-specific practices:
– Responsive images (src’den çok daha küçük mobile versiyon)
– Reduced JavaScript for mobile
– Touch-friendly UI (no hover-only interactions)
– Viewport meta tag correct

WordPress-specific tips

15+ yıl WordPress sites optimize ettim. Core patterns:

1. Caching plugin. LiteSpeed Cache (LiteSpeed server varsa), WP Rocket, W3 Total Cache.

2. Image optimization. ShortPixel, Imagify, or native WP WebP.

3. Critical CSS generation. Autoptimize with critical path feature.

4. Lazy loading native: WordPress 5.5+ native. Ek plugin gereksiz.

5. Remove bloat plugins. Her plugin render overhead. Minimize.

6. Theme choice. Lightweight theme (GeneratePress, Blocksy, Astra) heavy themes (Avada, Divi) daha iyi.

7. Headless WordPress. Advanced. Next.js frontend, WP backend. Best performance but complex.

Real impact

Core Web Vitals iyileştirme gerçek business impact:

SEO ranking. Google direct factor.
Conversion rate. 100ms gecikme %1-2 conversion düşürüyor (Amazon).
Bounce rate. Slow sites higher bounce.
User satisfaction. Subjective ama measurable.

Bir e-ticaret müşterim LCP 4.5s’den 1.8s’ye düşürdük. Organic traffic %23 arttı, conversion rate %12.

Investment: 2-3 haftalık optimization work. ROI: ongoing revenue increase.

Monitoring continuous

One-time fix yetmiyor. Content/plugin eklendikçe regression.

Continuous monitoring:

Weekly Lighthouse CI check (automated)
CrUX monthly review
Real user monitoring dashboard
Alerts for regression

Bu disciplin olmadan iyileştirme 6 ay içinde erozyon geçiriyor.

Sonuç

Core Web Vitals technical SEO’nun core’u. 2026’da Google algorithmic ranking için daha da değerli.

LCP (load), INP (interactivity), CLS (visual stability). Her biri farklı optimization strategy. Image optimization, JavaScript management, layout pre-allocation.

Measurement first, fix second, continuous monitoring. This cycle ile her site Green (passing) Core Web Vitals’e ulaşabilir. 2-3 haftalık focused work enough most sites için.

Core Web Vitals 2026: LCP, INP, CLS’yi gerçekten anlamak