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