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

Джереми Вагнер

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

  • 96
  • 96
  • Икс
  • Икс

Источник

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

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

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

Таким образом, целью 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, который поможет вам выявить медленные взаимодействия в полевых условиях и использовать лабораторные данные, чтобы помочь вам выявить причины и оптимизировать их.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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