Проблемы INP: причины медленных взаимодействий и как их чинить
Interaction to Next Paint (INP) — метрика Core Web Vitals, измеряющая, как быстро страница отвечает на клики, тапы и нажатия клавиш. INP выше 200 мс ощущается как тормоза, выше 500 мс — как поломка.
Почти любой плохой INP сводится к одной из нескольких корневых причин. Каждый гид ниже разбирает одну причину: как её распознать, почему она возникает и как починить — с кодом.
Корневые причины
Долгий обработчик события блокирует главный поток и откладывает следующую отрисовку. Как найти тяжёлые обработчики и разбить их через scheduler.yield() или Web Workers.
Layout thrashing: многократные пересчёты макета в одном кадре и как их убратьЧередование чтений и записей DOM заставляет браузер пересчитывать макет снова и снова в одном кадре. Как батчить чтения и записи, чтобы починить INP.
Принудительный синхронный layout: чтение геометрии после записи в DOMЧтение offsetWidth или getBoundingClientRect сразу после изменения DOM заставляет браузер пересчитать макет внутри JS-задачи. Как это найти и починить.
Главный поток занят: большой input delay ещё до запуска обработчикаКогда главный поток занят другой длинной задачей, клики ждут в очереди до старта обработчика. Как найти и разбить блокирующую задачу, чтобы убрать input delay.
Сторонние скрипты блокируют взаимодействия: как диагностировать и изолироватьАналитика, реклама и чат-виджеты выполняют длинные задачи в вашем главном потоке и портят INP. Как атрибутировать длинные задачи третьим сторонам и изолировать их.
Каскад ре-рендеров React: когда один клик перерисовывает всё деревоОбновление состояния высоко в дереве React перерисовывает сотни компонентов на каждый клик. Как найти каскады рендеров и починить их через memo, useCallback и useTransition.