Co to jest INP (Interaction to Next Paint) i jak go poprawić?

INP (Interaction to Next Paint) mierzy czas od momentu interakcji użytkownika do momentu, gdy przeglądarka wykona kolejny render, który odpowiada na tę interakcję. Krótko: im niższy INP, tym szybsza i płynniejsza odpowiedź interfejsu.

Co to jest INP i dlaczego ma znaczenie

• Definicja: INP to czas od interakcji użytkownika do najbliższego renderu, który odpowiada na tę interakcję.
• Znaczenie: wpływa na postrzeganą responsywność i komfort użytkowania.
• Zakres: obejmuje wszystkie interakcje na stronie, od kliknięć po dotyki i wpisy.

Czynniki wpływające na INP

• Długie zadania na głównym wątku (JavaScript, layout, paint).
• Blokujące skrypty i operacje blokujące rendering.
• Wiele interakcji bez szybkiej odpowiedzi.
• Third‑party scripts zużywające zasoby głównego wątku.
• Nierównomierne i złożone style, które powodują reflowy.
• Brak debouncingu/ throttlingu dla częstych zdarzeń (scroll, input).

Jak poprawić INP: praktyczny plan

1. Analizuj aktualny INP

   • Włącz Performance w Chrome DevTools i sprawdź Core Web Vitals.
   • Znajdź najdłuższe interakcje i najdłuższe zadania na głównym wątku.

2. Redukuj długie zadania

   • Rozbij operacje na mniejsze kawałki i wykonuj je w kolejnych frame’ach.
   • Używaj technik dzielenia pracy na mikrozadania (np. requestAnimationFrame).

3. Debounce i throttle interakcji

   • Ogranicz częstotliwość obsługi zdarzeń wysokiego przepływu (scroll, input, resize).

4. Offload ciężką pracę

   • Przenieś kosztowne przetwarzanie do Web Workera, jeśli to możliwe.

5. Minimalizuj blokujące zasoby

   • Ładuj JS nieblokująco (defer/async), używaj preload dla krytycznych zasobów.
   • Optymalizuj CSS i redukuj złożoność selektorów.

Redukuj zależności zewnętrzne

6. Redukuj zależności zewnętrzne

   • Ładuj skrypty stron trzecich asynchronicznie lub wyłącz niepotrzebne.

7. Poprawa renderowania i wczytywania

   • Inlineuj krytyczny CSS, lazy-loading niekrytych zasobów.
   • Stosuj code-splitting i dynamiczne importy modułów JS.

8. Testuj i waliduj

   • Po zmianach sprawdź INP w różnych urządzeniach i warunkach sieci.
   • Porównuj wynik z poprzednimi wersjami i utrzymuj budżet wydajności.

Narzędzia do monitorowania INP

• Performance panel w Chrome DevTools
• Chrome Lighthouse i PageSpeed Insights
• Narzędzia Real User Monitoring (RUM)

Wskazówki i pułapki

• Unikaj odświeżania dużych części interfejsu podczas interakcji.
• Uwzględniaj różnice między urządzeniami o ograniczonych zasobach.
• Sprawdzaj wpływ pojedynczych wątków i zewnętrznych skryptów na główny wątek.