Инструменты для измерения Core Web Vitals
Теперь ваши любимые средства разработчика могут измерять показатели Core Web Vitals.
Недавно объявленная инициатива Web Vitals предоставляет единое руководство по сигналам качества, которые необходимы всем сайтам для обеспечения удобного взаимодействия с пользователем в Интернете. Мы рады сообщить, что все популярные инструменты Google для веб-разработчиков теперь поддерживают измерение Core Web Vitals, помогая вам более легко диагностировать и устранять проблемы взаимодействия с пользователем. Сюда входят Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, инструмент измерения web.dev, расширение Web Vitals для Chrome и новый (!)Chrome UX Report API.
Поскольку поисковая система Google теперь оценивает удобство взаимодействия со страницами на основании Core Web Vitals, важно, чтобы эти метрики были максимально доступными и действенными.
Чтобы начать свой путь к оптимизации взаимодействия с пользователем с помощью Core Web Vitals, попробуйте следующий рабочий процесс:
- Используйте новый отчет Core Web Vitals report в Search Console, чтобы определить группы страниц, требующие внимания (на основе полевых данных).
- После того как вы определили страницы, которые нуждаются в доработке, используйте PageSpeed Insights (на основе Lighthouse и Chrome UX Report) для диагностики лабораторных и полевых проблем на странице. PageSpeed Insights (PSI) доступен через Search Console, или вы можете ввести URL-адрес напрямую в PSI.
- Готовы оптимизировать свой сайт локально в лабораторных условиях? Используйте Lighthouse и Chrome DevTools, чтобы измерить Core Web Vitals и получить действенные рекомендации о том, что именно нужно исправить. Расширение Web Vitals для Chrome позволяет просматривать показатели на рабочем столе в режиме реального времени.
- Нужна настраиваемая панель управления Core Web Vitals? Используйте обновленную панель инструментов CrUX или новый Chrome UX Report API для полевых данных и PageSpeed Insights API для лабораторных данных.
- Ищете руководство? web.dev/measure может измерить вашу страницу и показать вам приоритетный набор руководств и кодовых таблиц для оптимизации, используя данные PSI.
- Наконец, перед развертыванием изменений в рабочей среде используйте Lighthouse CI для запросов на включение внесённых изменений, чтобы убедиться в отсутствии регрессий в Core Web Vitals.
После этого введения давайте более подробно рассмотрим конкретные обновления для каждого инструмента!
Lighthouse #
Lighthouseэто автоматизированный инструмент аудита веб-сайтов, который помогает разработчикам диагностировать проблемы и определять возможности для улучшения взаимодействия с пользователями сайтов. Lighthouse измеряет несколько параметров качества взаимодействия с пользователем в лабораторной среде, включая производительность и доступность. Последняя версия Lighthouse (6.0, выпущена в середине мая 2020 г.) включает дополнительные проверки, новые показатели и недавно составленную оценку производительности.
В отчет Lighthouse 6.0 добавлены три новых метрики. Две из нихэто LCP (Скорость загрузки основного контента) и CLS (Совокупное смещение макета), которые представляют собой лабораторные реализации Core Web Vitals и предоставляют важную диагностическую информацию для оптимизации взаимодействия с пользователем, поэтому они включены в отчет и учитываются при расчете оценки производительности.
Третья новая метрика, включенная в Lighthouse,TBT (Общее время блокировки)хорошо коррелирует с полевой метрикой FID (Время ожидания до первого взаимодействия с контентом), также входящей в состав Core Web Vitals. Следуя рекомендациям, представленным в отчете Lighthouse, и оптимизируя свои показатели, вы обеспечите наилучший возможный опыт для своих пользователей.
Обновлены также все связанные Lighthouse продукты, включая Lighthouse CI, который позволяет легко измерять Core Web Vitals по запросам на включение внесённых изменений до их объединения и развертывания.
Чтобы узнать больше о последних обновлениях в Lighthouse, ознакомьтесь с нашей публикацией в блоге«Новые возможности Lighthouse 6.0».
PageSpeed Insights #
PageSpeed Insights (PSI) сообщает о производительности страницы в лабораторных и полевых условиях для мобильных и настольных устройств. Инструмент предоставляет обзор того, как реальные пользователи воспринимают страницу (на основе отчета Chrome UX), и набор действенных рекомендаций для владельца сайта по улучшению восприятия страницы (предоставлено Lighthouse).
PageSpeed Insights и PageSpeed Insights API также были обновлены для использования Lighthouse 6.0 и теперь поддерживают измерение Core Web Vitals в разделах отчета по лабораторным и полевым измерениям! Показатели Core Web Vitals помечены синим флажком (см. ниже).
Тогда как Search Console предоставляет владельцам сайтов отличный обзор для проблемных групп страниц, PSI помогает определить возможности каждой страницы по улучшению взаимодействия. В PSI можно наглядно увидеть, соответствует ли ваша страница пороговым значениям всех Core Web Vitalsв верхней части отчета указано, прошла страница оценку Core Web Vitals или не прошла.
CrUX #
Отчет Chrome UX (CrUX)это общедоступный набор данных о реальном пользовательском восприятии миллионов веб-сайтов. Отчет измеряет полевые метрики Core Web Vitals. В отличие от лабораторных данных, данные CrUX поступают от зарегистрированных пользователей в полевых условиях. Используя эти данные, разработчики могут понять распределение реального пользовательского опыта на собственных сайтах или даже на сайтах конкурентов. Если у вас нет RUM на сайте, CrUX может предоставить быстрый и простой способ оценить ваши Core Web Vitals. Набор данных CrUX на BigQuery включает в себя подробные данные о производительности для всех Core Web Vitals и доступен в виде ежемесячных снепшотов на уровне источника.
Единственный способ по-настоящему узнать, как сайт работает для пользователей,это реально измерить его производительность в полевых условиях, когда пользователи загружают сайт и взаимодействуют с ним. Этот тип измерения обычно называется мониторингом реальных пользователей или сокращенно RUM. Даже если у вас нет RUM на сайте, CrUX может предоставить быстрый и простой способ оценить Core Web Vitals.
Представляем CrUX API
Сегодня мы рады анонсировать CrUX APIбыстрый и бесплатный способ легко интегрировать рабочие процессы разработки с измерением качества на уровне источника и URL-адреса для следующих полевых показателей:
- скорость загрузки основного контента (LCP);
- совокупное смещение макета (CLS);
- время ожидания до первого взаимодействия с контентом (FID);
- первая отрисовка контента (FCP).
Разработчики могут делать запрос по источнику или URL-адресу и сегментировать результаты по различным форм-факторам. API обновляется ежедневно и суммирует данные за предыдущие 28 дней (в отличие от набора данных BigQuery, который агрегируется ежемесячно). API имеет те же ослабленные квоты на запросы к общедоступным API, которые мы устанавливаем для другого нашего APIAPI PageSpeed Insights (25 000 запросов в день).
Ниже приведена демонстрация использования CrUX API для визуализации показателей Core Web Vitals с распределением по «хорошо», «требует улучшения» и «плохо»:
В будущих выпусках мы планируем расширить API, чтобы обеспечить доступ к дополнительным параметрам и показателям набора данных CrUX.
Обновленная панель управления CrUX
Обновленная панель CrUX Dashboard позволяет легко отслеживать производительность источника с течением времени, и теперь можно использовать панель для мониторинга распределения всех показателей Core Web Vitals. Чтобы начать работу с панелью, ознакомьтесь с нашим руководством на web.dev.
Мы сделали новую целевую страницу Core Web Vitals, чтобы можно было с первого взгляда увидеть, как работает ваш сайт. Мы будем рады отзывам обо всех инструментах CrUX; чтобы поделиться своими мыслями и вопросами, напишите нам в Твиттере @ChromeUXReport или в Google Group.
Панель производительности Chrome DevTools #
События Debug Layout Shift в разделе Experience
На панели Performance в Chrome DevTools появился новый раздел Experience, с помощью которого можно обнаруживать неожиданные смещения макета. Это полезно для поиска и устранения проблем визуальной нестабильности на вашей странице, которые учитываются в метрике CLS (Совокупное смещение макета).
Выберите Layout Shift, чтобы просмотреть сведения о смещении макета на вкладке Summary. Чтобы визуализировать, где произошло смещение, наведите указатель мыши на поля Moved from и Moved to.
Готовность к отладке взаимодействия с TBT в нижнем колонтитуле
Показатель TBT (Общее время блокировки) можно измерить с помощью лабораторных инструментов, это отличный косвенный показатель для FID (Времени ожидания до первого взаимодействия с контентом). TBT измеряет общее количество времени между FCP (Первой отрисовкой контента) и TTI (Временем до интерактивности), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию на ввод. Оптимизация производительности, улучшающая TBT в лабораторных условиях, должна улучшить FID в полевых условиях.
TBT теперь отображается в нижнем колонтитуле панели Performance в Chrome DevTools при измерении производительности страницы:
Откройте DevTools, нажав
Control+Shift+J(илиCommand+Option+J, если у вас Mac).Перейдите на вкладку Производительность.
Щелкните Record.
Обновите страницу вручную.
Дождитесь загрузки страницы, затем остановите запись.
Дополнительные сведения см. в разделе «Новые возможности DevTools (Chrome 84)».
Search Console #
Новый отчет Core Web Vitals report в Search Console помогает определить проблемные группы страниц вашего сайта на основании реальных (полевых) данных из CrUX. Производительность URL-адресов сгруппирована по статусу, типу метрики и группе URL-адресов (группы похожих веб-страниц).
Отчет основан на трех показателях Core Web Vitals: LCP, FID и CLS. Если URL-адрес не содержит минимального количества отчетных данных для этих показателей, он не включается в отчет. Ознакомьтесь с новым отчетом, чтобы получить целостное представление о производительности вашего источника.
Как только вы определите тип страницы, на которой есть проблемы, связанные с Core Web Vitals, можно использовать PageSpeed Insights, чтобы узнать о конкретных предложениях по оптимизации для репрезентативных страниц.
web.dev #
web.dev/measure позволяет измерять производительность страницы с течением времени, предоставляя приоритетный список руководств об улучшении. Измерения 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 в лабораторных и полевых условиях.
- Попробуйте новый Chrome User Experience Report API, чтобы узнать, какие Core Web Vitals были у вашего источника и URL-адрес за последние 28 дней.
- Используйте раздел Experience и нижний колонтитул на панели Performance в DevTools, чтобы копнуть глубже и отладить определенные показатели Core Web Vitals.
- Используйте отчет Core Web Vitals report в Search Console, чтобы получить сводку о том, как ваши источники работают в полевых условиях.
- Используйте расширение Web Vitals, чтобы отслеживать производительность страницы по Core Web Vitals в режиме реального времени.
- Мы расскажем больше о наших инструментах Core Web Vitals на web.dev Live в июне. Зарегистрируйтесь, чтобы получать новости о мероприятии!
- Элизабет и Эдди, WebPerf Janitors