Что измеряет INP
INP — время от действия пользователя (клик, касание, нажатие клавиши) до момента, когда страница показывает результат. Показатель учитывает все взаимодействия за время визита и отражает одно из самых медленных. Хорошим считается результат до 200 миллисекунд. Метрика пришла на смену прежней, которая оценивала только первое действие.
Из чего складывается задержка
Что вызывает медленный отклик
| Причина | Как проявляется | Что сделать |
|---|---|---|
| Длинные задачи JavaScript | Основной поток занят, клик ждёт своей очереди | Разбивать длинные задачи на короткие |
| Тяжёлый обработчик события | Слишком много вычислений сразу после клика | Выполнять только необходимое, остальное — отложить |
| Огромный DOM | Любое изменение перестраивает много элементов | Сокращать число элементов, разбивать длинные списки |
| Сторонние скрипты | Чужой код занимает поток в неподходящий момент | Загружать отложенно, оценить необходимость каждого |
| Тяжёлые стили и анимации | Долгая отрисовка после действия | Упрощать эффекты, использовать преобразования |
Как улучшить
- Найдите в лабораторном тесте самые долгие задачи и взаимодействия.
- Разбейте тяжёлую работу на части и уступайте основной поток между ними.
- Сократите объём JavaScript на странице: отложите и удалите неиспользуемое.
- Проверьте сторонние скрипты: аналитику, чаты, виджеты — часто они главный источник проблем.
- Проверяйте показатель на реальных устройствах: на медленных телефонах проблемы заметнее.
Простые улучшения с быстрым эффектом
- Показывать мгновенную реакцию (смену вида кнопки), а тяжёлую работу выполнять после.
- Не подключать скрипты «на всякий случай» на страницах, где они не нужны.
- Использовать для обработки событий типичные приёмы ограничения частоты.
Связь с индексацией: чем больше на странице JavaScript, тем сложнее её обработка и роботом: об этом — в статье про индексацию страниц, созданных JavaScript. Общий обзор метрик — в статье про Core Web Vitals.
Что учитывать на практике
| Взаимодействие | Ожидание пользователя |
|---|---|
| Нажатие на кнопку добавления в корзину | Немедленная визуальная реакция |
| Открытие меню или фильтра | Появление без заметной задержки |
| Ввод текста в поле | Символы появляются сразу, без «залипания» |
| Переключение вкладок | Мгновенный переход к содержимому |
Пример разбиения тяжёлой задачи
async function processItems(items) {
for (const item of items) {
handle(item);
// уступаем основной поток, чтобы страница могла отреагировать
await new Promise(resolve => setTimeout(resolve));
}
}Такая обработка не блокирует страницу надолго: между шагами браузер успевает ответить на действия пользователя.
Частые вопросы
Что измеряет INP?
Время от действия пользователя до момента, когда страница показывает результат; учитываются все взаимодействия за визит, а оценка отражает одно из самых медленных.
Какой INP считается хорошим?
До 200 миллисекунд; значения от 200 до 500 требуют улучшения, а выше 500 — плохой результат.
Что чаще всего вызывает плохой INP?
Длинные задачи JavaScript, тяжёлые обработчики событий, огромный DOM и сторонние скрипты, занимающие основной поток.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.