Что такое INP и почему это важно
INP — Interaction to Next Paint, время от клика/тапа до видимой реакции страницы. Заменил FID (First Input Delay) в марте 2024.
Пороги Google в 2026:
- Хорошо: < 200 мс
- Требует улучшения: 200–500 мс
- Плохо: > 500 мс
Если INP > 200 мс на 75-м перцентиле трафика — Google считает страницу медленной. И режет позиции в мобильной выдаче (где сейчас 75% трафика в РФ).
Где увидеть свои цифры
Самое быстрое — Google Search Console → раздел «Опыт» → Core Web Vitals. Там видно, какие URL «плохие» и по какой именно метрике. Альтернатива — PageSpeed Insights, но он измеряет одну страницу. Search Console показывает реальное поведение всех пользователей.
В Яндекс Вебмастере есть аналогичный раздел — «Качество сайта».
Топ-3 причины плохого INP
1. Тяжёлые JavaScript-обработчики
Самый частый виновник. Когда юзер кликает, браузер выполняет JS — и если это «жирный» скрипт (аналитика, чат-бот, A/B-тест), отрисовка зависает.
Что показать разработчику:
- Использовать Web Workers для тяжёлых задач
- Дебаунсить обработчики (особенно input/scroll)
- Лениво загружать сторонние скрипты (defer/async)
2. Долгий рендер React/Vue компонентов
Если каждый клик пересобирает огромное дерево — INP плохой. Решения:
- React.memo и useMemo для тяжёлых компонентов
- Виртуализация для длинных списков (react-window)
- Серверный рендеринг (SSR) вместо клиентского
3. Сторонние скрипты
Метрика, чаты, виджеты, рекомендации. Каждый добавляет 100–500 мс. Решение:
- Загружать только после первого взаимодействия
- Использовать Partytown — выносит сторонний JS в Web Worker
- Аудит и удаление того, что уже не используется
LCP — старая метрика, которая всё ещё важна
LCP (Largest Contentful Paint) — время до отрисовки самого большого элемента (обычно главного баннера). Целевая < 2.5 сек.
Главные виновники в 2026:
- Несжатые изображения. Решение: WebP/AVIF + responsive srcset
- Шрифты в @font-face без preload
- Render-blocking CSS
Чеклист «исправить за уикенд»
Передайте разработчику этот список:
- Включить HTTP/3 на сервере (часто одна галочка в Cloudflare).
- Конвертировать все картинки выше первого экрана в WebP.
- Добавить
loading="lazy"всем изображениям ниже первого экрана. - Перенести Яндекс.Метрику и Google Analytics в Partytown или загружать после
requestIdleCallback. - Проверить, что нет inline стилей в
<head>.
Эти 5 пунктов на типовом сайте дают +30–50% к скорости и переводят CWV из «плохо» в «хорошо» за 1–2 рабочих дня программиста.
Что это даёт в позициях
На моих проектах фикс CWV даёт прирост видимости от 8% до 25% в течение 4–8 недель после внедрения. Особенно сильно — на мобильных коммерческих запросах. По эффекту/затратам это, пожалуй, самый окупаемый кусок технического SEO.