Мы очень рады, что у нас появился первый раунд поддержки новой метрики реагирования — «Взаимодействие с следующей отрисовкой» (INP). Чтобы узнать о самой метрике, ознакомьтесь с официальным руководством по метрикам INP .
Рекомендуемое измерение
Цель измерения INP — понять, насколько быстро ваша страница реагирует на действия пользователя. Единственный способ получить реалистичные данные — это измерить, как ваша страница реагирует на реальных пользователей, посещающих ваш сайт, используя данные с мест .
Измерение INP в лаборатории помогает лучше понять время событий и места, где необходимо провести оптимизацию. Лабораторные инструменты не будут автоматически взаимодействовать со страницей, поэтому во время измерений им либо потребуется ввод вручную, либо их необходимо написать с помощью инструмента автоматизации, такого как Puppeteer. Когда ключевые взаимодействия идентифицируются на основе типичных действий пользователя, их можно опробовать для выявления проблем или запрограммировать в сценарии, а также провести CI-тесты для предотвращения регрессий.
Узнайте, что испытывают ваши реальные пользователи (полевые данные)
Посетите страницу PageSpeed Insights
PageSpeed Insights извлекает данные полей из API отчетов Chrome User Experience (CrUX) и предоставляет снимок производительности вашей страницы и источника за предыдущие 28 дней. Эти данные теперь включают INP:
Попробуйте это на PageSpeed Insights .
Соберите свои собственные значения INP в полевых условиях.
Если вы хотите самостоятельно собрать данные INP для сайта, самый простой способ сделать это — использовать библиотеку web-vitals , которая теперь имеет полную поддержку INP в своей бета-версии.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Узнайте больше о web-vitals и способах их измерения в консоли DevTools .
Расширение Web Vitals для Chrome
Расширение Web Vitals предоставляет как обзор взаимодействия со страницей ваших пользователей (из CrUX API), так и значения CWV в реальном времени и ключевые показатели текущего посещения страницы.
Установите расширение Web Vitals для Chrome .
Диагностика проблем с производительностью (лабораторные данные)
Используйте пользовательские потоки Lighthouse
Новый режим временного интервала на панели Lighthouse в DevTools позволяет запускать Lighthouse, взаимодействовать с тестовой страницей так, как вы пожелаете, а затем получать отчет о том, что произошло за это время. Этот отчет теперь включает INP и аудит, помогающий диагностировать любые проблемы с реагированием.
Ту же серию взаимодействий можно автоматизировать с помощью пользовательских потоков Lighthouse . INP доступен в потоках пользователей начиная с Lighthouse 9.6.
Подробности о наличии инструмента
- Отчет об опыте использования Chrome (CrUX)
- BigQuery : INP доступен как
interaction_to_next_paint - CrUX API : INP доступен как
interaction_to_next_paint - Панель управления CruX : включает данные INP.
- BigQuery : INP доступен как
- Статистика PageSpeed
- pagespeed.web.dev : данные полей INP на уровне страницы и на уровне источника из API CrUX отображаются как «Взаимодействие с следующей отрисовкой».
- PSI API : INP доступен как
INTERACTION_TO_NEXT_PAINT_MS
- JS-библиотека
web-vitals-
web-vitalsвключает поддержку INP
-
- Расширение Web Vitals для Chrome
- Включает локальные измерения INP и полевые данные INP, если они доступны из CrUX API.
- Маяк
- Панель «Маяк» в DevTools : измерение INP доступно в режиме «временной интервал» в Chrome Canary (104)
- Модуль Lighthouse npm : измерение INP доступно в промежутках времени (используйте puppeteer для синтетических входных данных)
Будущая работа и запрос на обратную связь
В дальнейшем команды разработчиков инструментов Chrome будут продолжать вкладывать средства в возможности отладки и рекомендации по оптимизации для INP.
Если у вас есть отзывы о полезности показателя или простоте его измерения, поделитесь им в группе Google Web-Vitals-Feedback .