INP Nedir? Etkileşim Gecikmesi Nasıl Düşürülür?

INP, sayfanın kullanıcı etkileşimlerine ne kadar hızlı görsel yanıt verdiğini ölçer. Sayfanın hızlı açılması, menü veya arama düğmesinin hızlı tepki verdiğini garanti etmez.

1. Yavaş etkileşimi bulun

Chrome DevTools Performance kaydı alırken menü açın, filtre değiştirin, arama yapın. Uzun task ve event handler sürelerini inceleyin. Özellikle düşük güçlü mobil cihazda tekrar edin; güçlü masaüstü problemi gizleyebilir.

2. Büyük işi parçalara bölün

Binlerce satırı tek döngüde DOM'a eklemek yerine sayfalama/sanallaştırma kullanın. Zorunlu CPU işi küçük parçalarda işlenebilir:

async function processInChunks(items, handle) {
  for (let i = 0; i < items.length; i += 100) {
    const chunk = items.slice(i, i + 100);
    for (const item of chunk) handle(item);
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Bu örnek main thread'e aralık verir; tek handle çağrısı çok ağırsa yeterli değildir. CPU ağırlıklı saf hesaplama için Web Worker değerlendirin. Sonuçları bir kerede dev DOM'a basmayın.

3. Gereksiz dinleyicileri azaltın

Aynı butona tekrar tekrar listener eklenip eklenmediğini kontrol edin. Arama isteklerinde debounce ve eski isteği iptal etme kullanın; gecikmeyi öyle büyütmeyin ki arayüz hissedilir biçimde beklesin. Üçüncü taraf sohbet/analitik scriptlerinin uzun görevlerini ölçün.

4. Kullanıcıya erken yanıt verin

Buton basılınca uygun loading/disabled durumunu gösterin; iş bitince sonucu açıklayın. Bu, gerçek işi çözmenin yerine geçmez ama çift gönderimi azaltır. Hata halinde butonu yeniden kullanılabilir yapın.

Kontrol

İlk ve tekrar etkileşimleri ayrı test edin. JS değişikliği sonrası klavye, dokunmatik ve form gönderimlerinin çalıştığını doğrulayın. Laboratuvar etkileşim kaydı ile gerçek kullanıcı INP verisini birlikte izleyin.