Как улучшить INP и ускорить отклик сайта на действия

Что такое INP и как он измеряется

INP (Interaction to Next Paint) — метрика Core Web Vitals, которая оценивает отзывчивость страницы. Она берёт все клики, тапы и нажатия клавиш за визит и показывает одно из самых медленных взаимодействий. Хорошим считается значение до 200 мс, больше 500 мс — плохо.

Каждое взаимодействие состоит из трёх частей:

Прокрутка и наведение мыши в INP не входят. Метрика собирается по реальным пользователям, поэтому лабораторный тест загрузки её не покажет.

Как найти медленные взаимодействия

1. Search Console → Core Web Vitals — какие группы страниц имеют проблему с INP.
2. PageSpeed Insights — полевое значение INP для конкретного URL.
3. Chrome DevTools → Performance — включите замедление CPU (4x или 6x), запишите сессию и повторите действие: клик по фильтру, открытие меню, ввод в поиск. В дорожке Interactions видно длительность и разбивку по фазам.
4. RUM-сбор — библиотека web-vitals позволяет отправлять INP с указанием элемента в вашу аналитику. Так вы узнаете, какая именно кнопка тормозит у реальных пользователей.

import { onINP } from 'web-vitals/attribution';

onINP(({ value, attribution }) => {
  console.log(value, attribution.interactionTarget);
});

Тестируйте на слабых устройствах: на мощном ноутбуке проблемы часто не видны.

Как исправить длинные задачи

Длинная задача — любой блок JavaScript дольше 50 мс. Пока он выполняется, браузер не реагирует на ввод.

• Разбивайте работу на части и отдавайте управление браузеру между ними. Современный способ — scheduler.yield(), запасной вариант — setTimeout(resolve, 0).
• Сначала обновите интерфейс, потом считайте. Покажите реакцию на клик (индикатор, смену состояния), а аналитику, сохранение и тяжёлые вычисления выполните после.
• Выносите вычисления в Web Worker — сортировка больших массивов, парсинг, обработка данных.
• Используйте debounce для ввода в поиск и фильтров, чтобы не запускать запрос на каждую букву.

async function handleClick() {
  showSpinner();
  await scheduler.yield();
  runHeavyWork();
}

Проверьте поддержку scheduler.yield() в целевых браузерах и добавьте запасной вариант.

Сторонние скрипты

Чаты, пиксели, тег-менеджеры, A/B-тесты и виджеты занимают главный поток в тот момент, когда пользователь пытается что-то нажать.

• Проведите аудит: в DevTools на вкладке Performance сгруппируйте время по доменам.
• Удалите то, чем никто не пользуется.
• Загружайте некритичное с defer или после первого взаимодействия.
• Чат-виджет показывайте как лёгкую кнопку и подгружайте полностью по клику.

Дорогие перерисовки

Даже быстрый обработчик может вызвать долгую отрисовку.

• Уменьшайте DOM. Тысячи узлов делают пересчёт стилей дорогим. Длинные списки виртуализируйте.
• В React избегайте лишних ререндеров: держите состояние ближе к месту использования, применяйте memo и для несрочных обновлений — useTransition.
• Избегайте layout thrashing — чередования чтения размеров (offsetHeight) и записи стилей в цикле.
• Используйте content-visibility: auto для блоков вне экрана.

Частые ошибки

• Оптимизировать только загрузку и игнорировать работу после неё.
• Проверять на мощном компьютере без замедления CPU.
• Добавлять скрипты через тег-менеджер без контроля их стоимости.