Web Vitals — это инициатива Google, направленная на предоставление унифицированных рекомендаций по сигналам качества веб-страниц, которые необходимы для обеспечения удобства работы пользователей в Интернете. Его цель — упростить широкий спектр доступных инструментов измерения производительности и помочь владельцам сайтов сосредоточиться на наиболее важных показателях — основных веб-показателях .
Основные веб-показатели
Основные веб-показатели — это подмножество веб-показателей, которые применяются ко всем веб-страницам, должны измеряться всеми владельцами сайтов и отображаются во всех инструментах Google. Каждый из основных веб-показателей представляет собой отдельный аспект пользовательского опыта, поддается измерению в полевых условиях и отражает реальный опыт достижения критического, ориентированного на пользователя результата.
Метрики, составляющие основные веб-показатели, со временем будут меняться . Текущий набор фокусируется на трёх аспектах пользовательского опыта: загрузке , интерактивности и визуальной стабильности . Он включает в себя следующие показатели:
- Самая большая краска по содержанию (LCP) : измеряет производительность загрузки . Чтобы обеспечить хорошее взаимодействие с пользователем, LCP должен произойти в течение 2,5 секунд после первого начала загрузки страницы.
- Interaction to Next Paint (INP) : измеряет интерактивность . Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь INP 200 миллисекунд или меньше.
- Совокупный сдвиг макета (CLS) : измеряет визуальную стабильность . Чтобы обеспечить хорошее взаимодействие с пользователем, must должен поддерживать CLS 0,1. или менее.
Для каждого из этих показателей, чтобы гарантировать достижение рекомендуемой цели для большинства ваших пользователей, хорошим порогом для измерения является 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Инструменты, которые оценивают соответствие Core Web Vitals, должны считать страницу соответствующей, если она соответствует рекомендуемым целевым показателям на уровне 75-го процентиля для каждого из этих трех показателей.
Жизненный цикл
Метрики на треке Core Web Vitals проходят жизненный цикл, состоящий из трех этапов: экспериментальный, ожидающий и стабильный.
Каждый этап предназначен для того, чтобы сигнализировать разработчикам, как им следует думать о каждой метрике:
- Экспериментальные метрики — это перспективные основные веб-показатели, которые все еще могут претерпевать значительные изменения в зависимости от тестирования и отзывов сообщества.
- Ожидающие метрики — это будущие основные веб-показатели, которые прошли стадию тестирования и обратной связи и имеют четко определенные сроки, чтобы стать стабильными.
- Стабильные метрики — это текущий набор основных веб-показателей, которые Chrome считает необходимыми для обеспечения хорошего пользовательского опыта.
Основные веб-показатели находятся на следующих стадиях жизненного цикла:
Экспериментальный
Когда метрика изначально разрабатывается и попадает в экосистему, она считается экспериментальной метрикой .
Цель экспериментального этапа — оценить пригодность метрики, сначала исследуя проблему, которую необходимо решить, и, возможно, повторяя то, что предыдущие метрики, возможно, не смогли решить. Например, INP изначально был представлен в качестве экспериментальной метрики в 2022 году для более комплексного решения проблем производительности во время работы Интернета, чем задержка первого ввода (FID) .
Экспериментальная фаза жизненного цикла Core Web Vitals также призвана обеспечить гибкость при разработке метрики за счет выявления ошибок и даже изучения изменений в ее первоначальном определении. Это также этап, на котором обратная связь от сообщества наиболее важна.
В ожидании
Когда команда Chrome определяет, что экспериментальная метрика получила достаточную обратную связь и доказала свою эффективность, она становится метрикой, ожидающей рассмотрения . Например, в 2023 году INP был переведен из экспериментального статуса в ожидающий статус с намерением в конечном итоге вывести из эксплуатации FID.
Ожидаемые показатели сохраняются на этом этапе в течение как минимум шести месяцев, чтобы дать экосистеме время на адаптацию. Отзывы сообщества остаются важным аспектом этого этапа, поскольку все больше разработчиков начинают использовать эту метрику.
Стабильный
Когда метрика-кандидат Core Web Vital доработана, она становится стабильной метрикой . Именно тогда метрика может стать ключевым веб-важным фактором.
Стабильные метрики активно поддерживаются, и в них могут быть исправлены ошибки и изменены определения. Стабильные показатели Core Web Vitals не будут меняться чаще одного раза в год. Любые изменения в Core Web Vital будут четко указаны в официальной документации метрики, а также в журнале изменений метрики. Основные веб-показатели также включаются в любые оценки.
Стабильные показатели не обязательно постоянны. Стабильную метрику можно удалить и заменить другой метрикой, которая более эффективно решает проблемную область. Именно это произошло с FID, поскольку в 2024 году INP стал стабильным показателем Core Web Vital.
Измеряйте и формируйте отчеты об основных веб-показателях
Google считает, что основные веб-показатели имеют решающее значение для любого опыта работы в Интернете. В результате компания стремится отображать эти показатели во всех своих популярных инструментах . В следующих разделах подробно описано, какие инструменты поддерживают Core Web Vitals.
Полевые инструменты для измерения основных веб-показателей
В отчете об опыте пользователей Chrome собираются анонимные реальные данные измерений пользователей для каждого основного веб-показателя. Эти данные позволяют владельцам сайтов быстро оценить их эффективность, не требуя ручной настройки аналитики для своих страниц, а также используются в таких инструментах, как PageSpeed Insights и отчете Core Web Vitals в Search Console.
| ЛКП | ИЯФ | ЦЛС | |
| Отчет об опыте использования Chrome | |||
| Статистика PageSpeed | |||
| Search Console (отчет «Основные веб-показатели») |
Данные, предоставленные отчетом об опыте работы пользователей Chrome, предлагают быстрый способ оценить производительность сайта, но они не предоставляют подробную телеметрию по просмотрам страниц, которая часто необходима для точной диагностики, мониторинга и быстрого реагирования на регрессии. В результате мы настоятельно рекомендуем сайтам настроить собственный мониторинг реальных пользователей.
Измерение основных веб-показателей с помощью JavaScript
Каждый из основных веб-показателей можно измерить в JavaScript с использованием стандартных веб-API.
Самый простой способ измерить все основные веб-показатели — использовать библиотеку JavaScript web-vitals , небольшую, готовую к использованию оболочку API, которая измеряет каждую метрику способом, который точно соответствует тому, как о них сообщают инструменты Google.
С помощью библиотеки web-vitals измерение каждой метрики так же просто, как вызов одной функции (полное описание использования и подробную информацию об API см. в документации):
import {onCLS, onINP, onLCP} 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});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
После того, как вы настроите свой сайт для использования библиотеки Web-Vitals для измерения и отправки данных Core Web Vitals в конечную точку аналитики, следующим шагом будет агрегирование этих данных и составление отчета по ним, чтобы увидеть, соответствуют ли ваши страницы рекомендуемым пороговым значениям как минимум в течение 75% посещений страниц.
Хотя некоторые поставщики аналитики имеют встроенную поддержку показателей Core Web Vitals, даже те, у которых ее нет, должны включать базовые функции настраиваемых показателей, которые позволяют измерять Core Web Vitals в их инструменте.
Одним из примеров этого является отчет о веб-показателях , который позволяет владельцам сайтов измерять свои основные веб-показатели с помощью Google Analytics. Рекомендации по измерению основных веб-показателей с помощью других инструментов аналитики см. в разделе «Рекомендации по измерению веб-показателей на местах» .
Вы также можете создавать отчеты по каждому из основных веб-показателей без написания кода, используя расширение Chrome Web Vitals . Это расширение использует библиотеку web-vitals для измерения каждого из этих показателей и отображения их пользователям при просмотре веб-страниц.
Это расширение может быть полезно для понимания эффективности ваших собственных сайтов, сайтов ваших конкурентов и Интернета в целом.
| ЛКП | ИЯФ | ЦЛС | |
|---|---|---|---|
| веб-виталы | |||
| Расширение веб-показателей |
Разработчики, которые предпочитают измерять эти метрики напрямую с помощью базовых веб-API, могут вместо этого использовать эти руководства по метрикам для получения подробной информации о реализации:
Дополнительные рекомендации по измерению этих показателей с помощью популярных аналитических служб или собственных инструментов аналитики см. в разделе «Рекомендации по измерению веб-показателей на местах» .
Лабораторные инструменты для измерения основных веб-показателей
Хотя все основные веб-показатели являются, в первую очередь, показателями на местах, многие из них также поддаются измерению в лаборатории.
Лабораторные измерения — лучший способ проверить производительность функций во время разработки. Это также лучший способ обнаружить снижение производительности до того, как оно произойдет.
Следующие инструменты можно использовать для измерения основных веб-показателей в лабораторной среде:
| ЛКП | ИЯФ | ЦЛС | |
|---|---|---|---|
| Инструменты разработчика Chrome | (вместо этого используйте TBT ) | ||
| Маяк | (вместо этого используйте TBT ) |
Такие инструменты, как Lighthouse, которые загружают страницы в моделируемой среде без участия пользователя, не могут измерить INP, поскольку в них нет пользовательского ввода. Однако показатель общего времени блокировки (TBT) поддается измерению в лаборатории и является приемлемым показателем проблем INP, которые могут возникнуть из-за конфликтов в основном потоке во время запуска. Оптимизация производительности, которая улучшает TBT в лаборатории, должна улучшить INP в полевых условиях. Дополнительные рекомендации см. в разделе Рекомендации по улучшению результатов .
Хотя лабораторные измерения являются важной частью предоставления отличных впечатлений, они не заменяют измерения в полевых условиях. Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, условий его сети, других процессов, которые могут выполняться на устройстве, и того, как они взаимодействуют со страницей. Фактически, на оценку каждого из показателей Core Web Vitals может влиять взаимодействие с пользователем. Только полевые измерения могут точно отразить полную картину.
Рекомендации по улучшению ваших результатов
Следующие руководства предлагают конкретные рекомендации по оптимизации страниц для каждого из основных веб-показателей:
Другие важные веб-показатели
Хотя основные веб-показатели являются важнейшими показателями для понимания и обеспечения отличного пользовательского опыта, существуют и другие важные показатели.
Эти другие веб-показатели часто служат прокси или дополнительными показателями для основных веб-показателей, помогая охватить большую часть опыта или помочь в диагностике конкретной проблемы.
Например, время до первого байта (TTFB) и первая отрисовка содержимого (FCP) являются жизненно важными аспектами процесса загрузки , и оба они полезны при диагностике проблем с LCP (медленное время ответа сервера или ресурсы, блокирующие рендеринг , соответственно).
Аналогичным образом, такой показатель, как общее время блокировки (TBT), является жизненно важным лабораторным показателем для выявления и диагностики потенциальных проблем с интерактивностью , которые могут повлиять на INP. Однако он не является частью набора основных веб-показателей, поскольку его невозможно измерить на местах и он не отражает результат, ориентированный на пользователя .
Изменения в веб-показателях
Web Vitals и Core Web Vitals представляют собой лучшие доступные сегодня сигналы для измерения качества взаимодействия в Интернете, но эти сигналы не идеальны, и следует ожидать будущих улучшений или дополнений.
Основные веб-показатели актуальны для всех веб-страниц и представлены в соответствующих инструментах Google. Поскольку изменения в этих показателях имеют далеко идущие последствия, разработчикам следует ожидать стабильности определений и пороговых значений основных веб-показателей, а также предварительного уведомления и предсказуемого графика обновлений.
Другие веб-показатели часто зависят от контекста или инструмента и могут быть более экспериментальными, чем основные веб-показатели. Таким образом, их определения и пороговые значения могут меняться с большей частотой.
Изменения всех веб-показателей документируются в этом общедоступном журнале изменений.