Умный CDN OptiPic — Больше, чем сжатие. Комплексная оптимизация изображений налету с конвертацией в WebP [Подробнее]
Previous Next

Взаимодействие до следующего отображения (INP)

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

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

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

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

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

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

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

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

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

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

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

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

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

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


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

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

Что касается INP, >

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

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

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

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

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

Где INP учитывает все взаимодействия с страницей, First Input Delay (FID) учитывает только первое взаимодействие. Он также измеряет только задержку ввода первого взаимодействия, а не время выполнения обработчиков событий или задержку в отображении следующего кадра.

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

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

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

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

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

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

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

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

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

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

?