Teknik SEO

Core Web Vitals 2026: INP, LCP ve CLS'yi Optimize Etmek İçin Kapsamlı Rehber

14 Nisan 2026·10 dk dakika okuma·Emre Çelik

Core Web Vitals 2026: Neler Değişti?

Core Web Vitals (CWV), Google'ın sayfa deneyimi sinyalinin temelini oluşturan üç metrikten ibaredir. 2024'te FID (First Input Delay) kullanımdan kaldırılarak yerini INP (Interaction to Next Paint) aldı. Bu değişiklik, sıralama algoritmalarındaki ağırlığı da güncelledi.

2026 itibarıyla CWV skoru; mobil-masaüstü ayrı ayrı değerlendiriliyor ve Search Console → Core Web Vitals raporu URL bazında geçti/kaldı/başarısız ayrımı gösteriyor. SEO Analiz aracımızla sitenizin CWV durumunu tek tıkla kontrol edebilirsiniz.

2026 Hedef Eşikleri:

LCP: ≤ 2.5 saniye (iyi) | 2.5–4s (geliştirme gerekli) | >4s (kötü)
INP: ≤ 200ms (iyi) | 200–500ms (geliştirme gerekli) | >500ms (kötü)
CLS: ≤ 0.1 (iyi) | 0.1–0.25 (geliştirme gerekli) | >0.25 (kötü)

LCP (Largest Contentful Paint) Optimizasyonu

LCP, sayfanın görünür alanındaki en büyük içerik öğesinin (genellikle hero resmi veya H1 başlık) yüklenme süresini ölçer. Düşük LCP'nin en yaygın 4 nedeni:

1. Sunucu Yanıt Süresi (TTFB)

TTFB 200ms üzerindeyse önce altyapıyı çözün. Vercel, Cloudflare Pages gibi edge CDN platformları bunu otomatik düşürür. Next.js kullanıyorsanız ISR veya SSG tercih edin.

2. Render-Blocking Kaynaklar

CSS ve JS dosyaları LCP'yi geciktirir. Çözüm:

Critical CSS'i inline edin, geri kalanı async yükleyin
Font yüklemesine font-display: swap ekleyin
Üçüncü taraf script'leri defer veya async ile yükleyin

3. Resim Optimizasyonu

LCP elementi çoğunlukla hero resmidir. Yapılması gerekenler:

WebP veya AVIF formatına dönüştürün (%30-50 boyut tasarrufu)
LCP resmine fetchpriority="high" ekleyin
<link rel="preload"> ile önceden yükleyin
Next.js kullanıyorsanız <Image priority /> propunu kullanın

4. İstemci Tarafı Render (CSR)

React/Next.js uygulamalarında SSR veya SSG kullanılmadığında LCP ciddi şekilde düşer. App Router ile async Server Components kullanın. Next.js App Router SEO rehberimiz detaylı örnekler içeriyor.

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının tıklama/dokunma/klavye etkileşiminden sonra tarayıcının görseli güncelleme süresini ölçer. 500ms üstü INP kullanıcı deneyimini ciddi şekilde bozar.

Ana INP Sorunları ve Çözümleri

Uzun JavaScript görevleri: 50ms üzerindeki görevleri scheduler.yield() veya setTimeout ile parçalara bölün
Hidrasyon gecikmeleri: React 18'in Suspense ve useTransition hook'larıyla UI güncellemelerini önceliklendirin
DOM boyutu: 1.400 node üzerinde DOM INP'yi yavaşlatır. Sanallaştırma (react-window) kullanın
Üçüncü taraf script'ler: Analytics, chat widget gibi scriptleri Partytown ile web worker'a taşıyın

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken içerik bloklarının sürüklenmesini ölçer. Kullanıcı bir butona tıklamaya çalışırken reklam yüklenerek buton kayarsa CLS yükselir.

CLS Sorunlarını Giderin

Tüm <img> etiketlerine width ve height attribute ekleyin
Reklam ve embed alanlarına CSS ile önceden yer ayırın: min-height: 250px
Web font yüklenene kadar font-display: optional kullanın
Dinamik içerikleri sayfanın üstüne değil, altına ekleyin

CWV Ölçüm Araçları

Lab verisi ile alan verisi (field data) arasındaki farkı bilin:

Lab verisi: Lighthouse, PageSpeed Insights — simülasyon ortamı, hızlı test için
Alan verisi (CrUX): Search Console, PageSpeed Insights (alan sekmesi) — gerçek kullanıcı verisi, Google'ın sıralama kararında kullandığı veri

Search Console'daki CWV raporunda "Kötü URL'ler" sıfıra inmeden sıralama avantajı beklemeyin. Teknik SEO araçlarımızla URL bazlı sorunları hızla tespit edin.

Öncelik Sırası: Hangi Metriğe Önce Odaklanmalı?

Eğer üç metrikten biri "kötü" durumdaysa şu sırayı izleyin: LCP → INP → CLS. LCP en yaygın sorun kaynağıdır ve düzeltilmesi en doğrudan sıralama etkisi yaratır.