Core Web Vitals 2026 — INP Odaklı Performans Rehberi

Core Web Vitals 2024 Mart’ında değişti: FID (First Input Delay) emekli oldu, INP (Interaction to Next Paint) geldi. 2026’da artık INP en kritik metric — kullanıcının her etkileşimini ölçüyor, sadece ilkini değil.

INP düşük olmayan sitelerin sıralaması düşüyor, mobile traffic’i kaybediyor. 12 yıllık SEO + 4 yıl modern web stack tecrübesinden 2026 güncel rehber.

Hızlı özet: Core Web Vitals 2026: LCP <2.5s, INP <200ms (FID’in yerini aldı 2024’te), CLS <0.1. INP en kritik ve en zor — JavaScript ağırlığını azaltmak (code splitting, lazy load, framework choice), main thread blocking’i çözmek, interaction handler’ları optimize etmek INP’yi düşürür.

Core Web Vitals 2026 — Üç Metric

1. LCP (Largest Contentful Paint)

Sayfanın en büyük görsel öğesi (hero image, başlık) ne zaman görünür?

Değer	Sınıflandırma
< 2.5s	İyi
2.5-4.0s	Orta
> 4.0s	Kötü

LCP’yi düşürmek:

• Hero görseli optimize (WebP/AVIF, doğru boyut)
• <link rel="preload"> ile öncelik
• Server response time (TTFB) düşük
• CDN kullan (Cloudflare)
• Critical CSS inline

2. INP (Interaction to Next Paint) ⭐ EN KRİTİK

Kullanıcının her tıklaması, key press’i, tap’i ne kadar sürede ekrana yansır?

Değer	Sınıflandırma
< 200ms	İyi
200-500ms	Orta
> 500ms	Kötü

INP, FID’den neden zor?

• FID sadece ilk etkileşimi ölçüyordu
• INP tüm etkileşimleri ölçüyor + 75. yüzdelik dilim (en yavaş %25)
• Yani 1 tane yavaş tıklama tüm INP’i bozar

3. CLS (Cumulative Layout Shift)

Sayfa yüklenirken içerik kayıyor mu? (image yüklenince yazı aşağı kayıyor gibi)

Değer	Sınıflandırma
< 0.1	İyi
0.1-0.25	Orta
> 0.25	Kötü

CLS’i düşürmek:

• Image’larda width + height attribute (browser yer ayırsın)
• Reklam yerleri için min-height
• Web font preload (FOIT/FOUT’u azalt)
• CSS animation’ı transform ile (layout etkisiz)

INP Niye Bu Kadar Zor?

INP JavaScript ağırlığına çok duyarlı. 2018-2022 SPA modası (React, Vue) JS bundle’larını şişirdi. Bir sayfa 500KB+ JS yüklüyorsa:

1. Ana thread tıkanıyor (parsing, execution)
2. Kullanıcı tıklıyor → handler çalışmadan ekran donuyor
3. INP 500ms+ — fail

Çözümler 4 kategoride:

Çözüm 1: Doğru Framework Seçimi

Framework	INP Performansı	Ne için iyi
Vanilla HTML/CSS	⭐⭐⭐⭐⭐	Statik içerik, basit site
Astro Islands	⭐⭐⭐⭐⭐	Marketing site, blog, ürün katalogu
Hugo / Jekyll	⭐⭐⭐⭐⭐	Statik sites
Next.js (App Router + RSC)	⭐⭐⭐⭐	Hibrit (statik + dinamik)
SvelteKit	⭐⭐⭐⭐	Modern, hafif framework
Remix	⭐⭐⭐⭐	Form-heavy app
Vue 3 SPA	⭐⭐⭐	Single-page app
React SPA (CRA)	⭐⭐	Legacy app
WordPress + Elementor	⭐⭐	Eklenti şişkinliği
WordPress + Woodmart	⭐	E-ticaret eklenti yığını

Astro Islands marketing site için 2026’da en iyi seçim. Default JS = 0 KB. Sadece interaktif olması gereken component’ler hidrate olur.

Çözüm 2: JavaScript Optimization

Code Splitting

// ❌ Kötü — her şey bir bundle
import HeavyChart from './HeavyChart';
import VideoPlayer from './VideoPlayer';
import RichTextEditor from './RichTextEditor';

// ✅ İyi — dynamic import
const HeavyChart = dynamic(() => import('./HeavyChart'));
const VideoPlayer = dynamic(() => import('./VideoPlayer'));

Tree Shaking

Webpack/Vite otomatik yapıyor ama dikkat:

// ❌ Tüm lodash bundle'a girer (~70KB)
import _ from 'lodash';

// ✅ Sadece debounce import (~2KB)
import { debounce } from 'lodash-es';

Bundle Size Audit

# Vite/Astro için
pnpm build
# bundle size raporu yazıyor

# Detaylı analiz için
pnpm add -D rollup-plugin-visualizer

200KB+ gzipped JS varsa kırmızı bayrak.

Çözüm 3: Third-Party Script’leri Lazy Load

Tipik suçlular:

• Chat widget (Tawk.to, Intercom): ~100-200 KB
• Analytics (GTM yüklüyor olabilir 50+ tag): değişken
• Sosyal share butonları
• Reklam network’ları (Google AdSense, Meta Pixel)
• Heatmap (Hotjar, Microsoft Clarity)

Lazy load tekniği:

// Sayfa interactive olduktan sonra inject
window.addEventListener('load', () => {
  setTimeout(() => {
    const script = document.createElement('script');
    script.src = 'https://embed.tawk.to/...';
    script.async = true;
    document.body.appendChild(script);
  }, 3000); // 3 saniye sonra
});

Veya <script defer> ve <script async> kullan, ama <head>’de synchronous third-party’den kaçın.

Partytown

Third-party script’leri web worker’da çalıştırır — main thread’i bloklamaz:

pnpm add @builder.io/partytown

<!-- Partytown ile -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX"></script>

INP %30-50 düşürebiliyor.

Çözüm 4: Event Handler Optimization

Debounce / Throttle

// ❌ Her keystroke'ta arama (her seferinde event'i tetikliyor)
input.addEventListener('input', search);

// ✅ 300ms beklet, sonra ara
const debouncedSearch = debounce(search, 300);
input.addEventListener('input', debouncedSearch);

requestIdleCallback

Ağır iş varsa idle time’ı kullan:

function processBigData() {
  // ... uzun süren iş
}

// ❌ Anında çalışır, INP'yi bozar
processBigData();

// ✅ Browser idle olduğunda çalışır
requestIdleCallback(() => {
  processBigData();
});

Long Task Breaking

// ❌ Tek long task (500ms+)
function processItems(items) {
  items.forEach(item => heavyWork(item));
}

// ✅ Yield to main thread
async function processItems(items) {
  for (const item of items) {
    heavyWork(item);
    await new Promise(r => setTimeout(r, 0)); // microtask yield
  }
}

INP Ölçüm Araçları

1. Chrome DevTools — Performance Tab

1. F12 → Performance
2. Record → sayfayı kullan (tıklama, scroll)
3. Stop → “Interactions” track’inde INP değerleri

2. Web Vitals Chrome Extension

https://chrome.google.com/webstore — gerçek zamanlı CWV gösterir.

3. PageSpeed Insights (CrUX data)

https://pagespeed.web.dev/ Gerçek kullanıcı verisi (Chrome User Experience Report). 28 gün ortalaması.

4. Search Console — Core Web Vitals Report

URL’lerin tarihsel CWV durumu. Mobile + Desktop ayrı.

5. Real User Monitoring (RUM)

• Cloudflare Web Analytics (ücretsiz)
• Google Analytics 4 (web vitals plugin)
• SpeedCurve (premium)
• DebugBear (premium)

INP Iyileştirme Vaka Çalışması (Hipotetik)

Aşama	LCP	INP	CLS	Lighthouse
Başlangıç (WordPress + Elementor)	4.2s	580ms	0.18	35
Astro’ya migration	1.8s	220ms	0.05	88
+ Third-party lazy load	1.5s	140ms	0.04	95
+ Image optimization (WebP)	1.1s	130ms	0.04	98

INP 580 → 130ms (%77 iyileşme). LCP 4.2s → 1.1s (%74 iyileşme). Lighthouse 35 → 98.

Tipik WP→Astro migration sonucu.

INP Hedefleri Sektörel

Sektör	Hedef INP
Marketing/blog	< 100ms
E-ticaret (form/sepet)	< 200ms
SaaS dashboard	< 300ms (zorunlu olarak yüksek interaktivite)
Video/medya	< 250ms
Doktor/avukat sitesi	< 150ms
Restoran/cafe	< 100ms

Modern Stack ile Migration

WordPress’ten Astro/Next.js’e geçiş Core Web Vitals’da en hızlı kazanç. Tipik:

• LCP: 3-5x iyileşme
• INP: 3-5x iyileşme
• CLS: 2-3x iyileşme
• Lighthouse: +50 puan

Web Tasarım hizmetimiz Lighthouse 95+ garanti.

Yapılacaklar Checklist

• PageSpeed Insights ile mevcut CWV ölç
• Search Console — Core Web Vitals raporuna bak
• Bundle size audit (Vite analyzer veya Webpack Bundle Analyzer)
• Third-party script’leri lazy load
• Partytown ile GTM’i web worker’a taşı
• Image’ları WebP/AVIF’a dönüştür
• Image’larda width/height attribute
• Font preload + display swap
• Event handler’ları debounce/throttle
• 1 ay sonra tekrar ölç (28 günlük CrUX cycle)

Performans Audit Hizmeti

Kapsamlı CWV audit + iyileştirme planı için GEO/AI Search Audit kapsamında performans bölümü var (5 gün, 7.500 TL).

Veya WP migration ile birlikte modern stack için Web Tasarım hizmetimiz veya sektörel paketler.

Ücretsiz strateji görüşmesi → sitenizin CWV durumuna bakıp öneri yapalım.

---

İlgili yazılar:

• Schema.org Markup Eksiksiz Rehberi
• WordPress Yerine Ne Kullanmalı? 2026
• GEO Nedir? AI Çağında SEO’nun Yeni Yüzü