Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Обзор
  • Core Web Vitals
    • Инструменты для измерения Core Web Vitals и ведения отчетности
    • Рекомендации для улучшения оценки ваших страниц
  • Другие показатели Web Vitals
  • Развитие Web Vitals

Web Vitals

Apr 30, 2020 — Обновлено Jul 21, 2020
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки|Core Web Vitals
Philip Walton
Philip Walton
TwitterGitHubHomepage
Содержание
  • Обзор
  • Core Web Vitals
    • Инструменты для измерения Core Web Vitals и ведения отчетности
    • Рекомендации для улучшения оценки ваших страниц
  • Другие показатели Web Vitals
  • Развитие Web Vitals

Оптимизация качества взаимодействия с пользователем - ключ к долгосрочному успеху любого сайта в Интернете. 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»

Инструменты для измерения 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.

LCPFIDCLS
Chrome User Experience Report✔✔✔
PageSpeed Insights✔✔✔
Search Console (Core Web Vitals report)✔✔✔
Чтобы узнать, как использовать эти инструменты и какой инструмент лучше подходит для вашего случая, см. «Как начать измерять 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 для измерения показателей и их показа пользователям при просмотре веб-страниц.

Расширение полезно для понимания производительности ваших сайтов, сайтов конкурентов и Интернета в целом.

LCPFIDCLS
Web-Vitals✔✔✔
Расширение Web Vitals✔✔✔

Разработчики, предпочитающие измерять эти метрики непосредственно через базовые веб-API, могут обратиться к этим руководствам по метрикам для получения подробной информации о реализации:

  • Измерение LCP в JavaScript
  • Измерение FID в JavaScript
  • Измерение CLS в JavaScript
Дополнительные инструкции по измерению этих показателей с помощью популярных аналитических сервисов (или собственных аналитических инструментов) см. в статье «Рекомендации по измерению Web Vitals в полевых условиях»

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

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

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

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

LCPFIDCLS
Chrome DevTools✔✘ (используйте для этого TBT)✔
Lighthouse✔✘ (используйте для этого TBT)✔
Инструменты, подобные Lighthouse, которые загружают страницы в смоделированной среде без участия пользователя, не могут измерить FID (нет пользовательского ввода). Тем не менее показатель Total Blocking Time (TBT) (общее время блокировки) поддается лабораторным измерениям и является отличной метрикой для FID. Оптимизация производительности, приводящая к улучшению TBT в лабораторных условиях, должна улучшить FID в полевых условиях (см. рекомендации по производительности ниже).

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

Производительность сайта может сильно различаться в зависимости от возможностей устройства пользователя, состояния его сети, других процессов, выполняемых на устройстве, и того, как они взаимодействуют со страницей. Фактически, каждый из показателей 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 изменения будут четко задокументированы в общедоступном ЖУРНАЛЕ ИЗМЕНЕНИЙ .

ПоказателиПроизводительностьWeb Vitals
Последнее обновление: Jul 21, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.