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