INP
Определение: INP (Interaction to Next Paint) — это метрика отзывчивости страницы: она показывает, насколько быстро сайт реагирует на действия пользователя (клик, тап, ввод) и успевает отрисовать следующий видимый результат. Если после нажатия кнопки ничего не происходит или есть заметная задержка, INP ухудшается.
Зачем это нужно
- Понимать, насколько “живой” сайт: быстро ли интерфейс отвечает на клики и ввод.
- Улучшать Core Web Vitals: INP — ключевая метрика интерактивности и отзывчивости.
- Находить тормоза в Jav * aScript: длинные задачи, тяжёлые обработчики событий, лишние перерисовки.
- Снижать раздражение пользователей: задержки ведут к повторным кликам и ошибкам.
- Повышать конверсию: быстрее реакция — легче оформить заказ/заявку.
- Контролировать качество после изменений: новые виджеты и трекеры часто ухудшают отзывчивость.
Пример
Пример кода:
// Пример: делаем обработчик клика “лёгким”, а тяжёлую работу откладываем
const button = document.getElementById('buyBtn');
button.addEventListener('click', () => {
// Быстрая реакция для пользователя (сразу меняем UI)
button.textContent = 'Добавляем...';
button.disabled = true;
// Тяжёлые действия откладываем, чтобы не блокировать отрисовку
setTimeout(() => {
button.textContent = 'Добавлено';
}, 0);
});
Скриншот
Подпись к скриншоту: DevTools “Performance”: показать long tasks в main thread и как они ухудшают отзывчивость (INP)
Частые ошибки
- Делать тяжёлую работу прямо в обработчике события (парсинг, большие циклы, сложные вычисления).
- Выполнять много изменений DOM подряд без необходимости, провоцируя лишние перерисовки.
- Подключать “тяжёлые” библиотеки и виджеты на всех страницах, даже где они не нужны.
- Не использовать разделение кода (code splitting) и загружать лишний JS сразу.
- Не показывать моментальную обратную связь (loading/disabled), из-за чего кажется, что сайт завис.
Связанные термины
Наши услуги
- Доработка сайтов — найдём, что “тормозит” клики и ввод, оптимизируем JS и интерфейс под хорошие INP.
- SEO-продвижение сайтов — улучшим технические метрики и качество страниц, включая Core Web Vitals.
- Техническая поддержка сайта — контролируем скорость и отзывчивость после обновлений, чтобы метрики не проседали.