Optymalizacja INP: Jak przyspieszyć reakcję strony na działania użytkownika

Czym jest INP i dlaczego warto go optymalizować?

INP (Interaction to Next Paint) to wskaźnik mierzący czas od momentu, gdy użytkownik zainicjuje interakcję (np. kliknięcie, dotknięcie) do chwili, gdy przeglądarka wyświetli następną klatkę będącą wizualną odpowiedzią na tę interakcję. Im niższy INP, tym strona wydaje się bardziej responsywna. Dla dobrego wyniku INP powinien wynosić poniżej 200 milisekund .

Trzy fazy opóźnienia interakcji

Każdą interakcję można podzielić na trzy następujące po sobie części :

1. Opóźnienie wejścia (input delay) – „zaczyna się, gdy użytkownik inicjuje interakcję ze stroną, a kończy, gdy procedury obsługi zdarzeń dla tej interakcji zaczynają działać.”
2. Czas przetwarzania (processing duration) – „składa się z czasu potrzebnego na wykonanie procedur obsługi zdarzeń do końca.”
3. Opóźnienie prezentacji (presentation delay) – czas potrzebny przeglądarce na wyświetlenie następnej klatki zawierającej wizualny wynik interakcji.

Praktyczne zalecenia optymalizacyjne

Aby strona spełniała próg „dobrej” responsywności, należy dążyć do tego, aby „każda część interakcji była jak najkrótsza” . Poniżej znajdziesz konkretne wskazówki dla każdej fazy.

Optymalizacja opóźnienia wejścia (input delay)

Jeśli INP jest wysokie głównie z powodu dużego opóźnienia wejścia, oznacza to, że interakcja „mogła nie być bezpośrednią przyczyną powolnego INP” – winne są inne zadania zajmujące główny wątek przed rozpoczęciem procedur . Aby temu zaradzić, unikaj nadmiernej pracy głównego wątku w momencie, gdy użytkownicy próbują wchodzić w interakcję . Opóźnienia wejścia nigdy nie mogą być zerowe, ale możesz wpłynąć na to, jak długo trwają – kluczem jest znalezienie zadań blokujących wątek główny .

Optymalizacja czasu przetwarzania (processing duration)

Jeśli głównym problemem jest wysoki czas przetwarzania, to „procedury obsługi zdarzeń interakcji były bezpośrednią przyczyną powolnego INP” . Należy wtedy zmniejszyć ilość pracy wykonywanej w procedurach zdarzeń lub odroczyć jej wykonanie. Pamiętaj, że „każdy kod uruchomiony w dowolnym słuchaczu zdarzeń opóźni interakcję” . Dotyczy to nie tylko własnego kodu, ale także kodu z frameworków, bibliotek i skryptów zewnętrznych .

Optymalizacja opóźnienia prezentacji (presentation delay)

Gdy wysokie jest opóźnienie prezentacji, oznacza to, że po wykonaniu kodu procedury zdarzeń występuje opóźnienie w renderowaniu wyniku . Należy wtedy zbadać, co powoduje wolne działanie przeglądarki po zakończeniu procedur – może to być związane z nadmiernymi obliczeniami układu strony lub malowaniem. Niestety dostarczone materiały nie zawierają pełnego opisu tej fazy ani dokładnych zaleceń dotyczących jej remediacji.

Podsumowanie

Optymalizacja INP wymaga spojrzenia na cały proces interakcji: od momentu jej inicjacji, przez wykonanie kodu, aż po wyświetlenie wyniku. Skupiając się na skracaniu każdej z trzech faz, można znacząco poprawić responsywność strony i zapewnić lepsze wrażenia użytkownikom.