Core Web Vitals INP (Interaction to Next Paint) Rehberi

Google, Mart 2024 itibarıyla eski First Input Delay (FID) metriğini tamamen emekliye ayırarak yerine sayfa boyunca gerçekleşen tüm kullanıcı etkileşimlerinin tepki hızını ölçen yeni nesil resmi Core Web Vitals metriği olan INP’yi (Interaction to Next Paint) getirmiştir.

FID yalnızca sayfaya ilk tıklamadaki gecikmeyi ölçerken; INP kullanıcının sayfada geçirdiği tüm süre boyunca yaptığı tıklamaları (click), dokunuşları (tap) ve klavye girişlerini (keypress) izler ve en kötü gecikmeye sahip olanı puanlar. INP skorunu yeşil alana çekmek için JavaScript ana iş parçacığı (Main Thread) darboğazları çözülmelidir.

1. INP Eşik Değerleri ve Bir Etkileşimin 3 Aşaması

┌─────────────────────────┬─────────────────────────┬─────────────────────────┐
│     İYİ (< 200 ms)      │   GELİŞTİRİLMELİ        │      KÖTÜ (> 500 ms)    │
│       🟢 YEŞİL          │   🟡 200 - 500 ms       │         🔴 KIRMIZI      │
└─────────────────────────┴─────────────────────────┴─────────────────────────┘

Bir kullanıcı bir butona tıkladığında INP süresi 3 alt bileşenden oluşur:

$$\text{INP Toplam Süresi} = \text{Girdi Gecikmesi (Input Delay)} + \text{İşleme Süresi (Processing Duration)} + \text{Sunum Gecikmesi (Presentation Delay)}$$

[Kullanıcı Butona Tıklar] ──> [1. Girdi Gecikmesi (Main Thread Meşguldü)]
                                       │
                                       ▼
                              [2. İşleme Süresi (JS Fonksiyonu Çalıştı)]
                                       │
                                       ▼
                              [3. Sunum Gecikmesi (Tarayıcı Yeni Kareyi Çizdi - Next Paint)]

2. INP’yi Çökerten “Uzun Görevler (Long Tasks)” Nasıl Bölünür?

Ana iş parçacığında 50 milisaniyeden uzun süren her JavaScript görevi bir Long Task (Uzun Görev) sayılır ve tarayıcının ekrana yeni kare çizmesini bloke eder.

Modern Çözüm: scheduler.yield() ile Görevleri Parçalamak

async function handleFilterClick(products) {
  // 1. Aşama: UI'da anında yükleniyor ikonunu göster (Presentation Delay Sıfırlanır)
  showLoadingSpinner();
  
  // Ana iş parçacığını serbest bırak (Tarayıcı yeni kareyi çizer)
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  // 2. Aşama: Ağır filtreleme ve hesaplama işlemini yap
  const filtered = heavyCalculation(products);
  
  // 3. Aşama: Sonuçları DOM'a bas
  renderProductGrid(filtered);
  hideLoadingSpinner();
}

3. INP’yi İyileştiren 4 Teknik Mühendislik Kuralı

1. Ağır Üçüncü Parti Widget’ları (Live Chat, Hotjar) Erteleyin: Sayfa açılışında ana iş parçacığını kilitleyen izleme kodlarını ilk kullanıcı etkileşimine kadar geciktirin.
2. DOM Boyutunu Sınırlandırın (< 1.400 Düğüm): Aşırı büyük DOM ağaçlarında tek bir stil değişikliği tüm sayfada devasa bir Recalculate Style ve Reflow maliyeti yaratır.
3. requestAnimationFrame ve CSS Animasyonları Kullanın: JavaScript ile eleman kaydırmak yerine transform ve opacity kullanan donanım hızlandırmalı (GPU) CSS animasyonlarını tercih edin.
4. Büyük Veri İşlemlerinde Web Worker Kullanın: Ağır veri sıralama ve arama işlemlerini arka plandaki Web Worker thread’ine taşıyın.

Sıkça Sorulan Sorular

INP puanı Lighthouse testlerinde neden görünmez?

Lighthouse laboratuvar ortamında simülasyon yapar; oysa INP gerçek kullanıcı etkileşimlerine (Field Data / CrUX) dayanır. INP’yi test etmek için Chrome DevTools Performance paneli veya PageSpeed Insights Gerçek Kullanıcı Verileri incelenmelidir.

INP doğrudan Google sıralamasını etkiler mi?

Evet. INP resmi bir Core Web Vitals metriğidir ve sayfa deneyimi (Page Experience) sıralama sinyallerinin doğrudan bir parçasıdır.

Stratejik Sonuç

INP optimizasyonu, sitenizdeki tüm donma ve takılmaları ortadan kaldırarak kullanıcılara masaüstü ve mobilde anında tepki veren yağ gibi akıcı bir deneyim sunar. İleri düzey performans mühendisliği için teknik SEO çözümlerimizi inceleyin.

İlgili Yazılar

• Core Web Vitals Nedir? 2026 Optimizasyon Rehberi
• Core Web Vitals INP Metriği Nedir? Optimizasyon Rehberi
• Google Çekirdek Güncellemeleri (Core Update) Kurtarma Rehberi
• Temel SEO Rehberi: 5 Temel Sütunla Arama Motoru Optimizasyonu
• Deep Web ve SEO: İndekslenemeyen Web Katmanları ve Arama Motoru Botları

Daha kapsamlı destek için: SEO Danışmanlığı hizmetimize göz atın.