Сбор данных о веб-показателях вашего сайта — это первый шаг к их улучшению. Всесторонний анализ позволит собрать данные о производительности как в реальных, так и в лабораторных условиях. Измерение веб-показателей требует минимальных изменений кода и может быть выполнено с помощью бесплатных инструментов.
Измерение веб-жизненных показателей с использованием данных RUM
Данные мониторинга реальных пользователей (RUM), также известные как полевые данные, отражают производительность реальных пользователей сайта. Данные RUM — это то, что Google использует, чтобы определить, соответствует ли сайт рекомендуемым пороговым значениям Core Web Vitals.
Начиная
Если у вас нет настройки RUM, следующие инструменты быстро предоставят вам данные о реальной производительности вашего сайта. Все эти инструменты основаны на одном и том же базовом наборе данных ( отчет об опыте пользователя Chrome ), но имеют несколько разные варианты использования:
- PageSpeed Insights (PSI) : PageSpeed Insights сообщает об совокупной производительности на уровне страницы и на уровне источника за последние 28 дней. Кроме того, он дает рекомендации по улучшению производительности. Если вам нужно выполнить одно действие, чтобы начать измерение и улучшение веб-показателей вашего сайта, мы рекомендуем использовать PSI для аудита вашего сайта. PSI доступен в Интернете и через API .
- Search Console : Search Console сообщает данные о производительности по страницам. Это делает его хорошо подходящим для выявления конкретных страниц, нуждающихся в улучшении. В отличие от PageSpeed Insights, отчеты Search Console включают исторические данные о производительности. Search Console можно использовать только с сайтами, которыми вы владеете и право собственности на которые подтвердили.
- Панель управления CrUX : Панель управления CrUX — это предварительно созданная панель мониторинга, которая отображает данные CrUX для выбранного вами источника. Он построен на базе Data Studio, и процесс установки занимает около минуты. По сравнению с PageSpeed Insights и Search Console отчеты информационной панели CrUX включают больше измерений — например, данные можно разбить по устройствам и типам подключения.
Стоит отметить, что, хотя перечисленные выше инструменты хорошо подходят для начала работы с измерением Web Vitals, они могут быть полезны и в других контекстах. В частности, как CrUX, так и PSI доступны в виде API и могут использоваться для создания информационных панелей и других отчетов.
Сбор данных РУМ
Хотя инструменты на основе CrUX являются хорошей отправной точкой для исследования производительности Web Vitals, мы настоятельно рекомендуем дополнить их собственным RUM. Данные RUM, которые вы собираете самостоятельно, могут предоставить более подробную и немедленную информацию о производительности вашего сайта. Это облегчает выявление проблем и тестирование возможных решений.
Вы можете собирать собственные данные RUM, используя выделенного поставщика RUM или настроив собственный инструментарий.
Выделенные поставщики RUM специализируются на сборе и предоставлении данных RUM. Чтобы использовать Core Web Vitals с этими службами, попросите своего поставщика RUM включить мониторинг Core Web Vitals для вашего сайта.
Если у вас нет поставщика RUM, вы можете расширить существующую настройку аналитики для сбора и составления отчетов по этим показателям с помощью библиотеки JavaScript web-vitals . Более подробно этот метод описан ниже.
Библиотека JavaScript для web-vitals
Если вы реализуете собственную настройку RUM для Web Vitals, самый простой способ сбора показателей Web Vitals — использовать библиотеку JavaScript web-vitals . web-vitals — это небольшая модульная библиотека (около 1 КБ), которая предоставляет удобный API для сбора и составления отчетов по каждому из измеряемых показателей Web Vitals.
Метрики, составляющие Web Vitals, не все напрямую предоставляются встроенными в браузер API-интерфейсами производительности, а скорее строятся на их основе. Например, Cumulative Layout Shift (CLS) реализуется с помощью Layout Instability API . Используя web-vitals , вам не нужно беспокоиться о самостоятельной реализации этих показателей; это также гарантирует, что собираемые вами данные соответствуют методологии и передовым практикам для каждого показателя.
Дополнительную информацию о реализации web-vitals см. в документации и в разделе «Рекомендации по измерению веб-показателей» в практическом руководстве.
Агрегация данных
Крайне важно, чтобы вы сообщали об измерениях, собранных web-vitals . Если эти данные измеряются, но не сообщаются, вы никогда их не увидите. Документация web-vitals включает примеры, показывающие, как отправлять данные в общую конечную точку API , Google Analytics или Диспетчер тегов Google .
Если у вас уже есть любимый инструмент для создания отчетов, рассмотрите возможность его использования. Если нет, Google Analytics бесплатен и может использоваться для этой цели.
При рассмотрении вопроса о том, какой инструмент использовать, полезно подумать о том, кому понадобится доступ к данным. Компании обычно достигают наибольшего выигрыша в производительности, когда в повышении производительности заинтересована вся компания, а не отдельный отдел. См. раздел Кросс-функциональное исправление скорости веб-сайта, чтобы узнать, как заручиться поддержкой различных отделов.
Интерпретация данных
При анализе данных о производительности важно обращать внимание на хвосты распределения. Данные RUM часто показывают, что производительность сильно различается: у некоторых пользователей работа происходит быстро, у других — медленно. Однако использование медианы для суммирования данных может легко замаскировать это поведение.
Что касается веб-показателей, Google использует процент «хороших» впечатлений, а не статистические данные, такие как медианы или средние значения, чтобы определить, соответствует ли сайт или страница рекомендуемым пороговым значениям. В частности, чтобы сайт или страница считались соответствующими пороговым значениям основных веб-показателей, 75% посещений страниц должны соответствовать «хорошему» порогу для каждого показателя.
Измерение веб-жизненных показателей с использованием лабораторных данных
Лабораторные данные , также известные как синтетические данные, собираются из контролируемой среды, а не от реальных пользователей. В отличие от данных RUM, лабораторные данные можно собирать из предпроизводственных сред и, следовательно, включать в рабочие процессы разработчиков и процессы непрерывной интеграции. Примерами инструментов, собирающих синтетические данные, являются Lighthouse и WebPageTest.
Соображения
Между данными RUM и лабораторными данными всегда будут расхождения, особенно если условия сети, тип устройства или местоположение лабораторной среды значительно отличаются от условий пользователей. Однако, когда дело доходит до сбора лабораторных данных по метрикам Web Vitals, важно учитывать несколько конкретных моментов:
- Совокупный сдвиг макета (CLS): совокупный сдвиг макета, измеренный в лабораторных условиях, может быть искусственно ниже, чем CLS, наблюдаемый в данных RUM. CLS определяется как «сумма всех индивидуальных показателей смещения макета для каждого неожиданного смещения макета, которое происходит в течение всего срока службы страницы ». Однако продолжительность жизни страницы обычно сильно различается в зависимости от того, загружается ли она реальным пользователем или синтетическим инструментом измерения производительности. Многие лабораторные инструменты только загружают страницу, но не взаимодействуют с ней. В результате они фиксируют только изменения макета, которые происходят во время начальной загрузки страницы. Напротив, CLS, измеренный с помощью инструментов RUM, фиксирует неожиданные изменения макета , которые происходят на протяжении всего жизненного цикла страницы.
- Задержка первого ввода (FID). Задержку первого ввода невозможно измерить в лабораторных условиях, поскольку она требует взаимодействия пользователя со страницей. В результате общее время блокировки (TBT) является рекомендуемым лабораторным показателем для FID. TBT измеряет «общее количество времени между первой отрисовкой контента и временем взаимодействия, в течение которого страница заблокирована от ответа на ввод пользователя». Хотя FID и TBT рассчитываются по-разному, они оба являются отражением блокировки основного потока во время процесса начальной загрузки. Когда основной поток заблокирован, браузер с задержкой реагирует на действия пользователя. FID измеряет задержку, если таковая имеется, которая возникает при первой попытке пользователя взаимодействовать со страницей.
Оснастка
Эти инструменты можно использовать для сбора лабораторных измерений Web Vitals:
- Расширение Chrome Web Vitals. Расширение Chrome Web Vitals измеряет и сообщает основные веб-показатели (LCP, FID и CLS) для данной страницы. Этот инструмент предназначен для предоставления разработчикам обратной связи о производительности в режиме реального времени при внесении изменений в код.
- Lighthouse: Lighthouse сообщает о LCP, CLS и TBT, а также освещает возможные улучшения производительности. Lighthouse доступен в Chrome DevTools, в виде расширения Chrome и в виде пакета npm. Lighthouse также можно включить в рабочие процессы непрерывной интеграции через Lighthouse CI .
- WebPageTest: WebPageTest включает Web Vitals как часть своих стандартных отчетов. WebPageTest полезен для сбора информации о веб-показателях при определенных условиях устройства и сети.