Опубликовано: 4 мая 2020 г.
Оптимизация качества пользовательского опыта является ключом к долгосрочному успеху любого сайта в интернете. Независимо от того, являетесь ли вы владельцем бизнеса, маркетологом или разработчиком, Web Vitals поможет вам количественно оценить качество вашего сайта и выявить возможности для его улучшения.
Обзор
Web Vitals — это инициатива Google, призванная предоставить единые рекомендации по показателям качества, которые имеют решающее значение для обеспечения отличного пользовательского опыта в интернете.
За прошедшие годы Google предоставила множество инструментов для измерения и анализа производительности. Некоторые разработчики являются экспертами в использовании этих инструментов, в то время как другие считают обилие инструментов и метрик сложным для отслеживания.
Владельцам сайтов не нужно быть экспертами по производительности, чтобы понимать качество взаимодействия с пользователями. Инициатива Web Vitals призвана упростить этот процесс и помочь сайтам сосредоточиться на наиболее важных показателях — основных параметрах веб-сайта ( Core Web Vitals ).
Основные показатели веб-технологий
Основные показатели веб-безопасности (Core Web Vitals) — это подмножество показателей веб-безопасности, которые относятся ко всем веб-страницам, должны измеряться всеми владельцами сайтов и будут отображаться во всех инструментах Google. Каждый из основных показателей веб-безопасности представляет собой отдельный аспект пользовательского опыта, поддается измерению на практике и отражает реальный опыт критически важного для пользователя результата.
Показатели, составляющие основу Core Web Vitals, будут развиваться со временем. Текущий набор фокусируется на трех аспектах пользовательского опыта — загрузке , интерактивности и визуальной стабильности — и включает следующие метрики (и соответствующие им пороговые значения):
- Показатель Largest Contentful Paint (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 проходят жизненный цикл, состоящий из трех фаз: экспериментальная, ожидающая и стабильная.
Каждый этап призван подсказать разработчикам, как им следует оценивать каждую метрику:
- Экспериментальные метрики представляют собой перспективные показатели Core Web Vitals, которые могут претерпевать значительные изменения в зависимости от результатов тестирования и отзывов сообщества.
- Ожидаемые метрики — это будущие показатели Core Web Vitals, прошедшие этап тестирования и сбора обратной связи, и имеющие четко определенные сроки стабилизации.
- «Стабильные метрики» — это текущий набор основных параметров веб-приложений (Core Web Vitals), которые Chrome считает необходимыми для обеспечения отличного пользовательского опыта.
Основные параметры веб-инфраструктуры находятся на следующих этапах жизненного цикла:
Экспериментальный
Когда метрика впервые разрабатывается и входит в экосистему, она считается экспериментальной метрикой .
Цель экспериментальной фазы — оценить пригодность метрики, сначала путем изучения решаемой проблемы, а затем, возможно, путем итеративного улучшения тех аспектов, которые не были учтены в предыдущих метриках. Например, метрика «Взаимодействие до следующей отрисовки» (INP) изначально была разработана как экспериментальная метрика для более комплексного решения проблем производительности во время выполнения веб-приложений, чем метрика «Первая задержка ввода» (FID) .
Экспериментальная фаза жизненного цикла Core Web Vitals также призвана обеспечить гибкость в разработке метрики за счет выявления ошибок и даже изучения изменений в ее первоначальном определении. Это также фаза, на которой обратная связь от сообщества имеет наибольшее значение.
В ожидании
Когда команда Chrome определяет, что экспериментальная метрика получила достаточно отзывов и доказала свою эффективность, она становится метрикой, находящейся в процессе разработки . Например, в 2023 году метрика INP была переведена из экспериментального статуса в статус «в процессе разработки» с намерением в конечном итоге отказаться от FID (Financial Instructed ID).
Показатели, находящиеся в процессе обработки, хранятся на этом этапе не менее шести месяцев, чтобы дать экосистеме время адаптироваться. Обратная связь от сообщества остается важным аспектом этого этапа, поскольку все больше разработчиков начинают использовать этот показатель.
Стабильный
Когда метрика-кандидат в рамках программы Core Web Vital окончательно утверждается, она становится стабильной . Именно тогда метрика может стать метрикой Core Web Vital.
Стабильные метрики активно поддерживаются и могут подвергаться исправлениям ошибок и изменениям в определениях. Стабильные метрики Core Web Vitals не будут меняться чаще одного раза в год. Любое изменение метрики Core Web Vitals будет четко указано в официальной документации метрики, а также в журнале изменений метрики. Метрики Core Web Vitals также включаются во все оценки.
Инструменты для измерения и составления отчетов по показателям Core Web Vitals.
Google считает, что основные показатели веб-безопасности (Core Web Vitals) имеют решающее значение для всех веб-интерфейсов. Поэтому компания стремится отображать эти метрики во всех своих популярных инструментах . В следующих разделах подробно описано, какие инструменты поддерживают основные показатели веб-безопасности.
Инструменты для измерения основных показателей веб-технологий.
Отчет Chrome User Experience Report собирает анонимизированные данные об уровне обслуживания реальных пользователей для каждого ключевого показателя Core Web Vitals. Эти данные позволяют владельцам сайтов быстро оценивать свою производительность без необходимости вручную настраивать аналитику на своих страницах, и используются такими инструментами, как Chrome DevTools , PageSpeed Insights и отчетом Core Web Vitals в Search Console.
| ЛКП | ИНП | CLS | |
| Отчет о пользовательском опыте Chrome | |||
| Инструменты разработчика Chrome | |||
| PageSpeed Insights | |||
| Search Console (отчет Core Web Vitals) |
Данные, предоставляемые отчетом Chrome User Experience Report, позволяют быстро оценить производительность сайтов, но они не содержат подробной телеметрии по каждому просмотру страницы, которая часто необходима для точной диагностики, мониторинга и быстрого реагирования на проблемы. В результате мы настоятельно рекомендуем сайтам настроить собственный мониторинг с участием реальных пользователей.
Измерение основных показателей веб-приложений с помощью 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, могут вместо этого использовать следующие руководства по метрикам для получения подробной информации о реализации:
Дополнительные рекомендации по измерению этих показателей с помощью популярных аналитических сервисов или собственных инструментов аналитики см. в разделе «Рекомендации по измерению показателей Web Vitals в полевых условиях» .
Инструменты для лабораторных работ по измерению основных показателей веб-технологий (Core Web Vitals)
Хотя все основные показатели веб-показателей (Core Web Vitals) в первую очередь являются полевыми метриками, многие из них также измеримы в лабораторных условиях.
Тестирование в лабораторных условиях — лучший способ проверить производительность функций на этапе разработки, до их выпуска для пользователей. Это также лучший способ выявить регрессию производительности до того, как она проявится.
Для измерения основных показателей веб-доступа в лабораторных условиях можно использовать следующие инструменты:
| ЛКП | ИНП | CLS | |
|---|---|---|---|
| Инструменты разработчика Chrome | |||
| Маяк | (использовать TBT вместо этого) |
Хотя лабораторные измерения являются неотъемлемой частью обеспечения высокого качества обслуживания, они не заменяют полевые измерения.
Производительность сайта может существенно различаться в зависимости от возможностей устройства пользователя, состояния его сети, запущенных на устройстве других процессов и способа взаимодействия с страницей. Фактически, на каждый из показателей Core Web Vitals может влиять взаимодействие с пользователем. Только полевые измерения могут точно отразить полную картину.
Рекомендации по улучшению ваших результатов
Следующие руководства содержат конкретные рекомендации по оптимизации ваших страниц для каждого из основных веб-критериев:
Существует множество способов улучшить показатели Core Web Vitals, и каждый подход имеет разную степень влияния, актуальности и удобства использования в зависимости от ситуации. Краткий список лучших рекомендаций команды Chrome можно найти в статье «Наиболее эффективные способы улучшения Core Web Vitals» .
Другие важные веб-данные
Хотя основные показатели веб-безопасности (Core Web Vitals) являются критически важными метриками для понимания и обеспечения превосходного пользовательского опыта, существуют и другие вспомогательные метрики.
Эти другие метрики могут служить косвенными показателями — или дополнительными метриками к трем основным показателям веб-активности — чтобы помочь охватить большую часть пользовательского опыта или помочь в диагностике конкретной проблемы.
Например, метрики Time to First Byte (TTFB) и First Contentful Paint (FCP) являются важными аспектами процесса загрузки и полезны для диагностики проблем с LCP (медленное время отклика сервера или ресурсы, блокирующие рендеринг , соответственно).
Аналогично, такой показатель, как общее время блокировки (TBT), является лабораторным показателем, имеющим решающее значение для выявления и диагностики потенциальных проблем интерактивности , которые могут повлиять на INP. Однако он не входит в набор основных веб-показателей, поскольку не поддается измерению в полевых условиях и не отражает результаты, ориентированные на пользователя .
Изменения в Web Vitals
Показатели Web Vitals и Core Web Vitals представляют собой лучшие из доступных на сегодняшний день сигналов для оценки качества взаимодействия с веб-сайтами, однако эти сигналы не являются идеальными, и следует ожидать будущих улучшений или дополнений.
Показатели Core Web Vitals актуальны для всех веб-страниц и отображаются во всех соответствующих инструментах Google. Изменения этих метрик будут иметь далеко идущие последствия; поэтому разработчикам следует ожидать, что определения и пороговые значения Core Web Vitals останутся стабильными, а обновления будут выпускаться с предварительным уведомлением и с предсказуемой ежегодной периодичностью.
Остальные показатели Web Vitals часто зависят от контекста или используемого инструмента и могут быть более экспериментальными, чем основные показатели Web Vitals. Поэтому их определения и пороговые значения могут меняться чаще.
Все изменения в Web Vitals будут четко задокументированы в этом общедоступном CHANGELOG .