Взаимодействие со следующей отрисовкой (INP)

Jeremy Wagner

Barry Pollard

Опубликовано: 6 мая 2022 г., Последнее обновление: 9 сентября 2025 г.

Данные об использовании Chrome показывают, что 90% времени пользователь проводит на странице после её загрузки. Поэтому важно тщательно измерять адаптивность на протяжении всего жизненного цикла страницы. Именно это оценивает метрика INP.

Хорошая отзывчивость означает, что страница быстро реагирует на взаимодействие. Когда страница реагирует на взаимодействие, браузер отображает визуальную обратную связь в следующем отрисовываемом кадре. Визуальная обратная связь сообщает, например, действительно ли добавляется товар в корзину онлайн-покупок, открылось ли мобильное навигационное меню, проходит ли сервер аутентификацию содержимого формы входа и т. д.

Некоторые взаимодействия, естественно, занимают больше времени, чем другие, но для особенно сложных взаимодействий важно быстро предоставить пользователю начальную визуальную обратную связь, чтобы сообщить ему о происходящем. Следующий кадр, который отрисует браузер, — это самая ранняя возможность сделать это.

Таким образом, целью INP является не измерение всех конечных эффектов взаимодействия (таких как сетевые запросы и обновления пользовательского интерфейса, вызванные другими асинхронными операциями), а измерение времени, в течение которого блокируется следующая отрисовка. Из-за задержки визуальной обратной связи у пользователей может сложиться впечатление, что страница реагирует недостаточно быстро, и INP был разработан, чтобы помочь разработчикам измерять этот аспект пользовательского опыта.

В следующем видео пример справа даёт мгновенную визуальную обратную связь при открытии аккордеона. В примере слева показана низкая отзывчивость и то, как она может негативно повлиять на пользовательский опыт.

В этом руководстве объясняется, как работает INP, как его измерять и указаны ресурсы для его улучшения.

Что такое ИНП?

INP — это метрика, которая оценивает общую скорость отклика страницы на действия пользователя, отслеживая задержку всех нажатий, касаний и действий с клавиатурой на протяжении всего времени пребывания пользователя на странице. Конечное значение INP представляет собой максимальное наблюдаемое взаимодействие без учёта выбросов.

Взаимодействие — это группа обработчиков событий, которые срабатывают при одном и том же логическом жесте пользователя. Например, взаимодействие «касание» на сенсорном устройстве включает несколько событий, таких как pointerup , pointerdown и click . Взаимодействие может управляться JavaScript, CSS, встроенными элементами управления браузера (например, элементами формы) или их комбинацией.

Задержка взаимодействия представляет собой наибольшую длительность группы обработчиков событий, управляющих взаимодействием, с момента начала взаимодействия пользователем до момента, когда браузер снова сможет отрисовать кадр. В редких случаях кадр для отрисовки может отсутствовать, но взаимодействие завершается, когда браузер сможет его отрисовать.

Какой показатель INP считается хорошим?

Сложно присвоить метрике отзывчивости такие определения, как «хорошо» или «плохо». С одной стороны, необходимо поощрять подходы к разработке, в которых приоритет отдаётся хорошей отзывчивости. С другой стороны, необходимо учитывать, что возможности устройств, используемых пользователями, значительно различаются, чтобы установить достижимые ожидания в отношении разработки.

Чтобы обеспечить пользователям хороший отклик, хорошим пороговым значением для измерения будет 75-й процентиль загрузок страниц, зафиксированных в реальных условиях, сегментированных по мобильным и настольным устройствам:

• Значение INP ниже или равное 200 миллисекундам означает, что страница имеет хорошую отзывчивость .
• Значение INP выше 200 миллисекунд и ниже или равно 500 миллисекундам означает, что скорость отклика страницы нуждается в улучшении .
• Значение INP выше 500 миллисекунд означает, что страница имеет низкую скорость отклика .

Что такое взаимодействие?

Основным драйвером интерактивности часто является JavaScript, хотя браузеры обеспечивают интерактивность посредством элементов управления, не основанных на JavaScript, таких как флажки, переключатели и элементы управления, основанные на CSS.

В качестве целей ИНП рассматриваются только следующие типы взаимодействия:

• Щелчок мышью.
• Нажатие на устройство с сенсорным экраном.
• Нажатие клавиши на физической или экранной клавиатуре.

Взаимодействие происходит в основном документе или во встроенных в него iframe-ах, например, при нажатии кнопки воспроизведения встроенного видео. Конечные пользователи не будут знать, что находится в iframe-е, поэтому для оценки пользовательского опыта на странице верхнего уровня необходимы INP-ы внутри iframe-ов. Поскольку веб-API JavaScript не имеют доступа к содержимому iframe-ов, это может проявляться в виде разницы между CrUX и RUM.

Взаимодействия могут состоять из нескольких событий. Например, нажатие клавиши включает события keydown , keypress и keyup . Взаимодействия касанием включают события pointerup и pointerdown . Событие с наибольшей длительностью в рамках взаимодействия вносит вклад в общую задержку взаимодействия.

Как показано на диаграмме, длительность обработки INP включает все обратные вызовы обработчиков событий в пределах данного кадра. Таким образом, задержка ввода — это время до обработки любого обратного вызова для взаимодействия, длительность обработки — это время выполнения всех обратных вызовов, а задержка представления — это время после выполнения обратных вызовов до отображения кадра на экране пользователя.

INP страницы рассчитывается, когда пользователь покидает её. Результат — единое значение, отражающее общую отзывчивость страницы на протяжении всего её жизненного цикла. Низкий INP означает, что страница стабильно реагировала на действия пользователя.

Чем INP отличается от задержки первого входа (FID)?

INP — это метрика, пришедшая на смену метрике First Input Delay (FID) . Хотя обе метрики являются показателями отзывчивости, FID измеряет только задержку ввода при первом взаимодействии на странице. INP улучшает FID, отслеживая все взаимодействия на странице, начиная с задержки ввода и заканчивая временем, необходимым для запуска обработчиков событий, и заканчивая отрисовкой браузером следующего кадра.

Эти различия означают, что INP и FID представляют собой разные типы метрик отзывчивости. FID был метрикой отзывчивости при загрузке , предназначенной для оценки первого впечатления пользователя от страницы, тогда как INP является более надёжным индикатором общей отзывчивости, независимо от того, на каком этапе жизненного цикла страницы происходит взаимодействие.

Что делать, если значение INP не указано?

Страница может не вернуть значение INP. Это может произойти по ряду причин, включая следующие:

• Страница была загружена, но пользователь не щелкнул, не коснулся и не нажал ни одной клавиши на клавиатуре.
• Страница загрузилась, но пользователь взаимодействовал с ней, используя жесты, которые не измеряются, например, прокрутку или наведение курсора на элементы.
• К странице обращается бот, например поисковый робот или headless-браузер, у которого нет скрипта для взаимодействия со страницей.

Как измерить ИНП

INP можно измерить как в полевых , так и в лабораторных условиях , что позволяет моделировать реалистичные взаимодействия с пользователем.

В поле

В идеале, ваш путь к оптимизации INP следует начинать с полевых данных. В лучшем случае полевые данные Real User Monitoring (RUM) предоставят вам не только значение INP страницы, но и контекстные данные, указывающие на то, какое конкретное взаимодействие повлияло на это значение, произошло ли оно во время или после загрузки страницы, тип взаимодействия (щелчок, нажатие клавиши или касание) и другие ценные временные характеристики, которые помогут вам определить, какая часть взаимодействия влияет на отзывчивость.

Если ваш сайт соответствует требованиям для включения в отчёт Chrome User Experience Report (CrUX) , вы можете быстро получить данные о INP через CrUX в PageSpeed ​​Insights (и других основных веб-показателях). Как минимум, вы можете получить представление об INP вашего сайта на уровне источника, но в некоторых случаях можно получить и данные на уровне URL.

Однако, хотя CrUX может определить наличие проблемы, он не может определить её причину. Решение RUM поможет вам получить более подробную информацию о страницах, пользователях или взаимодействиях, которые вызывают проблемы с откликом. Возможность соотнести INP с отдельными взаимодействиями позволяет избежать догадок и напрасных усилий.

В лаборатории

Оптимальным вариантом будет начать лабораторное тестирование, как только у вас появятся полевые данные, указывающие на медленное взаимодействие со страницей. Полевые данные значительно упростят воспроизведение проблемного взаимодействия в лабораторных условиях.

Однако вполне возможно, что у вас нет данных полевых исследований. Хотя INP можно измерить в некоторых лабораторных инструментах, итоговое значение INP для страницы во время лабораторного тестирования будет зависеть от того, какие взаимодействия были выполнены в течение периода измерения. Поведение пользователей может быть непредсказуемым и сильно изменчивым, а это означает, что ваше лабораторное тестирование может не выявить проблемные взаимодействия так же, как полевые данные. Кроме того, некоторые лабораторные инструменты не сообщают INP страницы, поскольку они отслеживают только её загрузку без каких-либо взаимодействий. В таких случаях общее время блокировки (TBT) может быть разумной метрикой-прокси для INP, но оно не заменяет INP как таковое.

Несмотря на ограничения лабораторных инструментов при оценке INP страницы, существует ряд стратегий для воспроизведения медленных взаимодействий в лабораторных условиях. Стратегии включают в себя отслеживание типичных пользовательских потоков и тестирование взаимодействий по ходу процесса, а также взаимодействие со страницей во время её загрузки — когда основной поток обычно наиболее загружен — для выявления медленных взаимодействий в этот критически важный момент пользовательского опыта.

Измерение INP в JavaScript

Чтобы измерить INP в JavaScript, необходимо измерить время событий для всех взаимодействий, а затем взять 98-й процентиль для всех этих взаимодействий при загрузке страницы. Вы можете обратиться к исходному коду JavaScript-библиотеки web vitals , где содержится справочная реализация расчета INP.

В большинстве случаев текущее значение INP на момент выгрузки страницы является окончательным значением INP для этой страницы, но есть несколько важных исключений, которые указаны в следующем разделе. Библиотека JavaScript web vitals учитывает их максимально полно, в рамках ограничений веб-API.

Различия между метрикой и API

• Записи event длительностью менее 104 миллисекунд по умолчанию не отслеживаются наблюдателями производительности. Это значение по умолчанию можно изменить, зарегистрировав наблюдатель производительности с помощью параметра durationThreshold , но даже для него минимальное значение составляет 16 миллисекунд. По этой причине рекомендуется также отслеживать запись first-input , которая также является записью времени события, но гарантированно отслеживается, даже если её длительность меньше durationThreshold . Это помогает гарантировать, что страницы с взаимодействиями всегда будут сообщать некоторое значение INP.
• Для идеального вычисления процентилей технически необходимо хранить все выборки в памяти, что может быть затратно. Но можно аппроксимировать процентили, особенно очень высокие, такие как p98, просто сохранив небольшой список взаимодействий с наихудшим N. Распространенный выбор — 10.
• Если страница восстанавливается из возвратного кэша , ее значение INP должно быть сброшено до нуля, поскольку пользователи воспринимают это как отдельное посещение страницы.
• API не сообщает записи event для взаимодействий, происходящих внутри iframe, но метрика это делает, поскольку они являются частью пользовательского опыта страницы. Это может проявляться в разнице между CrUX и RUM . Для корректного измерения INP следует учитывать эти данные. Подфреймы могут использовать API для передачи своих записей event-timing родительскому фрейму.

Помимо этих исключений, INP имеет некоторую дополнительную сложность из-за того, что он измеряет весь жизненный цикл страницы:

• Пользователи могут держать вкладку открытой очень долго — дни, недели, месяцы. Более того, пользователь может вообще не закрывать вкладку.
• В мобильных операционных системах браузеры обычно не выполняют обратные вызовы выгрузки страницы для фоновых вкладок, что затрудняет сообщение «конечного» значения.

Для обработки таких случаев значение INP должно сообщаться каждый раз, когда страница находится в фоновом режиме, а также при её выгрузке ( событие visibilitychange охватывает оба этих сценария). Аналитические системы, получающие эти данные, должны будут затем рассчитать окончательное значение INP на бэкенде.

Вместо того, чтобы запоминать и разбираться со всеми этими случаями самостоятельно, разработчики могут использовать библиотеку JavaScript web-vitals для измерения INP, которая учитывает все упомянутое ранее, за исключением случая iframe:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

Как улучшить ИНП

Доступен набор руководств по оптимизации INP, которые помогут вам в процессе выявления медленных взаимодействий в полевых условиях и использовании лабораторных данных для выявления причин и их оптимизации.

Журнал изменений

Иногда обнаруживаются ошибки в API, используемых для измерения метрик, а иногда и в определениях самих метрик. В результате иногда приходится вносить изменения, которые могут отражаться как улучшения, так и ухудшения во внутренних отчётах и ​​на панелях мониторинга.

Чтобы помочь вам справиться с этим, все изменения в реализации или определении этих показателей будут отображены в этом Журнале изменений .

Если у вас есть отзыв по этим показателям, отправьте его в группу Google web-vitals-feedback .

Проверьте свои знания