INP i Core Web Vitals w praktyce

Strona może szybko pokazać pierwszą treść, a mimo to reagować z opóźnieniem na kliknięcie. Dlatego kontrola wydajności nie kończy się na starcie ładowania. Sprawdzamy również zadania wykonywane później przez użytkownika.

Co pomaga ocenić INP

INP opisuje responsywność strony przy interakcjach użytkownika, takich jak kliknięcie, dotknięcie lub użycie klawiatury. W diagnozie wybieramy konkretne działania, które użytkownik odczuwa jako wolne, zamiast poprawiać przypadkowy fragment kodu.

Dokumentacja: web.dev.

Zacznij od scenariusza

Może to być otwarcie menu, dodanie produktu do koszyka albo rozwinięcie filtrów. Zapisujemy urządzenie, warunki i moment wystąpienia opóźnienia. Wynik pojedynczego testu nie zastępuje obrazu zachowania różnych użytkowników.

Znajdź pracę blokującą reakcję

Sprawdzamy, co aplikacja wykonuje w czasie interakcji: obliczenia, aktualizacje widoku i pracę skryptów. Poprawka powinna usuwać zbędny koszt albo zmieniać kolejność działań. Sama animacja oczekiwania nie rozwiązuje przyczyny.

Przykład rozbudowanego filtra

Jeżeli wybór jednej opcji przelicza całą listę kilka razy, analizujemy źródło powtórzeń. Po zmianie sprawdzamy szybkość reakcji i poprawność wyników. Nie uznajemy przyspieszenia za sukces, jeśli filtr pomija produkty lub pokazuje nieaktualne dane.

Odbiór i dalsza kontrola

Porównujemy ten sam scenariusz przed i po poprawce, a następnie obserwujemy dostępne dane z rzeczywistego użycia. Zachowujemy opis warunków testu. Nowy skrypt, komponent lub integracja powinny być ocenione także pod kątem wpływu na interakcje.