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

Jeremy Wagner

Данные об использовании 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 отличается от задержки первого входа (FID)?

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

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

Что делать, если значение INP не сообщается?

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

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

Как измерить INP

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

В поле

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

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

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

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

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

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

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

Как улучшить INP

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

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

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

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

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

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