Naprawa INP: Jak sprawić, by aplikacje React nie wydawały się wolne

Twój dashboard wydaje się wolny. Twoje API jest szybkie. Lighthouse pokazuje zielone wyniki. A jednak każde kliknięcie ma opóźnienie.

To problem z INP.

Interaction to Next Paint (INP) mierzy, jak długo strona potrzebuje na zareagowanie na działanie użytkownika. W marcu 2024 r. zastąpił on First Input Delay (FID). FID brał pod uwagę tylko pierwsze kliknięcie; INP monitoruje każdą interakcję.

Wynik INP poniżej 200 ms jest odczuwany jako szybki. Powyżej 500 ms aplikacja wydaje się ociężała.

Aby naprawić INP, należy podzielić go na trzy fazy:

  • Input Delay – przerwa między kliknięciem a momentem, w którym uruchamia się Twój kod. Pojawia się, gdy wątek główny jest zajęty.
  • Processing Time – czas wykonywania funkcji i aktualizacji stanu React.
  • Presentation Delay – przerwa między zakończeniem wykonywania kodu a momentem, w którym przeglądarka odświeża ekran.

Naprawa Input Delay

Długie zadania blokują wątek główny. Jeśli zadanie trwa dłużej niż 50 ms, blokuje ono kliknięcia. Wywołaj scheduler.yield(), aby podzielić długie zadania na mniejsze części, dzięki czemu przeglądarka będzie mogła przetwarzać kliknięcia pomiędzy nimi.

Naprawa Processing Time

Użyj API React Transition, aby zachować responsywność interfejsu.

  • startTransition – opakowuje niepilne aktualizacje. React może wstrzymać ciężką aktualizację, aby obsłużyć nowe kliknięcie.
  • useDeferredValue – odracza wartości, które nie muszą być aktualizowane natychmiast.

Te API nie przyspieszają kodu; sprawiają jedynie, że jest on przerywalny, co obniża wynik INP.

Naprawa Presentation Delay

Zbyt duża liczba elementów DOM spowalnia renderowanie.

  • Zastosuj content-visibility: auto w CSS, aby pominąć renderowanie elementów znajdujących się poza ekranem.
  • Zapobiegnij layout thrashing: nigdy nie odczytuj stylu, a następnie nie zapisuj stylu w tej samej pętli. Zamiast tego grupuj operacje odczytu i zapisu.
  • Stosuj wirtualizację długich list.

Jak mierzyć

Lighthouse działa w warunkach laboratoryjnych i nie może klikać przycisków tak jak prawdziwy człowiek. Zainstaluj bibliotekę web-vitals i zbieraj rzeczywiste dane od swoich użytkowników.

Źródło: https://dev.to/ahmed_mahmoud360/fixing-inp-field-notes-on-interaction-to-next-paint-in-a-react-app-32fa