[object Object]

Interaction to Next Paint (INP) — это официальная метрика Google Core Web Vital, введенная для оценки общей отзывчивости интерфейса веб-страниц.

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

Резюме «Ответ в первую очередь»

Взаимодействие с следующей отрисовкой (INP) — это базовая метрика Web Vital, которая измеряет время, прошедшее с момента взаимодействия пользователя со страницей (щелчок, касание или нажатие клавиши) до момента, когда браузер отображает обновленный визуальный кадр на экране.Задержка INP состоит из трех частей: задержка ввода, продолжительность обработки и задержка представления.Проходной балл INP составляет 200 миллисекунд или меньше при 75-м процентиле посещений реальных пользователей.В марте 2024 года INP официально заменил задержку первого ввода (FID) в алгоритмах поискового ранжирования Google.

Пороговые значения баллов INP и рейтинговая шкала

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

• Хорошо: $\le 200\text {ms} $ (Зеленый) — быстрый и плавный отклик пользовательского интерфейса, который кажется пользователям мгновенным.
• Требуется улучшение: $> 200\text {ms} $ и $\le 500\text {ms} $ (Желтый) — заметная задержка во время кликов или касаний, которая влияет на взаимодействие с пользователем.
• Плохо: $> 500\text {ms} $ (красный) — сильное зависание интерфейса и блокировка основного потока, что приводит к разочарованию пользователей и высокому показателю отказов.

Три компонента задержки взаимодействия INP

Когда пользователь взаимодействует с элементом на веб-странице, общая задержка взаимодействия, измеряемая INP, состоит из трех последовательных фаз:

1. Задержка ввода. Время, прошедшее между тем, когда пользователь инициирует физическое взаимодействие (щелчок, касание или нажатие клавиши) и моментом, когда основной поток браузера начинает выполнять связанные обработчики событий.Задержка ввода в первую очередь вызвана перегрузкой основного потока из-за длительных фоновых задач JavaScript, выполняемых во время загрузки страницы или повторной отрисовки компонентов.
2. Продолжительность обработки: время, затраченное на выполнение кода JavaScript во всех зарегистрированных прослушивателях событий для этого взаимодействия (например, onclick , onkeydown или обработчиков обновления реактивного состояния платформы).
3. Задержка представления: время, прошедшее после завершения обработчиков событий, пока браузер не завершит расчет пересчета стиля, макета, рисования обновленных пикселей и отображения следующего визуального кадра на оборудовании дисплея пользователя.

Математически общая задержка INP для одного взаимодействия выражается как:

$$\text{Задержка INP} = \text{Задержка ввода} + \text{Продолжительность обработки} + \text{Задержка представления}$$

Почему Google заменил FID на INP в марте 2024 года

Первая задержка ввода (FID) измеряла только компонент задержки ввода самого первого взаимодействия на странице.Хотя FID помог выявить страницы, на которых блокировка основного потока препятствовала первоначальному взаимодействию, у него было два основных технических ограничения:

• Область одного взаимодействия: FID игнорировал все последующие взаимодействия с пользователем после загрузки страницы, не фиксируя медлительность во время сложной навигации на стороне клиента одностраничного приложения (SPA).
• Неполное измерение задержки: FID измерял только задержку ввода, полностью игнорируя время обработки и задержку представления.Обработчик событий, выполнение которого занимало 2000 мс, получал проходной балл FID, если начальная задержка ввода была менее 50 мс.

В марте 2024 года Google официально заменил FID на INP в качестве официального фактора ранжирования Core Web Vital.INP оценивает 75-й процентиль всех взаимодействий во время сеанса, обеспечивая гораздо более полную и реалистичную оценку реального взаимодействия с пользователем в современных веб-приложениях.

Квалифицированные взаимодействия с пользователем и неквалификационные события

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

Измеренные взаимодействия

• Щёлки мышью: нажатие кнопок, ссылок, элементов управления форм или пользовательских интерактивных компонентов.
• Нажатия на сенсорный экран: касание элементов на мобильных устройствах или планшетах.
• Нажатие на клавиатуру: нажатие клавиш физической или виртуальной клавиатуры (например, Enter , Space или буквенно-цифровых клавиш при вводе текста).

Неизмеряемые события

• Прокрутка и панорамирование. Прокрутка страницы или панорамирование компонента карты не запускает измерение INP.
• Наведение: перемещение курсора мыши над элементом без щелчка исключено из INP.
• Анимация загрузки страницы. CSS-анимация, которая запускается автоматически без участия пользователя, не учитывается в INP.

Проверенные технические стратегии для оптимизации высоких результатов INP

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

1. Разбивайте длинные задачи основного потока. Используйте requestIdleCallback() , setTimeout() или scheduler.yield(), чтобы разбить задачи выполнения длительностью более 50 мс на более мелкие фрагменты, позволяя браузеру обрабатывать входящие пользовательские вводы сразу между блоками выполнения задач.
2. Оптимизация обновлений состояния платформы. В приложениях Vue 3 и Nuxt 4 отложите некритическую повторную отрисовку пользовательского интерфейса, используя асинхронные границы компонентов или отложенные реактивные обновления ссылок.
3. Сведите к минимуму искажение макета. Избегайте чтения свойств геометрии DOM (таких как offsetHeight или getBoundingClientRect()) сразу после изменения элементов DOM, что приводит к синхронному перерасчету макета.
4. Уменьшите глубину дерева DOM. Слишком большие деревья DOM увеличивают затраты на расчет стиля и макет во время задержки презентации.Следите за тем, чтобы общее количество элементов DOM не превышало 1500 узлов на страницу.
5. Оптимизируйте сторонние скрипты. Тяжелые сторонние скрипты (аналитика, рекламные сети, виджеты чата с клиентами) часто захватывают основной поток.Отложите или разгрузите веб-работника второстепенными сторонними скриптами.

Непрерывный мониторинг INP с помощью SimpleOps

SimpleOps постоянно отслеживает производительность INP, собирая показатели набора полевых данных реальных пользователей Chrome UX Report (CrUX) наряду с синтетическими аудитами Lighthouse.SimpleOps автоматически предупреждает вашу команду, когда 75-й процентиль INP вашего веб-сайта превышает 200 мс, гарантируя, что ваше приложение останется быстрым, гибким и оптимизированным для рейтинга поисковых систем.