Данные об использовании 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 миллисекунд означает, что ваша страница плохо реагирует .
Что такое взаимодействие?
Основным драйвером интерактивности часто является JavaScript, хотя браузеры обеспечивают интерактивность посредством элементов управления, не поддерживаемых JavaScript, таких как флажки, переключатели и элементы управления, основанные на CSS.
Что касается 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 – это больше, чем просто первые впечатления. Путем выборки всех взаимодействий можно всесторонне оценить оперативность, что делает INP более надежным индикатором общей оперативности, чем FID.
Что делать, если значение 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 .