-
Данные
Полевой INP и устройство
-
Сценарий
Фильтр, корзина или меню
-
Причина
Задачи JavaScript и отрисовка
-
Приёмка
Повторить действия после релиза
Плохой INP означает, что страница слишком долго отвечает на действия пользователя. Человек нажимает фильтр, добавляет товар в корзину или открывает меню, а следующий видимый отклик задерживается. Начинайте с конкретного действия на конкретном устройстве: ускорение загрузки изображений само по себе не исправляет тяжёлый обработчик кнопки.
Что измеряет INP
Interaction to Next Paint оценивает задержку взаимодействий до следующей отрисовки. В неё входят ожидание начала обработки, выполнение обработчиков и подготовка кадра. Хорошим считается INP до 200 мс включительно, свыше 500 мс — плохим; оценку реальных посещений рассматривают по 75-му процентилю. Эти границы приведены в документации web.dev.
Метрика не равна времени полного выполнения любой бизнес-операции. Например, ответ API доставки может прийти позже, но интерфейс должен быстро показать, что действие принято, и не блокировать остальные элементы. Бесконечный спиннер тоже не решение: пользователь должен получить результат или понятную ошибку.
Сначала реальные данные, затем воспроизведение
В PageSpeed Insights отделяйте данные реальных пользователей от лабораторного теста. CrUX содержит агрегированные измерения подходящих посещений Chrome. Маленькая страница может не иметь собственной статистики; данные уровня сайта нельзя выдавать за измерение каждого URL.
Сохраните устройство, период и уровень агрегации. Выберите проблемные шаблоны: категория, карточка, корзина. Затем составьте маршрут действий. Например: открыть каталог → выбрать два фильтра → сменить сортировку → добавить товар → открыть корзину. Проверка только первого экрана не показывает, что происходит после минуты работы.
Запишите задержку в DevTools
- Откройте Performance и начните запись до проблемного действия.
- Воспроизведите сценарий с теми же данными и остановите запись.
- Найдите взаимодействие и длинные задачи на основном потоке.
- Определите, где ушло время: ожидание, JavaScript, расчёт стилей, layout или отрисовка.
- Повторите опыт на более слабом устройстве или с контролируемым замедлением процессора.
Сохраните трассу, URL, шаги и версию сборки. «На моём компьютере нормально» не является критерием приёмки. При этом одна тяжёлая лабораторная запись не доказывает, что все посетители испытывают ту же проблему.
Частые причины в магазине
| Сценарий | Что искать | Возможное исправление |
|---|---|---|
| Выбор фильтра | Пересборка огромного DOM, синхронная сортировка | Сократить обновляемую область, разделить вычисления |
| Добавление в корзину | Несколько обработчиков, тяжёлый виджет рекомендаций | Убрать дубли, отложить необязательную работу |
| Открытие меню | Чередование чтения размеров и изменения стилей | Сгруппировать операции, уменьшить перерасчёты |
| Любое нажатие после загрузки | Длинные задачи сторонних скриптов | Пересмотреть состав и время запуска интеграций |
Выбирайте исправление по записи, а не по списку модных технологий. Перенос вычислений в worker подходит не любой задаче; виртуализация списка требует сохранить доступность и поисковые ссылки. Удаление аналитики может улучшить замер ценой потери данных — такой компромисс нельзя делать незаметно.
Как сформулировать задачу разработчику
Плохая задача: «Поднять PageSpeed до зелёного». Рабочая: «На мобильной категории после выбора мощности зависает кнопка применения. В приложенной трассе основное время занимает пересоздание списка. Нужен быстрый визуальный отклик, сохранение выбранных фильтров и отсутствие повторных запросов при двойном нажатии».
Добавьте тестовую конфигурацию и критерии регрессии: фильтры работают с клавиатуры, фокус не теряется, счётчик товаров верен, ссылки остаются доступными, события аналитики не дублируются. Производительность — часть качества функции, а не отдельная цифра в презентации.
Приёмка после релиза
Повторите тот же сценарий и сравните трассы. Проверьте не только среднее время, но и редкие тяжёлые состояния: большое число товаров, открытые виджеты, возвращение на страницу. Затем отслеживайте реальные данные. Скользящее окно статистики не обновляется целиком в момент деплоя, поэтому на следующий день оно ещё включает старую версию.
Зафиксируйте дату релиза и долю посетителей новой версии. Если лабораторный результат улучшился, а полевые показатели нет, проверьте охват исправления, кеш, устройства и другие взаимодействия. Не повторяйте оптимизацию вслепую.
Как поставить задачу по INP без спора о баллах
Опишите проблемное действие так, чтобы разработчик мог его повторить: адрес, устройство, браузер, состояние авторизации, объём корзины и последовательность нажатий. Формулировка «сайт тормозит» не даёт точки измерения. Гораздо полезнее запись: после выбора второго фильтра кнопка не реагирует, а обновление списка начинается с заметной задержкой.
Снимите несколько записей одного сценария. Разделите первый запуск после загрузки и повторное взаимодействие, когда данные уже получены. Проверьте, не совпадает ли задержка с работой стороннего виджета, обновлением большого списка или тяжёлым вычислением. Один удачный прогон на мощном компьютере не опровергает проблему посетителей на слабых телефонах.
В техническом задании фиксируйте найденную причину и ожидаемое изменение. Это может быть сокращение синхронной работы обработчика, разделение задачи, уменьшение объёма обновляемого DOM или перенос вычисления. Выбирать решение надо по записи производительности: универсальное подключение библиотеки оптимизации может добавить работы и никак не изменить проблемное действие.
После исправления повторите исходные условия, затем проверьте соседние сценарии. Быстрый фильтр бесполезен, если теперь сбрасывается выбранный размер или теряется позиция списка. Для корзины важны не только отзывчивость, но и корректные суммы, доступность кнопок и завершение заказа. Регрессионная проверка должна сохранять эту функциональность.
Для итогового отчёта разделите лабораторную проверку конкретного действия и полевые данные за период. Укажите дату внедрения, перечень изменённых шаблонов и ограничения выборки. Если данных CrUX для страницы недостаточно, прямо используйте другой доступный источник измерений и не выдавайте несколько локальных запусков за опыт всей аудитории сайта.
Частые вопросы
Почему Lighthouse быстрый, а INP плохой?
Обычный тест загрузки не повторяет все пользовательские действия. Нужна запись сценария и сопоставление с реальными посещениями.
Исправление INP сразу поднимет позиции?
Быстрый отклик полезен пользователям, но ранжирование зависит и от содержания, предложения и других сигналов. Проверяйте отдельно удобство, конверсию и поисковые показатели.
