Коротко. INP показывает, сколько времени проходит от действия пользователя до видимой реакции. Хорошо — до 200 миллисекунд. Если больше, основной поток занят JavaScript или тяжёлой отрисовкой. Лечится не «оптимизацией картинок», а разгрузкой основного потока.
Как читать материал. Сначала найдите, какое действие тормозит, потом посмотрите, что происходит в обработчике. Нейросеть помогает разобрать профиль, но замеры снимаются в браузере.
Что такое INP
Interaction to Next Paint измеряет задержку между кликом, нажатием или вводом и следующим кадром, который увидел человек. Метрика берёт самое долгое взаимодействие за визит, но отбрасывает случайные выбросы.
Пороги:
- до 200 мс — хорошо;
- 200–500 мс — нужно улучшить;
- больше 500 мс — плохо.
Из чего складывается задержка
- Ввод. Браузер получил событие.
- Ожидание. Основной поток занят другой задачей.
- Обработка. Работают обработчики событий.
- Отрисовка. Браузер показал изменения.
Если обработчик короткий, а ждать приходится долго, проблема не в нём, а в других длинных задачах в основном потоке.
Как найти
В Chrome DevTools → Performance включите запись, повторите действие и найдите взаимодействие на таймлайне. DevTools покажет длинные задачи и время до следующего кадра.
В PageSpeed Insights смотрите полевые данные INP: они показывают реальные взаимодействия, а не синтетический клик.
PerformanceObserver.supportedEntryTypes.includes("event")Проверка в консоли показывает, поддерживает ли браузер Event Timing API — через него измеряют INP.
Классический путь. Запишите профиль действия и найдите длинную задачу до отрисовки.
С нейросетью. Отдайте список функций и тайминги, попросите найти тяжёлый участок.
Вот профиль взаимодействия: длительности задач и функции. Найди, что
блокирует поток до следующего кадра. Предложи три правки: разбить задачу,
отложить работу, убрать лишний обработчик. Не предлагай переписать всё.Проверка. Повторите запись после правки и сравните время до кадра.
Что исправлять
| Причина | Действие |
|---|---|
| Долгая задача | разбить на части, отложить некритичное |
| Много обработчиков | делегирование событий |
| Синхронный запрос | убрать, сделать асинхронно |
| Тяжёлый рендер | уменьшить DOM, виртуализировать список |
| Сторонние скрипты | отложить, ограничить, убрать лишние |
Помогает и облегчение старта: чем меньше JavaScript выполняется при загрузке, тем свободнее поток к первому клику.
Влияет ли это на SEO
INP входит в Core Web Vitals. Он не заменяет релевантность, но влияет на то, каким человек видит сайт.
Сайт, который «задумывается» после клика, теряет людей раньше, чем позиции.
Где помогает нейросеть
| Задача | Что делает модель | Что проверять руками |
|---|---|---|
| Разбор профиля | находит длинные задачи | таймлайн |
| Рефакторинг | предлагает разбиение | поведение |
| Аудит скриптов | находит лишние | реальная польза |
| План работ | приоритеты | влияние на UX |
Частые ошибки
- Оптимизировать картинки, когда тормозит JS.
- Ставить всё в один обработчик.
- Использовать синхронные запросы.
- Подключать тяжёлые виджеты без необходимости.
- Смотреть только среднее значение.
- Тестировать на мощном компьютере.
Вопросы
Какой INP считается хорошим?
До 200 миллисекунд.
Чем INP отличается от FID?
FID измерял только задержку ввода. INP учитывает весь путь до отрисовки.
Почему на моём компьютере быстро, а у клиентов медленно?
Разное железо и сеть. Смотрите полевые данные и тестируйте на слабом устройстве.
Может ли нейросеть ускорить INP?
Она предлагает правки в коде, но эффект подтверждается профилем.
Связанные материалы
Источники
Официальные документы 4
- web.dev: INPweb.dev
- web.dev: оптимизация INPweb.dev
- Google: page experiencedevelopers.google.com
- MDN: Event loopdeveloper.mozilla.org