Мы рады сообщить, что в инструментах теперь поддерживается новый показатель скорости реакции – Interaction to Next Paint (INP). Подробную информацию о показателе INP можно найти в официальном руководстве.
Рекомендуемый показатель
Цель измерения INP – понять, насколько быстро страница реагирует на действия пользователя. Единственный способ получить реалистичные данные – измерить, как ваша страница реагирует на действия реальных пользователей, посещающих ваш сайт, используя данные из поля.
Измерение INP в лабораторных условиях помогает лучше понять временные характеристики событий и определить, что именно нужно оптимизировать. Инструменты для лабораторного тестирования не взаимодействуют со страницей автоматически, поэтому при измерении им требуется ввод данных вручную или скрипт, созданный с помощью инструмента автоматизации, например Puppeteer. Определив ключевые взаимодействия на основе типичных путей пользователя, вы можете протестировать их, чтобы выявить проблемы, или создать скрипты и добавить их в тесты непрерывной интеграции, чтобы предотвратить регрессии.
Узнайте, как пользователи взаимодействуют с вашим сайтом (данные наблюдений)
Открыть PageSpeed Insights
PageSpeed Insights получает данные из API отчета об удобстве пользования браузером Chrome и предоставляет информацию о производительности страницы и источника за последние 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 и о том, как измерить этот показатель в консоли инструментов разработчика…
Расширение 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 Insights
- pagespeed.web.dev: данные о показателе INP на уровне страницы и источника из CrUX API представлены как "Interaction to Next Paint"
- PSI API: INP доступен как
INTERACTION_TO_NEXT_PAINT_MS
- Библиотека JS
web-vitalsweb-vitalsподдерживает INP
- Расширение Web Vitals для Chrome
- Включает локальное измерение INP и полевые данные INP, если они доступны в CrUX API.
- Lighthouse
- Панель Lighthouse в инструментах разработчика. Измерение INP доступно в режиме временного диапазона в Chrome Canary (104).
- Модуль npm Lighthouse. Измерение INP доступно в диапазонах времени (используйте Puppeteer для синтетического ввода).
Дальнейшие действия и запрос отзывов
Команды разработчиков инструментов Chrome продолжат улучшать возможности отладки и рекомендации по оптимизации INP.
Если у вас есть отзывы о полезности или простоте измерения какого-либо показателя, поделитесь ими в группе Google web-vitals-feedback.