İçeriğe geç
SEO

Core Web Vitals INP Metriği Nedir? Optimizasyon Rehberi

26 Ağustos 2026 Kerem Kırbıyık 3 dk okuma
Core Web Vitals INP Interaction to Next Paint etkileşim gecikmesi ve optimizasyon şeması

Google, Mart 2024 itibarıyla web sayfalarının kullanıcı etkileşim hızını ölçen First Input Delay (FID) metriğini resmi olarak emekliye ayırarak yerine Interaction to Next Paint (INP) metriğini getirdi. FID yalnızca sayfadaki ilk tıklamanın gecikmesini ölçerken; INP, kullanıcının sayfada kaldığı tüm süre boyunca yaptığı tüm tıklama, dokunma ve klavye etkileşimlerinin en yavaş olanını puanlar.

Bir butona basıldığında açılır menünün gecikmesi, sepete ekleme sırasında arayüzün donması veya arama çubuğuna yazarken harflerin takılması INP skorunu doğrudan kırmızı bölgeye taşır ve arama sıralamalarını olumsuz etkiler.


1. INP Eşik Değerleri ve Süreç Bileşenleri

Core Web Vitals INP metriği nedir? Interaction to Next Paint ölçümü, eşik değerleri ve iyileştirme yöntemleri.

Google’ın belirlediği resmi INP performans sınırları:

[İyi (Good)] ─────────── 0 ms - 200 ms (Hedeflenen Aralık)
[Geliştirilmeli] ─────── 200 ms - 500 ms
[Zayıf (Poor)] ───────── 500 ms ve Üzeri (Sıralama Kaybı Riski)

Bir Etkileşimin 3 Aşamalı Anatomisi

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

  1. Giriş Gecikmesi (Input Delay): Kullanıcı tıkladıktan sonra tarayıcının JavaScript olay dinleyicisini (Event Listener) çalıştırmaya başlayana kadar geçen süre.
  2. İşleme Süresi (Processing Time): İlgili JavaScript kodunun (örn: filtreleme fonksiyonu) çalışıp bitme süresi.
  3. Sunum Gecikmesi (Presentation Delay): Kod bittikten sonra tarayıcının ekrandaki pikselleri yeniden çizmesi (Paint/Layout) için geçen süre.

2. INP Skorunu Düşüren 4 Temel Teknik Neden

HataSebepÇözüm Yöntemi
Uzun Görevler (Long Tasks)50ms’den uzun süren monolitik JavaScript blokları.yieldToMain() veya requestAnimationFrame ile görevleri bölmek.
Ağır Üçüncü Parti KodlarCanlı sohbet (Chatbot), reklam pikselleri ve ısı haritası scriptleri.Üçüncü parti scriptleri Web Worker’a taşımak (Partytown vb.).
Aşırı DOM Boyutu (Deep DOM Trees)Sayfada 1.500’den fazla DOM düğümü bulunması.Karmaşık DOM yapılarını sadeleştirmek, sanal listeleme (Virtual Scrolling) kurmak.
Gereksiz Eşzamanlı Render (React Re-renders)Tek bir state değişiminde tüm sayfa bileşenlerinin yeniden çizilmesi.useMemo, useCallback ve React 18 eşzamanlı özellikleri.

3. Kod Optimizasyonu: scheduler.yield() ile Görevleri Bölme

Ağır bir hesaplama veya filtreleme yaparken ana iş parçacığını (Main Thread) kilitlememek için modern JavaScript yield mekanizması kullanılır:

async function filterLargeProductCatalog(products) {
  for (let i = 0; i < products.length; i++) {
    // Ürünleri işle
    processProduct(products[i]);
    
    // Her 50 üründe bir tarayıcıya nefes aldır ve kullanıcı etkileşimini dinle
    if (i % 50 === 0 && 'scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    }
  }
}

Bu yöntem, kullanıcı filtreleme sırasında başka bir butona tıkladığında arayüzün anında tepki vermesini sağlayarak INP gecikmesini 50ms altına indirir.


Sıkça Sorulan Sorular

INP puanımı nereden ölçebilirim?

Google Search Console Önemli Web Verileri (Core Web Vitals) raporu ve PageSpeed Insights arayüzündeki gerçek kullanıcı verileri (CrUX - Chrome User Experience Report) üzerinden takip edilir.

Mobil INP skorları neden masaüstünden daha kötüdür?

Mobil cihazların işlemci gücü masaüstü bilgisayarlara göre daha sınırlıdır; bu nedenle aynı JavaScript kodu mobil cihazlarda 3-4 kat daha uzun işlem süresi yaratır.


Stratejik Sonuç

INP optimizasyonu, web sitenizin tepki süresini hızlandırarak kullanıcı memnuniyetini ve arama motoru sıralamalarını güvenceye alır. Mühendislik tabanlı performans iyileştirmeleri için Core Web Vitals optimizasyonu çözümlerimizi inceleyin.

İlgili Yazılar

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

Bu yazı faydalı oldu mu?