INP (Interaction to Next Paint) Nedir?
Kısa tanım
INP (Interaction to Next Paint), kullanıcının sayfadaki tıklama, dokunma ve klavye etkileşimlerinden sonra ekranda bir sonraki görsel güncellemenin ne kadar gecikmeyle geldiğini ölçen Core Web Vitals metriğidir. Sayfa ömrü boyunca gözlenen etkileşimlerin en yavaşlarından biri raporlanır. 200 milisaniye ve altı iyi, 500 milisaniyenin üzeri zayıf kabul edilir; Mart 2024'te FID'in yerini almıştır.
Diğer adları: Interaction to Next Paint, Etkileşimden Sonraki Boyama, Sonraki Boyamaya Kadar Etkileşim
FID'den neden vazgeçildi?
INP'den önce etkileşim metriği FID'di (First Input Delay). FID yalnızca ilk etkileşimin, tarayıcı olay işleyicisini çalıştırmaya başlayana kadar beklediği süreyi ölçüyordu. Olay işleyicinin kendisi ne kadar uzun sürerse sürsün, ekranın ne zaman güncellendiğini ve sonraki etkileşimleri hesaba katmıyordu. INP, Mart 2024'te FID'in yerine geçti ve sayfadaki tüm uygun etkileşimleri baştan sona ölçer.
Neyi ölçer, neyi ölçmez?
Hesaba katılan etkileşimler fare tıklaması, dokunmatik ekranda dokunma ve fiziksel ya da ekran klavyesinde tuşa basmadır. Fareyle üzerine gelme (hover) ve kaydırma INP'ye dahil değildir. Çok sayıda etkileşim olan sayfalarda, istisnai bir anın sonucu bozmaması için her 50 etkileşimde en yavaş olan bir tanesi göz ardı edilir; kalanların en yavaşı raporlanır.
Bir etkileşimin üç aşaması
| Aşama | Tipik neden |
|---|---|
| Girdi gecikmesi (input delay) | Ana iş parçacığının o sırada başka bir uzun görevle meşgul olması |
| İşleme süresi (processing duration) | Olay işleyicilerinin kendisinin ağır olması |
| Sunum gecikmesi (presentation delay) | Büyük bir DOM güncellemesi, yeniden düzen ve boyama maliyeti |
Kullanıcı açısından önemli olan toplam süredir: tıklama ile ekranda bir değişiklik görmek arasındaki an. Düğmeye basıldığında hiçbir şey olmuyormuş gibi görünen sayfa, sonunda doğru sonucu gösterse bile kötü bir INP alır.
INP'yi kötüleştiren tipik durumlar
- Sayfa yüklenirken çalışan büyük JavaScript paketleri ve hydration işlemleri; kullanıcı bu sırada tıklarsa girdi bekler.
- Tek bir olay işleyicide hem veri işleme, hem analitik gönderimi, hem de arayüz güncellemesi yapmak.
- Her tuş vuruşunda büyük listeleri yeniden çizen arama ve filtre kutuları.
- Ana iş parçacığını meşgul eden üçüncü taraf etiketler: sohbet widget'ları, reklam ve takip kodları.
İyileştirme yaklaşımı
Amaç, kullanıcıya önce görsel geri bildirimi göstermek, ağır işi ise sonraya bırakmak ya da parçalara bölmektir.
button.addEventListener("click", async () => {
button.classList.add("yukleniyor"); // önce anında görsel tepki
await new Promise((r) => setTimeout(r, 0)); // ana iş parçacığını serbest bırak
filtreleriUygula(); // ağır iş bir sonraki görevde
});- Uzun görevleri bölün; destekleyen tarayıcılarda
scheduler.yield()bu iş için tasarlanmıştır. - Kullanılmayan JavaScript'i azaltın, kritik olmayan kodu etkileşimden sonra yükleyin.
- DOM boyutunu makul tutun ve yalnızca değişen kısmı güncelleyin.
- Arama kutularında girişi geciktirerek (debounce) her tuşta ağır iş yapmayın.
Nasıl ölçülür?
INP gerçek etkileşim gerektirdiği için asıl kaynak saha verisidir: Search Console'daki Core Web Vitals raporu, PageSpeed Insights'ın saha bölümü veya web-vitals kütüphanesiyle toplanan kendi kullanıcı verileriniz. Laboratuvar araçlarındaki Total Blocking Time yalnızca yaklaşık bir göstergedir. Chrome DevTools'ta bir etkileşimi kaydedip üç aşamanın her birinin süresini görebilirsiniz. Ayrıntılar için web.dev INP rehberine bakın.