Hero Image

Web Vitals

Web Vitals

Обновлено
Appears in: Web Vitals

Оптимизация качества взаимодействия с пользователемключ к долгосрочному успеху любого сайта в Интернете. Web Vitals поможет владельцам бизнеса, маркетологам или разработчикам количественно оценить впечатления от сайта и определить возможности для улучшения.

Обзор #

Web Vitalsэто инициатива Google, цель которойпредоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете.

За прошедшие годы компания Google предоставила ряд инструментов для измерения производительности и ведения отчетности. Хотя среди разработчиков и есть эксперты по использованию этих инструментов, остальным сложно уследить за обилием средств и показателей.

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

Core Web Vitals #

Core Web Vitalsэто часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.

Метрики Core Web Vitals будут развиваться с течением времени. Текущий набор за 2020 год фокусируется на трех аспектах взаимодействия с пользователем: скорости загрузки страниц сайта, интерактивности и визуальной стабильности, и включает следующие показатели (и их соответствующие пороговые значения):

Рекомендации по пороговому значению скорости загрузки основного контента Рекомендации по пороговому значению времени ожидания до первого взаимодействия с контентом Рекомендации по пороговому значению совокупного смещения макета

Рекомендуемым порогом для вышеперечисленных показателей считается 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.

Инструменты аналитики должны положительно оценивать Core Web Vitals страницы, если все три вышеперечисленных показателя соответствуют рекомендуемым на уровне 75-го процентиля.

Чтобы узнать больше об исследованиях и методологии, лежащих в основе этих рекомендаций, см. «Определение пороговых значений показателей Core Web Vitals»

Инструменты для измерения Core Web Vitals и ведения отчетности #

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

Инструменты для измерения Core Web Vitals в полевых условиях #

Отчет Chrome User Experience Report собирает анонимные, реальные данные пользователей для каждого показателя Core Web Vital. Эти данные позволяют владельцам сайтов быстро оценивать производительность страниц, исключая ручной сбор аналитики и позволяя использовать такие мощные инструменты, как PageSpeed Insights и отчет Core Web Vitals report в Search Console.

Чтобы узнать, как использовать эти инструменты и какой инструмент лучше подходит для вашего случая, см. «Как начать измерять Web Vitals»

Данные, предоставленные Chrome User Experience Report, предлагают быстрый способ оценки производительности сайтов, но не предоставляют подробную телеметрию для каждого просмотра страницы, которая часто необходима для точной диагностики, отслеживания и быстрого реагирования на регрессии. Поэтому мы настоятельно рекомендуем сайтам настроить собственный мониторинг реальных пользователей.

Измерение Core Web Vitals в JavaScript #

Показатели Core Web Vitals можно измерить в JavaScript с помощью стандартных веб-API.

Самый простой способ измерить все показатели Core Web Vitalsиспользовать JavaScript-библиотеку web-Vitals, которая представляет собой небольшую, готовую к работе оболочку для базовых веб-API, и измеряет каждую метрику аналогично инструментам Google, перечисленным выше.

С библиотекой web-vitals измерение каждой метрики сводится к простому вызову функции (см. документацию об использовании и подробные сведения об API):

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

После настройки сайта на использование библиотеки web-vitals для измерения и отправки данных Core Web Vitals в конечную точку аналитики, следующий шагагрегирование этих данных и создание отчетов по ним, чтобы увидеть, соответствуют ли ваши страницы рекомендуемым пороговым значениям по крайней мере для 75% посещений страниц.

Поставщики аналитикикак с интегрированной поддержкой показателей Core Web Vitals, так и без неедолжны включать базовые функции пользовательских метрик, позволяющие измерять Core Web Vitals в их инструментах.

Как раз такой примеротчет Web Vitals Report, который позволяет владельцам сайтов измерять показатели Core Web Vitals с помощью Google Analytics. Инструкции по измерению Core Web Vitals с помощью других инструментов аналитики см. в статье «Рекомендации по измерению Web Vitals в полевых условиях».

Кроме того, можно создавать отчеты по каждому из показателей Core Web Vitals без написания кода, используя расширение Web Vitals для Chrome. Расширение применяет библиотеку web-vitals для измерения показателей и их показа пользователям при просмотре веб-страниц.

Расширение полезно для понимания производительности ваших сайтов, сайтов конкурентов и Интернета в целом.

Разработчики, предпочитающие измерять эти метрики непосредственно через базовые веб-API, могут обратиться к этим руководствам по метрикам для получения подробной информации о реализации:

Дополнительные инструкции по измерению этих показателей с помощью популярных аналитических сервисов (или собственных аналитических инструментов) см. в статье «Рекомендации по измерению Web Vitals в полевых условиях»

Инструменты для измерения Core Web Vitals в лабораторных условиях #

Хотя Core Web Vitals являются, прежде всего, полевыми показателями, некоторые из них также можно измерить в лабораторных условиях.

Измерения в лабораторных условияхлучший способ проверить производительность функций во время разработки и до релиза. Это также лучший способ выявить снижение производительности до того, как оно произойдет.

Следующие инструменты можно использовать для измерения Core Web Vitals в лабораторных условиях:

LCPFIDCLS
Chrome DevTools✘ (используйте для этого TBT)
Lighthouse✘ (используйте для этого TBT)

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

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

Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, состояния его сети, других процессов, выполняемых на устройстве, и того, как они взаимодействуют со страницей. Фактически, каждый из показателей Core Web Vitals зависит от взаимодействия с пользователем. Только измерения в полевых условиях позволяют увидеть полную картину.

Рекомендации для улучшения оценки ваших страниц #

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

Другие показатели Web Vitals #

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

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

Например, метрики Time to First Byte (TTFB) : Время до первого байта и First Contentful Paint (FCP) : Первая отрисовка контента являются критически важными аспектами загрузки и полезны для диагностики проблем с LCP (медленное время отклика сервера или ресурсы, блокирующие рендеринг).

Аналогично, такие показатели, как Total Blocking Time (TBT) : Общее время блокировки и Time to Interactive (TTI) : Время до интерактивности, являются крайне важными лабораторными метриками для выявления и диагностики потенциальных проблем с интерактивностью, которые могут повлиять на FID. Однако они не входят в набор Core Web Vitals, потому что не поддаются измерению в полевых условиях и не отражают результаты, ориентированные на пользователя.

Развитие Web Vitals #

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

Core Web Vitals актуальны для всех веб-страниц и представлены в соответствующих инструментах Google. Изменения в этих показателях могут иметь далеко идущие последствия для ранжирования; поэтому способ определения и пороговые значения Core Web Vitals будут стабильными, а обновления будут проводиться с предварительным уведомлением разработчиков и с предсказуемой ежегодной периодичностью.

Другие Web Vitals больше зависят от контекста или инструмента и более экспериментальны, чем Core Web Vitals. Поэтому их способ определения и пороговые значения могут меняться чаще.

Для всех Web Vitals изменения будут четко задокументированы в общедоступном ЖУРНАЛЕ ИЗМЕНЕНИЙ .

Последнее обновление: Улучшить статью