Web Vitals

Apr 30, 2020 • Обновлено Jul 21, 2020

Appears in: Web Vitals

Philip Walton

• Twitter
• GitHub
• Blog

Оптимизация качества взаимодействия с пользователемключ к долгосрочному успеху любого сайта в Интернете. Web Vitals поможет владельцам бизнеса, маркетологам или разработчикам количественно оценить впечатления от сайта и определить возможности для улучшения.

Обзор #

Web Vitalsэто инициатива Google, цель которойпредоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете.

За прошедшие годы компания Google предоставила ряд инструментов для измерения производительности и ведения отчетности. Хотя среди разработчиков и есть эксперты по использованию этих инструментов, остальным сложно уследить за обилием средств и показателей.

Владельцы сайтов не должны быть гуру производительности, чтобы понимать качество обслуживания, которое они предоставляют своим пользователям. Цель инициативы Web Vitalsупростить сложившуюся ситуацию и помочь сосредоточиться на наиболее важных показателяхCore Web Vitals.

Core Web Vitals #

Core Web Vitalsэто часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.

Метрики 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 и ведения отчетности #

Google верит, что показатели Core Web Vitals критически важны при оценке взаимодействия с пользователями. Поэтому компания стремится отображать эти показатели во всех своих популярных инструментах. Далее подробно описано, какие инструменты поддерживают Core Web Vitals.

Инструменты для измерения Core Web Vitals в полевых условиях #

Отчет Chrome User Experience Report собирает анонимные, реальные данные пользователей для каждого показателя Core Web Vital. Эти данные позволяют владельцам сайтов быстро оценивать производительность страниц, исключая ручной сбор аналитики и позволяя использовать такие мощные инструменты, как PageSpeed Insights и отчет Core Web Vitals report в Search Console.

Данные, предоставленные 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, могут обратиться к этим руководствам по метрикам для получения подробной информации о реализации:

• Измерение LCP в JavaScript
• Измерение FID в JavaScript
• Измерение CLS в JavaScript

Инструменты для измерения Core Web Vitals в лабораторных условиях #

Хотя Core Web Vitals являются, прежде всего, полевыми показателями, некоторые из них также можно измерить в лабораторных условиях.

Измерения в лабораторных условияхлучший способ проверить производительность функций во время разработки и до релиза. Это также лучший способ выявить снижение производительности до того, как оно произойдет.

Следующие инструменты можно использовать для измерения Core Web Vitals в лабораторных условиях:

Измерения в лабораторных условиях являются неотъемлемой частью предоставления отличного пользовательского опыта, но они не могут заменить измерения в полевых условиях.

Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, состояния его сети, других процессов, выполняемых на устройстве, и того, как они взаимодействуют со страницей. Фактически, каждый из показателей Core Web Vitals зависит от взаимодействия с пользователем. Только измерения в полевых условиях позволяют увидеть полную картину.

Рекомендации для улучшения оценки ваших страниц #

После измерения Core Web Vitals и определения областей, требующих улучшения, нужно переходить к оптимизации. Следующие руководства предлагают конкретные рекомендации по оптимизации страниц под каждый из показателей Core Web Vitals:

• Оптимизация LCP
• Оптимизация FID
• Оптимизация CLS

Другие показатели Web Vitals #

Хотя показатели Core 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 изменения будут четко задокументированы в общедоступном ЖУРНАЛЕ ИЗМЕНЕНИЙ .