Logo David Burdelak
Słownik · Web development

Co to jest Interaction to Next Paint (INP)?

Ostatnia aktualizacja:

INP (Interaction to Next Paint) mierzy opóźnienie między interakcją użytkownika (kliknięciem, stuknięciem, naciśnięciem klawisza) a następną aktualizacją obrazu. Dobry wynik to nie więcej niż 200 milisekund. W marcu 2024 roku zastąpił wskaźnik FID.

Co pogarsza INP?

  • długie zadania JavaScript blokujące główny wątek,
  • duże drzewo DOM,
  • ciężkie skrypty zewnętrzne (reklamy, czaty, tagi),
  • kosztowna hydratacja.

Jak poprawić INP?

Dziel długie zadania, odkładaj niekrytyczny kod, ogranicz skrypty zewnętrzne i upraszczaj obsługę zdarzeń. Interakcje można profilować w zakładce Performance narzędzi deweloperskich.

Jak mierzyć i szukać winowajców

Raport Core Web Vitals w Search Console pokazuje grupy stron z wolnymi interakcjami, a w Chrome DevTools profilowanie zakładki Performance wskazuje, które zadania i skrypty trwają najdłużej. Biblioteka web-vitals z atrybucją loguje, który element i która faza (opóźnienie, przetwarzanie, prezentacja) odpowiada za wynik. Często problemem są tagi analityczne, czaty i karuzele.

Czym INP różni się od FID?

FID mierzył tylko opóźnienie pierwszej interakcji. INP uwzględnia wszystkie interakcje w trakcie wizyty i raportuje jedną z najgorszych.

Zobacz w praktyce

Powiązane pojęcia

Wszystkie hasła z kategorii Web development