Исправление INP: как избавиться от ощущения медлительности в React-приложениях
Ваша панель управления кажется медленной. Ваш API работает быстро. Lighthouse показывает зеленые показатели. И все же каждый клик сопровождается задержкой.
Это проблема INP.
Interaction to Next Paint (INP) измеряет время, которое требуется странице для ответа на действия пользователя. В марте 2024 года он заменил First Input Delay (FID). FID учитывал только самый первый клик, в то время как INP отслеживает каждое взаимодействие.
Показатель INP менее 200 мс воспринимается как быстрый. Более 500 мс — как медлительный.
Чтобы исправить INP, разделите его на три фазы:
- Input Delay (задержка ввода) — интервал между кликом и началом выполнения вашего кода. Она возникает, когда основной поток (main thread) занят.
- Processing Time (время обработки) — время выполнения ваших функций и обновлений состояния React.
- Presentation Delay (задержка отрисовки) — интервал между завершением выполнения кода и отрисовкой экрана браузером.
Исправление Input Delay
Длительные задачи блокируют основной поток. Если задача выполняется дольше 50 мс, она задерживает обработку кликов. Используйте scheduler.yield(), чтобы разбить длинные задачи на более мелкие фрагменты, позволяя браузеру обрабатывать клики между ними.
Исправление Processing Time
Используйте Transition API в React, чтобы интерфейс оставался отзывчивым.
startTransition— оборачивайте несрочные обновления. React сможет приостановить тяжелое обновление, чтобы обработать новый клик.useDeferredValue— откладывайте обновление значений, которые не требуют мгновенного изменения.
Эти API не ускоряют код, но делают его прерываемым, что снижает ваш INP.
Исправление Presentation Delay
Слишком большое количество элементов DOM замедляет отрисовку.
- Применяйте
content-visibility: autoв CSS, чтобы пропускать рендеринг элементов, находящихся за пределами экрана. - Избегайте layout thrashing (избыточных пересчетов макета): никогда не читайте и не записывайте стили в одном и том же цикле. Вместо этого группируйте операции чтения и записи.
- Используйте виртуализацию для длинных списков.
Как измерить
Lighthouse работает в лабораторных условиях и не может кликать по кнопкам, как реальный человек. Установите библиотеку web-vitals и собирайте реальные данные от ваших пользователей.