Оптимизация качества взаимодействия с пользователем - ключ к долгосрочному успеху любого сайта в Интернете. Независимо от того, являетесь ли вы владельцем бизнеса, маркетологом или разработчиком, Web Vitals может помочь вам количественно оценить впечатления от вашего сайта и определить возможности для улучшения.
Обзор
Web Vitals - это инициатива Google по предоставлению единого руководства по сигналам качества, которые необходимы для обеспечения удобного взаимодействия с пользователем в веб.
За прошедшие годы Google предоставил ряд инструментов для измерения и составления отчетов о производительности. Некоторые разработчики являются экспертами в использовании этих инструментов, в то время как другим сложно уследить за обилием как инструментов, так и показателей.
Владельцы сайтов не должны быть экспертами в оценке производительности, чтобы понимать качество обслуживания, которое они предоставляют своим пользователям. Инициатива Web Vitals направлена на упрощение общей картины и помогает сайтам сосредоточиться на наиболее важных показателях - Core Web Vitals.
Core Web Vitals
Core Web Vitals - это подмножество Web Vitals, которые применяются ко всем веб-страницам, должны измеряться всеми владельцами сайтов и будут отображаться во всех инструментах Google. Каждый из Core Web Vitals представляет собой отдельный аспект взаимодействия с пользователем, поддается измерению в боевом окружении и отражает реальный критически важный результат, ориентированный на взаимодействие c пользователем.
Метрики, составляющие Core Web Vitals, со временем будут развиваться. Текущий набор (на 2020 год) фокусируется на трех аспектах взаимодействия с пользователем - загрузке, интерактивности и визуальной стабильности - и включает следующие показатели (и их соответствующие пороговые значения):
- Largest Contentful Paint (LCP): измеряет производительность загрузки. Чтобы обеспечить удобство взаимодействия с пользователем, LCP должен происходить в течение 2,5 секунд после первой загрузки страницы.
- First Input Delay (FID): измеряет интерактивность. Чтобы обеспечить удобство работы пользователей, страницы должны иметь FID 100 миллисекунд или меньше.
- Cumulative Layout Shift (CLS): измеряет визуальную стабильность. Чтобы обеспечить удобство работы пользователей, CLSстраницы должен быть на уровне 0,1 или менее.
Чтобы убедиться, что вы достигли рекомендуемой цели для большинства пользователей, можно измерить и оценить 75% загрузок страниц как на мобильных, так на и настольных устройствах, для каждого из вышеперечисленных показателей.
Инструменты, которые оценивают соответствие страницы Core Web Vitals, должны считать страницу удовлетворяющей требованиям, если она на 75% соответствует допустимым значениям для всех трех вышеперечисленных показателей.
Чтобы узнать больше об исследованиях и методологии, лежащей в основе этих рекомендаций, см. определение пороговых значений метрик Core Web Vitals.
Инструменты для измерения и составления отчетов Core Web Vitals
Google считает, что Core Web Vitals критически важны для любого взаимодействия с веб. Поэтому компания стремится отображать эти показатели во всех своих популярных инструментах. В следующих разделах подробно описано, какие инструменты поддерживают Core Web Vitals.
Инструменты для измерения Core Web Vitals в продакшн
Отчет о пользовательском опыте Chrome собирает анонимные реальные данные о пользователях для каждого Core Web Vital. Эти данные позволяют владельцам сайтов быстро оценивать эффективность сайта, не требуя от них использования ручного инструментария аналитики на своих страницах, и позволяют использовать такие инструменты, как PageSpeed Insights и отчет Core Web Vitals в 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 во время разработки:
Такие инструменты, как Lighthouse, которые загружают страницы в смоделированной среде без участия пользователя, не могут измерить FID (действие пользователя отсутствует). Однако показатель общего времени блокировки (TBT) поддается измерениям и является отличным прокси для FID. Оптимизация производительности, улучшающая TBT в лаборатории, должна улучшить FID и в полевых условиях (см. рекомендации по производительности ниже).
Хотя измерения в процессе разработки являются неотъемлемой частью предоставления качественного пользовательского опыта, они не заменяют измерения в боевом окружении.
Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, состояния сети, других процессов, которые могут выполняться на устройстве, и того, как они взаимодействуют со страницей. Фактически, на каждую из метрик Core Web Vitals может повлиять взаимодействие с пользователем. Только измерения в продакшн могут показать полную картину.
Рекомендации для улучшения показателей
После того, как вы измерили Core Web Vitals и определили области, требующие улучшения, следующим шагом будет оптимизация. Следующие руководства предлагают конкретные рекомендации по оптимизации ваших страниц для каждого из Core Web Vitals:
Другие Web Vitals
В то время как Core Web Vitals являются критически важными показателями для понимания и обеспечения хорошего взаимодействия с пользователем, существуют и другие важные показатели.
Эти 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 изменения будут четко задокументированы в этом общедоступном CHANGELOG.