Co oznacza INP dla osoby korzystającej ze strony?
INP, czyli Interaction to Next Paint, opisuje czas od działania użytkownika do chwili, gdy przeglądarka może pokazać wynik tej interakcji na ekranie. Dotyczy między innymi kliknięć, dotknięć i użycia klawiatury. Jeśli ktoś naciska „Dodaj do koszyka”, a zmiana licznika produktów pojawia się dopiero po wyraźnej pauzie, ma do czynienia z opóźnioną reakcją interfejsu. Podobnie jest wtedy, gdy wpisywanie tekstu w wyszukiwarce sprawia wrażenie zacinającego się.
INP nie jest czasem wczytania całej strony ani pomiarem jednego, wybranego przycisku. Uwzględnia interakcje podczas korzystania z witryny i odzwierciedla jedną z najwolniejszych reakcji. Dlatego strona, która szybko pokazuje pierwszą treść, nadal może być niewygodna w obsłudze. Warto badać nie tylko ekran startowy, lecz także menu, filtry, formularze i inne elementy używane po załadowaniu strony.
Z czego składa się opóźnienie interakcji?
Pierwsza część opóźnienia pojawia się, gdy przeglądarka nie może od razu zająć się działaniem użytkownika. Często wykonuje wtedy inne zadanie, na przykład długi fragment JavaScriptu. Następnie uruchamia kod przypisany do kliknięcia lub klawisza. Jeśli ten kod przelicza wiele danych, przegląda dużą część dokumentu albo wywołuje kolejne kosztowne operacje, reakcja znów się wydłuża. Na końcu przeglądarka musi jeszcze obliczyć i narysować zmiany w interfejsie.
Wyobraź sobie sklep, w którym zaznaczenie filtra uruchamia jednocześnie sortowanie całej listy produktów, przebudowę wielu elementów strony i zapis stanu w kilku skryptach. Nawet jeśli samo kliknięcie zostało wykryte od razu, widoczny wynik może nadejść późno. Poprawa INP wymaga więc ustalenia, czy czas ucieka przed obsługą zdarzenia, w trakcie działania kodu, czy podczas aktualizacji widoku.
Jak znaleźć interakcję, która sprawia problem?
Zacznij od odtworzenia typowych działań na rzeczywistej podstronie: otwórz menu, użyj filtrów, wpisz zapytanie, rozwiń sekcję i wyślij formularz testowy. Sprawdź także stronę po dłuższym korzystaniu, gdy załadowały się dodatkowe elementy. Zapisz, przy którym działaniu interfejs zwleka oraz czy problem występuje głównie na telefonie, na komputerze, czy na obu urządzeniach.
Narzędzia deweloperskie przeglądarki pozwalają nagrać przebieg interakcji i obejrzeć zadania wykonywane na głównym wątku, czas obsługi zdarzenia oraz prace związane z wyświetleniem zmian. Jeśli masz dostęp do pomiarów z wizyt użytkowników, zestaw je z własnymi testami. Pojedyncze nagranie pomaga znaleźć przyczynę konkretnego zacięcia, ale nie musi odpowiadać doświadczeniu wszystkich odwiedzających. Porównuj podobne podstrony i scenariusze, zamiast oceniać całą witrynę po jednym kliknięciu.
Co zwykle pomaga skrócić czas reakcji?
Najpierw ogranicz pracę wykonywaną bezpośrednio po działaniu użytkownika. Przycisk może szybko pokazać zmianę stanu, a mniej pilne obliczenia wykonać później, jeśli nie są potrzebne do poprawnego działania funkcji. Duże zadania JavaScriptu warto dzielić na mniejsze części, aby przeglądarka miała okazję obsłużyć kolejne działania i odświeżyć ekran. W formularzu z podpowiedziami nie trzeba przeliczać całej listy wyników po każdym naciśnięciu klawisza, jeżeli można uprościć obliczenia lub ograniczyć częstotliwość kosztownych aktualizacji.
Przyjrzyj się też temu, ile elementów strony zmienia jedna interakcja. Aktualizowanie całej listy produktów, gdy zmienił się tylko licznik, może tworzyć niepotrzebną pracę. Rozbudowany dokument, skomplikowane style i częste odczyty wymiarów elementów połączone ze zmianami wyglądu mogą dodatkowo opóźniać rysowanie. Uproszczenie komponentu lub aktualizowanie tylko potrzebnego fragmentu bywa skuteczniejsze niż samo zmniejszenie rozmiaru plików.
Nie pomijaj skryptów dodanych przez zewnętrzne usługi. Widżet, moduł analityczny czy narzędzie do personalizacji może zajmować główny wątek w chwili kliknięcia. Nie oznacza to, że każdy taki skrypt trzeba usuwać. Sprawdź jednak, czy jest potrzebny na danej podstronie, kiedy się uruchamia i czy jego działanie można ograniczyć bez utraty ważnej funkcji.
Krótka lista kontrolna przed i po zmianach
Wybierz kilka ważnych interakcji i dla każdej zanotuj oczekiwany wynik oraz zauważone opóźnienie. Nagraj powolny przypadek, wskaż najdłuższe zadania i sprawdź, jaki kod oraz jakie zmiany widoku uruchamiają. Następnie popraw jedną przyczynę naraz: usuń zbędną pracę, uprość aktualizację interfejsu albo odłóż operacje, które nie muszą blokować reakcji.
Po wdrożeniu powtórz te same działania, zwłaszcza na słabszym urządzeniu. Sprawdź nie tylko szybkość, lecz także poprawność działania: filtr powinien pokazywać właściwe wyniki, formularz zachować wpisany tekst, a przycisk nie może sugerować zakończenia operacji, która nadal trwa. Celem jest interfejs, który reaguje sprawnie i przewidywalnie, bez ukrywania problemów za pozornie szybką animacją.
