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
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)}$$
- 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.
- İşleme Süresi (Processing Time): İlgili JavaScript kodunun (örn: filtreleme fonksiyonu) çalışıp bitme süresi.
- 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
| Hata | Sebep | Çö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 Kodlar | Canlı 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
- Core Web Vitals INP (Interaction to Next Paint) Rehberi
- Core Web Vitals Nedir? 2026 Optimizasyon Rehberi
- Deep Web ve SEO: İndekslenemeyen Web Katmanları ve Arama Motoru Botları
- Web Sitesi Optimizasyonunda Yapay Zeka: Dönüşüm (CRO) ve Otomatik A/B Testleri
- Diş Kliniği SEO: Google Haritalar ve Web Sitesini Birlikte Güçlendirme
Daha kapsamlı destek için: SEO Danışmanlığı hizmetimize göz atın.