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

Поддержка браузера

  • Хром: 96.
  • Край: 96.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Источник

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

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

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

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

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

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

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

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

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

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

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

Чтобы лучше оценить фактическую скорость отклика страниц с большим количеством взаимодействий, мы игнорируем одно наибольшее взаимодействие на каждые 50 взаимодействий. Подавляющее большинство страниц не имеют более 50 взаимодействий, поэтому чаще всего сообщается о худшем взаимодействии. Затем, как обычно, сообщается 75-й процентиль всех просмотров страниц, что дополнительно удаляет выбросы и дает значение, которое ощущает подавляющее большинство пользователей или лучше.

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

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

Что такое хороший балл INP?

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

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

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

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

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

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

В качестве целей ИЯФ наблюдаются только следующие виды взаимодействия:

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

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

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

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

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 .

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

Какова основная цель метрики INP?

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

Какие из следующих типов взаимодействия наблюдаются для целей расчета INP? (Выберите все, что подходит.)

Увеличение или уменьшение масштаба страницы.
Нажатие клавиши на клавиатуре.
Нажатие на сенсорный экран.
Наведение курсора мыши на элементы.
Кликаем мышкой.
Прокрутка страницы с помощью колеса мыши или трекпада.

Как определяется «задержка» взаимодействия для INP?

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

В чем разница между INP и FID?

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

При каких обстоятельствах данные INP могут быть недоступны для страницы в таких инструментах, как PageSpeed ​​Insights?

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

Какова наиболее эффективная стратегия воспроизведения медленных взаимодействий в лабораторных условиях?

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

Этот тест был создан в Gemini 1.5 и проверен людьми. Поделитесь своим отзывом