Core Web Vitals ve INP: Sayfa deneyimi ölçümünün yeni dönemi

Google, 2024'te FID (First Input Delay) metriğini emekliye ayırdı ve yerine INP (Interaction to Next Paint) geldi. Bu değişiklik gözden kaçırılabilecek kadar küçük görünse de, sayfa performansının ölçüldüğü yeri kökten değiştiriyor.

Bu yazıda Core Web Vitals üçlüsünü, özellikle yeni INP metriğini ve modern web stack'iyle (Astro, Next.js, Remix) hangi teknik kararların skoru belirlediğini detaylıca ele alıyoruz.

Core Web Vitals 2026: Güncel üçlü

Google'ın "iyi kullanıcı deneyimi" tanımı artık üç metrikle ölçülüyor:

• LCP (Largest Contentful Paint): Sayfanın en büyük görsel öğesinin render süresi. İyi: < 2.5s
• INP (Interaction to Next Paint): Kullanıcının etkileşimine yanıt verme süresi. İyi: < 200ms
• CLS (Cumulative Layout Shift): Sayfada beklenmedik kayma. İyi: < 0.1

Her üçü de "field data" yani gerçek kullanıcı verisiyle ölçülür. Lab ölçümleri (Lighthouse) yaklaşık bir fikir verir ama asıl SEO skoru field verilerine bağlı.

INP — FID'den ne farklı?

FID sadece sayfanın ilk etkileşimine yanıt verme süresini ölçüyordu. Genelde sayfa yüklendikten sonra tıklanan ilk butondu.

INP ise sayfanın yaşam döngüsü boyunca yapılan tüm etkileşimlerin en kötü yanıt süresini ölçüyor. Bu daha insaflı ama daha zorlayıcı bir metrik.

Pratik etkisi

• FID'de 50ms alan bir site, INP ile 400ms'e çıkabilir (çünkü sayfa içindeki bir modal açma, filtreleme gibi işlemler artık değerleniyor).
• JavaScript hevyweight siteleri (özellikle React SPA'lar) INP'de zorlanıyor.
• Event handler içindeki ağır hesaplamalar, layout thrashing, büyük state güncellemeleri hepsi INP skoruna yansıyor.

INP'yi iyileştirme tekniği

1. Long task'leri kırın

300ms+ süren sürekli JS blokları kullanıcı etkileşimini bloklar. setTimeout(0), requestIdleCallback veya scheduler.yield() ile böl.

2. Event handler'ları hafif tutun

Click/scroll handler'larında ağır işlem yapıyorsanız debounce/throttle şart. Gerçek iş idle callback'e veya Web Worker'a ertelensin.

3. React için: useDeferredValue ve startTransition

State güncellemelerini "urgent" ve "non-urgent" olarak ayırın. Filtreleme, arama gibi işlemler startTransition içinde olmalı.

4. Astro/Next.js için: Island architecture

Her bileşeni hydrate etmek yerine gerekli olanları hydrate edin. Astro'nun client:visible direktifi INP'i dramatik iyileştirir — ekranda görünmeyen component'ler JS yüklemez.

LCP için hızlı kazanımlar

Kaynakların öncelik sırası

html <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/hero.webp" as="image" />

Kritik asset'leri preload edin. Font display stratejisi swap olmalı (FOIT'ten korur).

Görsel optimizasyonu

WebP/AVIF formatı + responsive srcset + lazy load hero'dan sonrakiler. Hero görseli fetchpriority="high" ile işaretlenmeli.

Server response süresi

TTFB 400ms'in altında olmalı. CDN, edge caching, SSG (static site generation) bu konuda avantaj sağlar.

CLS — küçük ama ısrarcı

CLS genelde iki şeyden kaynaklanır:

1. Boyutu tanımlanmamış görseller — width ve height öznitelikleri zorunlu
2. Dinamik içerik enjeksiyonu — ads, banners, chat widget'ları layout kaymasına neden olur

Çözüm

• Her <img>/<iframe> için aspect-ratio CSS veya HTML attribute
• Dinamik content için yer tutucu (skeleton)
• Font loading için font-display: optional veya fallback metrics override

Ölçüm pratiği

Google Search Console → Core Web Vitals raporu birincil veri kaynağı. 28 günlük field data burada. Ayrıca:

• PageSpeed Insights — hem field hem lab data
• Chrome UX Report (CrUX) — halka açık RUM verisi
• Web Vitals Library — kendi analytics'inize entegre RUM

Sonuç

2026'da Core Web Vitals artık "nice to have" değil, SEO sıralamasının doğrudan faktörü. Özellikle INP yeni geldiği için birçok site hâlâ "iyi" eşiğinin altında.

Modern framework seçimi (Astro, Next.js App Router, Remix) ve island-based architecture bu metrikleri natural olarak yüksek tutar. Eski WordPress + plugin yığınlarından modern stack'e geçiş, sadece geliştirme deneyimi değil, SEO için de kritik.

Mevcut sitenizin Core Web Vitals raporunu birlikte değerlendirmek istersen strateji görüşmesi üzerinden başlayalım — ücretsiz 30 dakikada net yol haritası çıkarıyoruz.