Инструменты для измерения основных веб-показателей

Ваши любимые инструменты разработчика теперь могут измерять основные веб-показатели.

Addy Osmani

Elizabeth Sweeny

Недавно анонсированная инициатива Web Vitals предоставляет единое руководство по сигналам качества, которые необходимы всем сайтам для обеспечения удобного взаимодействия с пользователем в Интернете. Мы рады сообщить, что все популярные инструменты Google для веб-разработчиков теперь поддерживают измерение основных веб-показателей , что помогает вам легче диагностировать и устранять проблемы с взаимодействием с пользователем. Сюда входят Lighthouse , PageSpeed ​​Insights , Chrome DevTools , Search Console , инструмент измерения web.dev , расширение Chrome Web Vitals и новый (!) Chrome UX Report API.

Поскольку Google Поиск теперь включает основные веб-показатели в качестве основы для оценки удобства страниц , важно, чтобы эти показатели были как можно более доступными и действенными.

Чтобы начать свой путь по оптимизации взаимодействия с пользователем с помощью Core Web Vitals, попробуйте следующий рабочий процесс:

• Используйте новый отчет Core Web Vitals в Search Console, чтобы определить группы страниц, требующих внимания (на основе данных полей).
• После того как вы определили страницы, требующие доработки, используйте PageSpeed ​​Insights (на базе Lighthouse и Chrome UX Report) для диагностики лабораторных и полевых проблем на странице. PageSpeed ​​Insights (PSI) доступен через консоль поиска, или вы можете ввести URL-адрес напрямую в PSI.
• Готовы оптимизировать свой сайт локально в лаборатории? Используйте Lighthouse и Chrome DevTools для измерения основных веб-показателей и получения практических рекомендаций о том, что именно нужно исправить. Расширение Chrome Web Vitals позволяет просматривать показатели на рабочем столе в режиме реального времени.
• Нужна персонализированная панель мониторинга Core Web Vitals? Используйте обновленную панель управления CrUX или новый API Chrome UX Report для полевых данных или API PageSpeed ​​Insights для лабораторных данных.
• Ищете руководство? web.dev/measure может измерить вашу страницу и показать вам приоритетный набор руководств и кодовых лабораторий для оптимизации, используя данные PSI.
• Наконец, используйте Lighthouse CI в запросах на включение, чтобы убедиться в отсутствии регрессий в Core Web Vitals перед развертыванием изменения в рабочей среде.

После этого введения давайте углубимся в конкретные обновления для каждого инструмента!

Маяк

Lighthouse — это автоматизированный инструмент аудита веб-сайтов, который помогает разработчикам диагностировать проблемы и определять возможности для улучшения пользовательского опыта своих сайтов. Он измеряет несколько аспектов качества пользовательского опыта в лабораторной среде, включая производительность и доступность. Последняя версия Lighthouse ( 6.0 , выпущенная в середине мая 2020 г.) включает дополнительные проверки, новые метрики и новую оценку производительности.

Lighthouse 6.0 добавляет в отчет три новых показателя. Два из этих новых показателей — «Наибольшая отрисовка контента » (LCP) и «Совокупный сдвиг макета» (CLS) — представляют собой лабораторные реализации Core Web Vitals и предоставляют важную диагностическую информацию для оптимизации взаимодействия с пользователем. Учитывая их важность для оценки пользовательского опыта, новые показатели не только измеряются и включаются в отчет, но и учитываются при расчете показателя производительности.

Третий новый показатель, включенный в Lighthouse, — общее время блокировки (TBT) — хорошо коррелирует с полем показателя « Первая задержка ввода» (FID), еще одним показателем Core Web Vitals. Следуя рекомендациям, представленным в отчете Lighthouse, и оптимизируя свои показатели, вы сможете предоставить своим пользователям максимально возможный опыт.

Все продукты, которые использует Lighthouse, обновляются в соответствии с последней версией, включая Lighthouse CI , который позволяет вам легко измерять основные веб-показатели по запросам на включение до их объединения и развертывания.

Чтобы узнать больше о последних обновлениях Lighthouse, прочтите нашу публикацию в блоге «Что нового в Lighthouse 6.0» .

Статистика PageSpeed

PageSpeed ​​Insights (PSI) сообщает о производительности страницы в лабораторных и полевых условиях как на мобильных, так и на настольных устройствах. Инструмент предоставляет обзор того, как реальные пользователи воспринимают страницу (на основе отчета Chrome UX), а также набор практических рекомендаций о том, как владелец сайта может улучшить взаимодействие со страницей (предоставлено Lighthouse).

PageSpeed ​​Insights и PageSpeed ​​Insights API также были обновлены для использования Lighthouse 6.0 и теперь поддерживают измерение основных веб-показателей как в лабораторных, так и в полевых разделах отчета! Основные веб-показатели помечены синей лентой, как показано ниже.

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

Крукс

Отчет Chrome UX (CrUX) – это общедоступный набор данных о реальном пользовательском опыте на миллионах веб-сайтов. Он измеряет полевые версии всех основных веб-показателей. В отличие от лабораторных данных, данные CrUX поступают от согласившихся пользователей на местах. Используя эти данные, разработчики могут понять распределение реального пользовательского опыта на своих сайтах или даже на сайтах конкурентов. Даже если на вашем сайте нет RUM, CrUX может предоставить быстрый и простой способ оценить ваши основные веб-показатели. Набор данных CrUX в BigQuery включает подробные данные о производительности для всех основных веб-показателей и доступен в виде ежемесячных снимков на исходном уровне.

Единственный способ по-настоящему узнать, как ваш сайт работает для ваших пользователей, — это фактически измерить его производительность в полевых условиях, когда эти пользователи загружают его и взаимодействуют с ним. Этот тип измерения обычно называют мониторингом реальных пользователей или сокращенно RUM. Даже если на вашем сайте нет RUM, CrUX может предоставить быстрый и простой способ оценить ваши основные веб-показатели.

Представляем CrUX API

Сегодня мы рады объявить о CrUX API — быстром и бесплатном способе простой интеграции ваших рабочих процессов разработки с измерением качества на уровне источника и URL-адреса для следующих показателей поля:

• Самая большая содержательная краска
• Совокупный сдвиг макета
• Первая входная задержка
• Первая содержательная краска

Разработчики могут запрашивать источник или URL-адрес и сегментировать результаты по различным форм-факторам. API обновляется ежедневно и суммирует данные за предыдущие 28 дней (в отличие от набора данных BigQuery, который агрегируется ежемесячно). API также имеет те же смягченные квоты общедоступного API, которые мы устанавливаем для другого нашего API, PageSpeed ​​Insights API (25 000 запросов в день).

Ниже приведена демонстрация использования CrUX API для визуализации показателей Core Web Vitals с распределением хороших , требующих улучшения и плохих показателей :

В будущих выпусках мы планируем расширить API, чтобы обеспечить доступ к дополнительным измерениям и метрикам набора данных CrUX.

Обновленная панель управления CruX

Недавно обновленная панель мониторинга CrUX позволяет легко отслеживать производительность источника с течением времени, и теперь вы можете использовать ее для мониторинга распределения всех показателей Core Web Vitals. Чтобы начать работу с панелью управления, ознакомьтесь с нашим руководством на сайте web.dev.

Мы представили новую целевую страницу Core Web Vitals, чтобы еще проще оценить эффективность вашего сайта. Мы приветствуем ваши отзывы обо всех инструментах CrUX; Чтобы поделиться своими мыслями и вопросами, свяжитесь с нами через аккаунт @ChromeUXReport в Твиттере или в группе Google .

Панель Chrome DevTools «Производительность»

Отладка событий Layout Shift в разделе Experience.

На панели «Производительность» Chrome DevTools появился новый раздел «Опыт» , который поможет вам обнаружить неожиданные изменения макета. Это полезно для поиска и устранения проблем визуальной нестабильности на вашей странице, которые способствуют совокупному сдвигу макета.

Выберите сдвиг макета, чтобы просмотреть сведения о нем на вкладке «Сводка» . Чтобы визуализировать, где произошел сам сдвиг, наведите указатель мыши на поля «Перенесено откуда» и «Перенесено в» .

Отладка готовности к взаимодействию с помощью параметра «Общее время блокировки» в нижнем колонтитуле.

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

TBT теперь отображается в нижнем колонтитуле панели Chrome DevTools Performance при измерении производительности страницы:

1. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
2. Откройте вкладку «Производительность» .
3. Нажмите Запись .
4. Вручную перезагрузите страницу.
5. Подождите, пока страница загрузится, а затем остановите запись.

Дополнительные сведения см. в разделе «Что нового в DevTools (Chrome 84)» .

Поисковая консоль

Новый отчет Core Web Vitals в Search Console поможет вам определить группы страниц вашего сайта, требующие внимания, на основе реальных (полевых) данных из CrUX. Эффективность URL-адресов сгруппирована по статусу, типу показателя и группе URL-адресов (группам похожих веб-страниц).

Отчет основан на трех показателях Core Web Vitals: LCP, FID и CLS. Если URL-адрес не содержит минимального объема отчетных данных для этих показателей, он не включается в отчет. Попробуйте новый отчет, чтобы получить целостное представление об эффективности вашего региона.

Как только вы определите тип страницы, на которой есть проблемы, связанные с основными веб-показателями, вы можете использовать PageSpeed ​​Insights, чтобы узнать о конкретных предложениях по оптимизации для типичных страниц.

веб.разработчик

https://pagespeed.web.dev/ позволяет вам измерять производительность вашей страницы с течением времени, предоставляя приоритетный список руководств и кодовых лабораторий о том, как ее улучшить. Это измерение осуществляется с помощью PageSpeed ​​Insights. Инструмент измерения теперь также поддерживает метрики Core Web Vitals, как показано ниже:

Расширение Web Vitals

Расширение Web Vitals измеряет три показателя Core Web Vitals в режиме реального времени для Google Chrome (на настольном компьютере). Это полезно для выявления проблем на ранних этапах рабочего процесса разработки, а также в качестве диагностического инструмента для оценки производительности Core Web Vitals при просмотре веб-страниц.

Расширение теперь доступно для установки из Интернет-магазина Chrome ! Мы надеемся, что вы найдете это полезным. Мы приветствуем любой вклад в его улучшение, а также отзывы о репозитории проекта на GitHub .

Краткое описание

Это завершение! Что вы можете сделать дальше:

• Используйте Lighthouse в DevTools, чтобы оптимизировать взаимодействие с пользователем и убедиться, что вы настроены на успех с Core Web Vitals в полевых условиях.
• Используйте PageSpeed ​​Insights для сравнения производительности Core Web Vitals в вашей лаборатории и на местах.
• Попробуйте новый API-интерфейс Chrome User Experience Report, чтобы легко узнать, насколько хорошо ваш источник и URL-адрес работали в сравнении с основными веб-показателями за последние 28 дней.
• Используйте раздел «Опыт» и нижний колонтитул на панели «Производительность DevTools», чтобы глубже погрузиться в работу и отладить конкретные основные веб-показатели.
• Используйте отчет «Основные веб-показатели» Search Console, чтобы получить сводную информацию о том, как ваши источники работают на местах.
• Используйте расширение Web Vitals , чтобы отслеживать эффективность страницы по сравнению с Core Web Vitals в режиме реального времени.

Мы расскажем больше о наших инструментах Core Web Vitals на веб-сайте web.dev Live в июне. Подпишитесь, чтобы получать обновления о мероприятии!

~ Элизабет и Адди, WebPerf Janitors