Хороший балл производительности Lighthouse не подтверждает быстрый отклик каждого меню, фильтра или действия оформления заказа. Загрузка страницы и взаимодействие с ней запускают разную работу. Если посетитель жалуется на медленный клик, воспроизведите это действие и измерьте его отдельно.
Уточните, какой результат перед вами
PageSpeed Insights может показывать на одном экране полевые данные и лабораторный отчёт Lighthouse. Разделяйте их. Полевой INP описывает зарегистрированный опыт пользователей за отчётный период. Лабораторный балл загрузки относится к конкретному прогону и не воспроизводит все последующие взаимодействия.
Запишите страницу, устройство, условия и точное действие. Укажите, нажали ли вы кнопку во время загрузки или после её завершения. Для загрузки используйте Speed Scanner, для исследования взаимодействий — INP Scanner. Один быстрый прогон или один медленный клик не описывает полевой результат всех посетителей.
Воспроизведите жалобу коротким сценарием
Составьте конкретную последовательность: открыть каталог, ввести текст в фильтр, раскрыть товар и добавить его в корзину. Начните с того типа устройства, на котором заметили проблему. Отметьте, возникает ли задержка при первом действии, после повторений или только на определённых данных.
Повторите сценарий до изменения кода. Посторонний запрос, расширение браузера или состояние кеша могут исказить единственное наблюдение. Ошибки и незавершённые прогоны сохраняйте отдельно от успешных измерений.
Изменение текста ещё не означает отрисовку
В учебном примере обработчик кнопки намеренно блокирует основной поток. Значение 400 мс задаёт искусственную задержку и не относится к измерению клиентского сайта.
<button id="run" type="button">Запустить</button>
<p id="result" role="status"></p>
<script>
const button = document.querySelector('#run');
const output = document.querySelector('#result');
button.addEventListener('click', () => {
output.textContent = 'Выполняется';
const end = performance.now() + 400;
while (performance.now() < end) {
// Искусственная работа только для этого примера.
}
output.textContent = 'Готово';
});
</script>
Запись слова «Выполняется» в DOM не заставляет браузер отрисовать его до завершения синхронной работы. Поэтому даже небольшой скачанный скрипт может вызвать неприятную задержку. Размер загрузки сам по себе не объясняет эту причину.
Разберите работу рядом с действием
Запишите сценарий в панели Performance. Посмотрите, что занимало основной поток перед событием, сколько выполнялся обработчик и что потребовалось для последующей отрисовки. Это разные направления поиска причины. Соответствующие части взаимодействия описаны в руководстве по оптимизации INP.
Не приписывайте весь длинный интервал нажатой кнопке. На задержку могут влиять общий обработчик, преобразование данных, посторонняя задача или большое обновление интерфейса. Проследите запись до ответственного участка кода. В статье INP и очереди сообщений JavaScript разобрана работа, которая выполняется рядом с событием.
Измените одну причину и повторите проверку
Выберите подтверждённую причину. Уберите ненужную работу, сократите обрабатываемые данные или разделите вычисление там, где это допускает приложение. Сам перенос работы в таймер или другой callback ещё не доказывает, что интерфейс стал отзывчивее. Браузер должен получить возможность показать полезное обновление.
Повторите тот же сценарий в сопоставимых условиях и убедитесь, что функция работает. Сравните запись взаимодействия и загрузку. Если код стал загружаться позже, проверьте первое использование функции: оно могло замедлиться, даже если начальная загрузка улучшилась.
Для повторяющейся проблемы сохраните сценарий и наблюдайте опубликованную страницу. По полевым данным проверяйте влияние изменения на настоящих посетителей. Исследуйте взаимодействие в Milten, затем повторите конкретное действие из жалобы.