Опубликовано: 4 мая 2020 г.
Оптимизация качества взаимодействия с пользователем является ключом к долгосрочному успеху любого сайта в Интернете. Независимо от того, являетесь ли вы владельцем бизнеса, маркетологом или разработчиком, Web Vitals может помочь вам количественно оценить качество вашего сайта и определить возможности для его улучшения.
Обзор
Web Vitals — это инициатива Google, направленная на предоставление единого руководства по качественным сигналам, которые необходимы для обеспечения комфортного взаимодействия с пользователем в Интернете.
На протяжении многих лет Google предоставил ряд инструментов для измерения и составления отчетов о производительности. Некоторые разработчики являются экспертами в использовании этих инструментов, в то время как другим сложно уследить за обилием инструментов и показателей.
Владельцам сайтов не обязательно быть экспертами по производительности, чтобы понимать качество обслуживания, которое они предоставляют своим пользователям. Инициатива Web Vitals направлена на упрощение ландшафта и помогает сайтам сосредоточиться на наиболее важных показателях — Core Web Vitals .
Основные веб-показатели
Основные веб-показатели — это подмножество веб-показателей, которые применяются ко всем веб-страницам, должны измеряться всеми владельцами сайтов и будут отображаться во всех инструментах Google. Каждый из основных веб-показателей представляет собой отдельный аспект пользовательского опыта, поддается измерению в полевых условиях и отражает реальный опыт достижения критического , ориентированного на пользователя результата.
Метрики, составляющие основные веб-показатели, со временем будут меняться . Текущий набор фокусируется на трех аспектах пользовательского опыта — загрузке , интерактивности и визуальной стабильности — и включает в себя следующие показатели (и их соответствующие пороговые значения):
- Самая большая краска по содержанию (LCP) : измеряет производительность загрузки . Чтобы обеспечить удобство работы пользователя, LCP должен происходить в течение 2,5 секунд с момента первой загрузки страницы.
- Interaction to Next Paint (INP) : измеряет интерактивность . Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь INP 200 миллисекунд или меньше.
- Совокупный сдвиг макета (CLS) : измеряет визуальную стабильность . Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны поддерживать CLS 0,1. или меньше.
Чтобы гарантировать достижение рекомендуемой цели по этим показателям для большинства ваших пользователей, хорошим порогом для измерения является 75-й процентиль загрузки страниц, сегментированный по мобильным и настольным устройствам.
Инструменты, которые оценивают соответствие Core Web Vitals, должны учитывать передачу страницы, если она соответствует рекомендуемым целевым показателям на уровне 75-го процентиля для всех трех показателей Core Web Vitals.
Жизненный цикл
Метрики на треке Core Web Vitals проходят жизненный цикл, состоящий из трех этапов: экспериментальный, ожидающий и стабильный.
Каждый этап предназначен для того, чтобы сигнализировать разработчикам, как им следует думать о каждой метрике:
- Экспериментальные метрики — это перспективные основные веб-показатели, которые все еще могут претерпевать значительные изменения в зависимости от тестирования и отзывов сообщества.
- Ожидающие метрики — это будущие основные веб-показатели, которые прошли стадию тестирования и обратной связи и имеют четко определенные сроки, чтобы стать стабильными.
- Стабильные метрики — это текущий набор основных веб-показателей, которые Chrome считает необходимыми для обеспечения хорошего пользовательского опыта.
Основные веб-показатели находятся на следующих стадиях жизненного цикла:
Экспериментальный
Когда метрика изначально разрабатывается и попадает в экосистему, она считается экспериментальной метрикой .
Целью экспериментального этапа является оценка пригодности метрики, сначала путем изучения проблемы, которую необходимо решить, и, возможно, повторения того, что предыдущие метрики, возможно, не смогли решить. Например, Interaction to Next Paint (INP) изначально разрабатывался как экспериментальный показатель для более комплексного решения проблем производительности во время выполнения, присутствующих в Интернете, чем First Input Delay (FID) .
Экспериментальная фаза жизненного цикла Core Web Vitals также призвана обеспечить гибкость при разработке метрики за счет выявления ошибок и даже изучения изменений в ее первоначальном определении. Это также этап, на котором обратная связь от сообщества наиболее важна.
В ожидании
Когда команда Chrome определяет, что экспериментальная метрика получила достаточную обратную связь и доказала свою эффективность, она становится метрикой, ожидающей рассмотрения . Например, в 2023 году INP был переведен из экспериментального статуса в ожидающий статус с намерением в конечном итоге вывести из эксплуатации FID.
Ожидаемые показатели сохраняются на этом этапе в течение как минимум шести месяцев, чтобы дать экосистеме время на адаптацию. Отзывы сообщества остаются важным аспектом этого этапа, поскольку все больше разработчиков начинают использовать эту метрику.
Стабильный
Когда метрика-кандидат Core Web Vital окончательно определена, она становится стабильной метрикой . Именно тогда метрика может стать ключевым веб-важным фактором.
Стабильные метрики активно поддерживаются, и в них могут быть исправлены ошибки и изменены определения. Стабильные показатели Core Web Vitals не будут меняться чаще одного раза в год. Любые изменения в Core Web Vital будут четко указаны в официальной документации метрики, а также в журнале изменений метрики. Основные веб-показатели также включаются в любые оценки.
Инструменты для измерения и составления отчетов об основных веб-показателях
Google считает, что основные веб-показатели имеют решающее значение для любого опыта работы в Интернете. В результате компания стремится отображать эти показатели во всех своих популярных инструментах . В следующих разделах подробно описано, какие инструменты поддерживают Core Web Vitals.
Полевые инструменты для измерения основных веб-показателей
В отчете об опыте пользователей Chrome собираются анонимные реальные данные измерений пользователей для каждого основного веб-показателя. Эти данные позволяют владельцам сайтов быстро оценить их эффективность, не требуя от них вручную анализировать свои страницы, а также используются в таких инструментах, как Chrome DevTools , PageSpeed Insights и отчете Core Web Vitals в Search Console.
| ЛКП | ИЯФ | ЦЛС | |
| Отчет об опыте использования Chrome | |||
| Инструменты разработчика 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 в их инструменте.
Разработчики, которые предпочитают измерять эти метрики напрямую с помощью базовых веб-API, могут вместо этого использовать эти руководства по метрикам для получения подробной информации о реализации:
Дополнительные рекомендации по измерению этих показателей с помощью популярных аналитических служб или собственных инструментов аналитики см. в разделе «Рекомендации по измерению веб-показателей на местах» .
Лабораторные инструменты для измерения основных веб-показателей
Хотя все основные веб-показатели являются, в первую очередь, показателями на местах, многие из них также поддаются измерению в лаборатории.
Лабораторные измерения — лучший способ проверить производительность функций во время разработки, прежде чем они будут выпущены для пользователей. Это также лучший способ обнаружить снижение производительности до того, как оно произойдет.
Следующие инструменты можно использовать для измерения основных веб-показателей в лабораторной среде:
| ЛКП | ИЯФ | ЦЛС | |
|---|---|---|---|
| Инструменты разработчика Chrome | |||
| Маяк | (вместо этого используйте TBT ) |
Хотя лабораторные измерения являются неотъемлемой частью предоставления отличных впечатлений, они не заменяют измерения в полевых условиях.
Производительность сайта может существенно варьироваться в зависимости от возможностей устройства пользователя, условий его сети, других процессов, которые могут выполняться на устройстве, и того, как они взаимодействуют со страницей. Фактически, на оценку каждого из показателей Core Web Vitals может влиять взаимодействие с пользователем. Только полевые измерения могут точно отразить полную картину.
Рекомендации по улучшению ваших результатов
Следующие руководства предлагают конкретные рекомендации по оптимизации страниц для каждого из основных веб-показателей:
Существует много способов улучшить основные веб-показатели, и каждый подход имеет разный уровень воздействия, актуальности и простоты использования для каждой ситуации. Краткий список лучших рекомендаций команды Chrome см. в разделе «Наиболее эффективные способы улучшения основных веб-показателей» .
Другие важные веб-показатели
Хотя основные веб-показатели являются важнейшими показателями для понимания и обеспечения отличного пользовательского опыта, существуют и другие вспомогательные показатели.
Эти другие показатели могут служить прокси-метриками или дополнительными показателями для трех основных веб-показателей, чтобы помочь охватить большую часть опыта или помочь в диагностике конкретной проблемы.
Например, метрики «Время до первого байта» (TTFB) и «Первая отрисовка содержимого» (FCP) являются жизненно важными аспектами процесса загрузки и полезны при диагностике проблем с LCP (медленное время ответа сервера или ресурсы, блокирующие рендеринг , соответственно). .
Аналогичным образом, такой показатель, как общее время блокировки (TBT), является лабораторным показателем, жизненно важным для выявления и диагностики потенциальных проблем с интерактивностью , которые могут повлиять на INP. Однако они не являются частью набора основных веб-показателей, поскольку они не поддаются измерению на местах и не отражают ориентированный на пользователя результат.
Изменения в веб-показателях
Web Vitals и Core Web Vitals представляют собой наилучшие доступные сегодня сигналы, которые разработчики имеют для измерения качества взаимодействия с Интернетом, но эти сигналы не идеальны, и следует ожидать будущих улучшений или дополнений.
Основные веб-показатели актуальны для всех веб-страниц и представлены в соответствующих инструментах Google. Изменения этих показателей будут иметь далеко идущие последствия; Таким образом, разработчикам следует ожидать, что определения и пороговые значения основных веб-показателей будут стабильными, а обновления будут получать предварительное уведомление и предсказуемую ежегодную частоту.
Другие веб-показатели часто зависят от контекста или инструмента и могут быть более экспериментальными, чем основные веб-показатели. Таким образом, их определения и пороговые значения могут меняться с большей частотой.
Для всех веб-показателей изменения будут четко задокументированы в общедоступном CHANGELOG .