Interaction to Next PaintINP

INP (Interaction to Next Paint) mierzy opóźnienie między interakcją użytkownika (kliknięcie, tap, naciśnięcie klawisza) a momentem, w którym przeglądarka renderuje wizualny efekt tej interakcji. W przeciwieństwie do swojego poprzednika FID (First Input Delay), który patrzył tylko na pierwszą interakcję, INP analizuje wszystkie interakcje w sesji i zachowuje najgorszą (na 98. percentylu). Stał się oficjalnie Core Web Vitals w marcu 2024, zastępując FID — wiele stron z dobrym FID znalazło się na czerwono w INP.

Progi Google: ≤ 200 ms = dobry, 200–500 ms = wymaga poprawy, > 500 ms = zły. Główny winowajca jest niemal zawsze ten sam: zbyt dużo JavaScriptu blokującego main thread. Gdy użytkownik klika, przeglądarka musi czekać, aż main thread się zwolni, zanim wykona handler, a następnie zrobi re-render. Jeśli masz potwornie ciężki skrypt analitics, framework hydratujący 200 komponentów przy załadowaniu albo źle napisane handlery scrollowania, INP się załamuje. Ciężkie SPA w React są pierwszymi ofiarami.

Naprawy: (1) redukcja rozmiaru dostarczanego JavaScriptu — tu RSC w Next.js błyszczy, wysyła się tylko to, co jest interaktywne, (2) odroczenie third-party (analytics, czat, A/B test) do fazy post-load, (3) dzielenie długich zadań przez `scheduler.yield()` lub web workers, (4) unikanie kaskady setState w jednym handlerze, (5) używanie komponentu Script z Next ze `strategy="lazyOnload"` dla niekrytycznych widgetów. INP to najtrudniejsza do naprawienia z trzech Core Web Vitals na istniejącej stronie — często jest impulsem do redesignu w postaci strony na zamówienie.