Привет, я Максим — веб-разработчик. С марта 2024 года Google заменил метрику FID (First Input Delay) на INP (Interaction to Next Paint) в составе Core Web Vitals. Яндекс тоже учитывает скорость отклика сайта при ранжировании. INP измеряет, как быстро сайт реагирует на действия пользователя: клики, тапы, нажатия клавиш. Если сайт «тормозит» при нажатии кнопки или открытии меню — INP плохой, и это влияет и на позиции, и на конверсию. Расскажу, что такое INP, как его измерить и как улучшить.
Что такое INP
INP (Interaction to Next Paint) — это метрика, которая измеряет задержку между действием пользователя (клик, тап, нажатие клавиши) и визуальным обновлением страницы в ответ на это действие.
Проще говоря: пользователь нажал кнопку «Добавить в корзину» — и сколько прошло времени до того, как он увидел реакцию (анимация кнопки, появление уведомления, обновление счётчика корзины). Если это произошло мгновенно (менее 200 мс) — отлично. Если через секунду — плохо.
В отличие от предыдущей метрики FID, которая измеряла задержку только первого взаимодействия, INP учитывает все взаимодействия на протяжении всего визита и берёт наихудшее (точнее — 98-й перцентиль). Это значит, что даже если первый клик был быстрым, а пятый — медленным, INP покажет проблему.
Пороговые значения
Хорошо: менее 200 мс. Требует улучшения: 200–500 мс. Плохо: более 500 мс.
Цель — держать INP ниже 200 мс для большинства пользователей (75-й перцентиль по данным CrUX — Chrome User Experience Report).
Как измерить INP
PageSpeed Insights
Заходите на pagespeed.web.dev, вводите URL — и видите оценку Core Web Vitals, включая INP. Данные берутся из реальных пользователей (CrUX) и лабораторных тестов.
Google Search Console
Раздел «Основные интернет-показатели» (Core Web Vitals) показывает INP по всем страницам сайта. Можно увидеть, какие страницы имеют проблемы.
Яндекс Вебмастер
Яндекс отображает данные о скорости загрузки в разделе «Диагностика» → «Скорость сайта». Хотя Яндекс не использует INP напрямую, он учитывает общую отзывчивость сайта.
Web Vitals Extension
Расширение для Chrome, которое показывает Core Web Vitals в реальном времени при просмотре страницы. Полезно для быстрой проверки.
Chrome DevTools (Performance)
Для глубокого анализа: откройте DevTools → вкладка Performance → запишите профиль во время взаимодействия с сайтом. Вы увидите, какие задачи JavaScript блокируют основной поток и замедляют отклик.
Что влияет на INP
Тяжёлый JavaScript
Главный враг INP — длинные задачи JavaScript (Long Tasks), которые блокируют основной поток браузера. Пока выполняется JS-задача длительностью 500 мс, браузер не может обработать клик пользователя.
Типичные причины: тяжёлые библиотеки (jQuery + плагины, аналитические скрипты, чат-виджеты), синхронная обработка данных (парсинг большого JSON, сложные вычисления), неоптимальный рендеринг (React/Vue без мемоизации, ререндер всего дерева компонентов при каждом действии).
Большой DOM
Если на странице 5 000+ DOM-элементов — любое обновление интерфейса (перерисовка) занимает больше времени. Браузеру нужно пересчитать стили, layout и перерисовать большое количество элементов.
Сторонние скрипты
Аналитика, рекламные пиксели, виджеты чатов, A/B-тесты, социальные кнопки — каждый сторонний скрипт добавляет нагрузку на основной поток. Они могут срабатывать в самый неудачный момент — когда пользователь кликает по кнопке.
Как улучшить INP
1. Разбивайте длинные задачи
Если JavaScript-задача выполняется 300+ мс — разбейте её на части. Используйте `setTimeout(fn, 0)`, `requestIdleCallback()` или `scheduler.yield()` (новый API) для передачи контроля обратно браузеру между фрагментами вычислений.
В React: используйте `React.memo()`, `useMemo()`, `useCallback()` для предотвращения ненужных ререндеров. В Next.js: серверные компоненты (React Server Components) снижают количество клиентского JS.
2. Отложите несрочные скрипты
Аналитика, чаты, рекламные пиксели — загружайте с атрибутом `defer` или `async`. Ещё лучше — загружайте их после завершения загрузки страницы и первого взаимодействия пользователя.
Скрипт Яндекс Метрики, например, можно загружать отложенно — через `setTimeout` после `DOMContentLoaded`. Это не повлияет на точность данных, но улучшит отзывчивость при первых кликах.
3. Уменьшите размер DOM
Удалите ненужные обёртки (div внутри div внутри div). Используйте виртуализацию для длинных списков (react-virtualized, react-window) — рендерите только видимые элементы. Ленивая загрузка контента: табы, аккордеоны, модальные окна — рендерите их при открытии, а не при загрузке страницы.
4. Оптимизируйте обработчики событий
Если обработчик клика выполняет тяжёлую операцию (фильтрация 10 000 товаров, сложный пересчёт) — выполняйте вычисления в Web Worker, а не в основном потоке. Web Worker работает в фоне и не блокирует интерфейс.
Для полей ввода с поиском — используйте debounce (задержку): не выполняйте поиск при каждом нажатии клавиши, а через 300 мс после последнего нажатия.
5. Используйте CSS-анимации вместо JS
CSS-анимации (`transform`, `opacity`) обрабатываются GPU и не блокируют основной поток. JS-анимации (изменение `width`, `height`, `margin` через JavaScript) — блокируют.
Пример: раскрытие меню. Плохо: JS вычисляет высоту и анимирует `height`. Хорошо: CSS `transform: scaleY()` или `max-height` с `transition`.
6. Оптимизируйте сторонние виджеты
Виджет онлайн-чата, callback-виджет, попапы — проверьте, не блокируют ли они основной поток при инициализации. Загружайте их отложенно: через 3–5 секунд после загрузки страницы или при первом скролле.
7. Серверный рендеринг (SSR)
Для React/Vue-приложений SSR (Next.js, Nuxt.js) снижает количество клиентского JavaScript. Часть работы выполняется на сервере, а клиенту отдаётся готовый HTML. Это уменьшает нагрузку на основной поток браузера и улучшает INP.
INP на мобильных устройствах
INP особенно критичен для мобильных. Процессоры смартфонов в 3–5 раз медленнее десктопных — задача, которая выполняется на компьютере за 100 мс, на телефоне займёт 300–500 мс.
Тестируйте INP на реальных мобильных устройствах (или в DevTools с включённым CPU throttling × 4). Если на десктопе INP = 100 мс, на мобильном может быть 400 мс — уже «плохо».
INP для типичных элементов сайта
Кнопка «Добавить в корзину». Должна реагировать мгновенно. Если при клике вы делаете AJAX-запрос и ждёте ответа сервера — сначала покажите визуальную реакцию (анимация кнопки, лоадер), а потом обновите данные.
Открытие мобильного меню. Если меню рендерится при клике (а не заранее) — может быть задержка. Рендерите меню в DOM заранее, скрывайте через CSS, показывайте по клику.
Фильтрация товаров. Если при каждом клике по фильтру пересчитывается каталог из 5 000 товаров — используйте Web Worker или серверную фильтрацию.
Переключение табов. Если контент таба загружается по клику через AJAX — покажите скелетон (skeleton screen) мгновенно, а контент подгрузите в фоне.
Типичные ошибки
Загрузка всех скриптов в `<head>` без defer. Блокирует парсинг HTML и задерживает первое взаимодействие. Перенесите скрипты в конец `<body>` или добавьте `defer`.
Тяжёлая аналитика на каждый клик. Каждый клик отправляет 5 событий в Метрику, GTM, CRM, чат и ещё куда-то. Батчите события или отправляйте асинхронно.
Неоптимизированный React. Ререндер всего компонентного дерева при любом изменении состояния. Используйте `React.memo`, `useMemo`, оптимизируйте контекст.
Огромные бандлы JS. Один файл bundle.js на 2 МБ — грузится и парсится долго. Разделяйте код (code splitting): загружайте только то, что нужно для текущей страницы.
Что я рекомендую
Проверьте INP вашего сайта через PageSpeed Insights прямо сейчас. Если он больше 200 мс — начинайте оптимизацию. Самые быстрые победы: отложенная загрузка сторонних скриптов (аналитика, чаты), добавление `defer` к неосновным скриптам, оптимизация обработчиков кликов (мгновенная визуальная реакция + отложенная обработка данных).
Для серьёзной работы — профилируйте сайт через Chrome DevTools Performance, найдите Long Tasks, разбейте их на части. Это техническая работа, но она напрямую влияет и на позиции в поиске, и на конверсию.
Нужна помощь с оптимизацией Core Web Vitals и INP — пишите. Проведу аудит производительности и предложу конкретные решения.