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