Сбор данных о показателях веб-приёмников вашего сайта — первый шаг к их улучшению. Комплексный анализ позволит собрать данные о производительности как в реальных, так и в лабораторных условиях. Измерение показателей веб-приёмников требует минимальных изменений кода и может быть реализовано с помощью бесплатных инструментов.
Измерение показателей Web Vitals с использованием данных RUM
Данные мониторинга реальных пользователей (RUM), также известные как данные полевых исследований, отражают эффективность работы сайта, наблюдаемую реальными пользователями. Данные RUM используются Google для определения соответствия сайта рекомендуемым пороговым значениям Core Web Vitals.
Начиная
Если у вас не настроен RUM, следующие инструменты быстро предоставят вам данные о реальной производительности вашего сайта. Все эти инструменты основаны на одном и том же наборе данных ( отчёте об удобстве использования Chrome ), но имеют несколько разные сценарии использования:
- Chrome DevTools интегрируется с набором данных CrUX в режиме реального времени на панели «Производительность». Сравнивая локальный опыт с реальным пользовательским опытом на той же странице, вы можете принять более обоснованное решение о том, на чем сосредоточить усилия по отладке. Если вам нужно одно действие, которое можно выполнить для начала измерения и улучшения показателей Web Vitals вашего сайта, рекомендуем использовать панель «Производительность» в Chrome DevTools.
- PageSpeed Insights (PSI) предоставляет данные об общей производительности на уровне страниц и источников за последние 28 дней. Кроме того, сервис предоставляет рекомендации по повышению производительности. PSI доступен в веб-версии и через API .
- Search Console предоставляет данные об эффективности для каждой страницы отдельно. Это делает его удобным для выявления страниц, требующих улучшения. В отличие от PageSpeed Insights, отчёты Search Console включают исторические данные об эффективности. Search Console можно использовать только с сайтами, владельцем которых вы являетесь и право собственности на которые вы подтвердили.
- CrUX Vis — это готовая панель управления, которая отображает данные истории CrUX для выбранного вами URL-адреса или источника (если они доступны в наборе данных CrUX). Она построена на основе API истории CrUX, и процесс настройки занимает около минуты. По сравнению с PageSpeed Insights и Search Console, CrUX Vis включает больше примеров данных, подразделов LCP, типов навигации и т. д.
- CrUX Vis — это историческая панель управления, которая отображает данные CrUX по выбранному вами источнику или URL-адресу. Она построена на основе API истории CrUX. По сравнению с PageSpeed Insights и Search Console, отчёты CrUX Vis содержат больше информации, например, типы навигации , а также данные LCP и RTT .
Стоит отметить, что, хотя перечисленные выше инструменты хорошо подходят для начала работы с измерением показателей веб-активности, они могут быть полезны и в других контекстах. В частности, CrUX и PSI доступны в виде API и могут использоваться для создания информационных панелей и других отчётов.
Собирайте данные RUM
Хотя инструменты на основе 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 — это небольшая модульная библиотека (~2 КБ), которая предоставляет удобный API для сбора и составления отчетов по каждому из измеряемых на местах показателей Web Vitals.
Метрики, составляющие Web Vitals, не все напрямую доступны через встроенные API производительности браузера, а скорее построены на их основе. Например, кумулятивный сдвиг макета (CLS) реализован с помощью API нестабильности макета . Используя web-vitals , вам не нужно беспокоиться о самостоятельной реализации этих метрик; он также гарантирует, что собираемые вами данные соответствуют методологии и лучшим практикам для каждой метрики.
Дополнительную информацию о внедрении web-vitals см. в документации и в руководстве «Рекомендации по измерению показателей Web-Vitals» .
Агрегация данных
Крайне важно сообщать данные измерений, собранных web-vitals . Если эти данные измеряются, но не сообщаются, вы их никогда не увидите. В документации web-vitals приведены примеры отправки данных в универсальную конечную точку API , Google Analytics или Google Менеджер тегов .
Если у вас уже есть любимый инструмент для отчётности, рассмотрите его. Если нет, Google Analytics бесплатен и может быть использован для этой цели.
При выборе инструмента полезно учитывать, кому потребуется доступ к данным. Компании обычно добиваются наибольшего роста производительности, когда в повышении производительности заинтересована вся компания, а не отдельный отдел. Подробнее о том, как заручиться поддержкой разных отделов, читайте в статье «Ускорение работы сайта с привлечением различных подразделений».
Интерпретация данных
При анализе данных о производительности важно обращать внимание на «хвосты» распределения. Данные RUM часто показывают, что производительность сильно различается: у одних пользователей скорость загрузки высокая, у других — низкая. Однако использование медианы для суммирования данных может скрыть это поведение.
Что касается показателей Web Vitals, Google использует процент «хороших» впечатлений, а не такие статистические данные, как медианы или средние значения, чтобы определить, соответствует ли сайт или страница рекомендуемым пороговым значениям. В частности, чтобы сайт или страница считались соответствующими пороговым значениям Core Web Vitals, 75% посещений страниц должны соответствовать пороговому значению «хорошо» для каждой метрики.
Измерение показателей Web Vitals с использованием лабораторных данных
Лабораторные данные , также известные как синтетические данные, собираются из контролируемой среды, а не от реальных пользователей. В отличие от данных RUM, лабораторные данные могут быть собраны из предпроизводственных сред и, следовательно, включены в рабочие процессы разработки и процессы непрерывной интеграции. Примерами инструментов для сбора синтетических данных являются Lighthouse и WebPageTest.
Соображения
Между данными RUM и лабораторными данными всегда будут расхождения, особенно если условия сети, тип устройства или местоположение лабораторной среды существенно отличаются от условий пользователей. Однако при сборе лабораторных данных, в частности, по показателям Web Vitals, важно учитывать несколько моментов:
- Наибольший объем отрисовки контента (LCP), измеренный в лабораторных условиях, может отличаться от показателей, измеренных в полевых условиях с использованием данных RUM из-за задержек в загрузке страницы (из-за перенаправлений, задержки при подключении к серверу или некэшированных данных), различного контента, отображаемого для разных пользователей в зависимости от экрана, или по другим причинам (включая баннеры cookie, персонализацию).
- Кумулятивный сдвиг макета (CLS), измеряемый в лабораторных условиях, может быть искусственно занижен по сравнению с CLS, наблюдаемым в данных RUM. Многие лабораторные инструменты просто загружают страницу, не взаимодействуя с ней. В результате они фиксируют только сдвиги макета, происходящие во время первоначальной загрузки страницы. В отличие от этого, CLS, измеряемый инструментами RUM, фиксирует непредвиденные сдвиги макета , происходящие на протяжении всего жизненного цикла страницы.
- Время взаимодействия до следующей отрисовки (INP) невозможно измерить в лабораторных условиях, поскольку оно требует взаимодействия пользователя со страницей. Поэтому рекомендуемым лабораторным показателем INP является общее время блокировки (TBT). TBT измеряет «общее время между первой отрисовкой контента и временем до интерактивности, в течение которого страница не реагирует на пользовательский ввод». Хотя INP и TBT рассчитываются по-разному, оба показателя отражают заблокированный основной поток во время процесса загрузки. Когда основной поток заблокирован, браузер с задержкой реагирует на действия пользователя.
Инструменты
Эти инструменты можно использовать для сбора лабораторных измерений Web Vitals:
- Инструменты разработчика Chrome измеряют и выводят данные по основным веб-показателям для заданной страницы в режиме реального времени на панели «Производительность». Это представление предоставляет разработчикам обратную связь по производительности в режиме реального времени при внесении изменений в код.
- Lighthouse. Lighthouse предоставляет отчёты по LCP, CLS и TBT, а также освещает возможные улучшения производительности. Lighthouse доступен в Chrome DevTools в виде пакета npm и может быть интегрирован в рабочие процессы непрерывной интеграции с помощью Lighthouse CI .
- WebPageTest включает данные Web Vitals в стандартную отчётность. WebPageTest полезен для сбора информации о Web Vitals при определённых условиях устройства и сети.