Взаимодействие с следующей отрисовкой (INP) — это стабильная метрика Core Web Vital, которая оценивает скорость реагирования страницы с использованием данных из API синхронизации событий. INP отслеживает задержку всех взаимодействий щелчков, касаний и клавиатуры со страницей на протяжении всего ее существования и сообщает о самой продолжительной продолжительности, игнорируя выбросы. Низкий INP означает, что страница постоянно способна быстро реагировать на подавляющее большинство взаимодействий пользователя.
Хорошая отзывчивость означает, что страница быстро реагирует на взаимодействия. Когда страница отвечает на взаимодействие, браузер представляет визуальную обратную связь в следующем кадре, который он отображает, чтобы показать, что взаимодействие было успешным. Например, он может предоставить обратную связь по следующим вопросам:
- Действительно ли товар, который вы добавляете в онлайн-корзину, добавляется.
- Открылось ли меню мобильной навигации.
- Проходит ли сервер аутентификацию содержимого имени входа.
Некоторые взаимодействия, естественно, занимают больше времени, чем другие, но для особенно сложных взаимодействий важно быстро предоставить некую первоначальную визуальную обратную связь, чтобы сообщить пользователю, что что-то происходит. Время до следующей покраски — самая ранняя возможность сделать это. Таким образом, цель INP — измерить не все возможные последствия взаимодействия (например, выборку данных из сети и обновление пользовательского интерфейса от других асинхронных операций), а время, в течение которого следующая отрисовка блокируется. Задерживая визуальную обратную связь, вы заставляете пользователей думать, что страница не реагирует на их действия.
Цель INP — минимизировать время с момента, когда пользователь инициирует взаимодействие, до момента рисования следующего кадра для всех или большинства взаимодействий, инициируемых пользователем.
INP рассчитывается путем наблюдения за всеми взаимодействиями со страницей. Для большинства сайтов взаимодействие с наибольшей задержкой обозначается как INP. Однако на страницах с большим количеством взаимодействий случайные сбои могут привести к необычно высокой задержке взаимодействия на отзывчивом сайте. Чем больше взаимодействий, тем больше вероятность того, что это произойдет. Чтобы противостоять этому и лучше оценить фактическую скорость реагирования для этих типов страниц, мы игнорируем одно наибольшее взаимодействие на каждые 50 взаимодействий. Поскольку подавляющее большинство страниц не имеют более 50 взаимодействий, браузер почти всегда сообщает о худшем взаимодействии. Затем, как обычно, сообщается 75-й процентиль всех просмотров страниц, что дополнительно удаляет выбросы, чтобы получить значение, более репрезентативное для общего пользовательского опыта.
Взаимодействие — это группа обработчиков событий, которые срабатывают во время одного и того же логического жеста пользователя. Например, взаимодействия «касание» на устройстве с сенсорным экраном включают в себя несколько событий, таких как pointerup , pointerdown и click . Взаимодействие может осуществляться с помощью JavaScript, CSS, встроенных элементов управления браузера, таких как элементы формы, или их комбинации.
Задержка взаимодействия состоит из самой продолжительной продолжительности группы обработчиков событий, которые управляют взаимодействием, с момента, когда пользователь начинает взаимодействие, до момента представления следующего кадра с визуальной обратной связью.
Ключевой момент: более подробную информацию о том, как измеряется INP, см. в разделе «Что такое взаимодействие?» .
Что такое хороший балл INP?
Чтобы гарантировать, что вы обеспечиваете хорошее взаимодействие с пользователем, хорошим порогом для измерения является 75-й процентиль загрузок страниц, зарегистрированных в полевых условиях, сегментированных по мобильным и настольным устройствам:
- INP, равный или меньше 200 миллисекунд , означает, что ваша страница имеет хорошую скорость отклика .
- INP между 200 и 500 миллисекундами означает, что необходимо улучшить скорость реагирования вашей страницы.
- INP более 500 миллисекунд означает, что ваша страница плохо реагирует .
Что такое взаимодействие?
Основным драйвером интерактивности часто является JavaScript, хотя браузеры обеспечивают интерактивность посредством элементов управления, не поддерживаемых JavaScript, таких как флажки, переключатели и элементы управления, основанные на CSS.
Для целей ИЯФ наблюдаются только следующие типы взаимодействия:
- Кликаем мышкой.
- Нажатие на устройство с сенсорным экраном.
- Нажатие клавиши на физической или экранной клавиатуре.
Ключевой момент: наведение курсора и прокрутка не влияют на INP. Однако прокрутка с помощью клавиатуры (пробел, страница вверх, страница вниз и т. д.) включает нажатие клавиши, которое может вызвать другие события, которые измеряет INP. Любая результирующая прокрутка не учитывается при расчете INP.
Взаимодействия происходят в основном документе или во встроенных в документ окнах iframe — например, нажатие кнопки воспроизведения встроенного видео. Поскольку конечные пользователи не знают, какие части страницы находятся в iframe, вам необходимо измерить INP внутри iframe, чтобы точно измерить его для всей страницы. Однако веб-API JavaScript не имеют доступа к содержимому iframe и, возможно, не смогут измерить INP внутри 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 вашего веб-сайта — это собрать показатели реальных пользователей в этой области. Если вы привыкли полагаться на лабораторные данные для оценки производительности, рекомендуем прочитать статью «Почему лабораторные и полевые данные могут отличаться (и что с этим делать)» .
В поле
В идеале ваш путь к оптимизации INP начинается с полевых данных. В лучшем случае данные полей Real User Monitoring (RUM) дают вам не только значение INP страницы, но и контекстные данные, которые подчеркивают, какое конкретное взаимодействие было ответственным за само значение INP, произошло ли взаимодействие во время или после загрузки страницы, тип взаимодействия (щелчок, нажатие клавиши или касание) и другая ценная информация.
Если ваш веб-сайт соответствует требованиям для включения в отчет об опыте пользователей Chrome (CrUX) , вы можете быстро получить данные полей INP через CrUX в PageSpeed Insights , а также данные о других основных веб-показателях. Как минимум, вы можете получить изображение INP вашего веб-сайта на уровне источника, но в некоторых случаях вы также можете получить данные на уровне страницы.
Однако, хотя CrUX может сообщить вам о наличии проблемы на высоком уровне, он часто не предоставляет достаточно подробностей, чтобы помочь полностью понять, в чем заключается проблема. Решение RUM может помочь вам раскрыть более подробную информацию о страницах, пользователях или взаимодействиях с пользователями, которые испытывают медленное взаимодействие. Возможность приписать INP отдельным взаимодействиям помогает избежать догадок и напрасных усилий.
В лаборатории
В лучшем случае вам следует начать тестирование в лаборатории после того, как у вас появятся полевые данные, свидетельствующие о медленном взаимодействии. Однако при отсутствии полевых данных существуют некоторые стратегии воспроизведения медленных взаимодействий в лаборатории. Стратегии включают в себя отслеживание общих пользовательских потоков и тестирование взаимодействия на этом пути, а также взаимодействие со страницей во время загрузки, когда основной поток часто наиболее загружен, чтобы выявить медленные взаимодействия во время этой важной части взаимодействия с пользователем.
Как улучшить INP
Ознакомьтесь с нашей коллекцией руководств по оптимизации INP , чтобы получить рекомендации по выявлению медленных взаимодействий в полевых условиях и использованию лабораторных данных для их оптимизации.
Журнал изменений
Иногда ошибки обнаруживаются в API, используемых для измерения метрик, а иногда и в определениях самих метрик. В результате иногда приходится вносить изменения, и эти изменения могут проявляться в виде улучшений или регрессов в ваших внутренних отчетах и информационных панелях.
Чтобы помочь вам справиться с этим, все изменения в реализации или определении этих показателей отображаются в этом журнале изменений .
Если у вас есть отзывы об этих показателях, оставьте их в группе Google web-vitals-feedback .