Core Web Vitals

Что такое Core Web Vitals?

Core Web Vitals — это метрики, созданные Google для улучшения пользовательского опыта на сайтах. Большое разнообразие доступных инструментов для анализа скорости загрузки стало одним из факторов, из-за которых Google решил объединить все эти метрики, чтобы немного упростить всю сложность оптимизации времени загрузки. Эта инициатива призвана заставить нас сосредоточиться на «сигналах качества», которые так важны для достижения оптимального пользовательского опыта.

Google в нескольких словах резюмирует, на чём сосредоточены Core Web Vitals:

• ›

  Опыт загрузки

• ›

  Интерактивность

• ›

  Визуальная стабильность содержимого страницы

Largest Contentful Paint, или LCP

LCP, или Largest Contentful Paint, — это метрика, которая показывает время загрузки «самого крупного» видимого пользователю контента до момента, когда он доступен и полезен. Иначе говоря, Google говорит, что элементы, размещённые в той области, которую мы знаем как «Above the Fold», должны загружаться быстро и быть читаемыми, а значит, доступными пользователю для взаимодействия.

Стоит уточнить, что элементы, появляющиеся, когда пользователь кликает по экрану или скроллит, на LCP не влияют. Самым крупным контентом может быть блок текста, видео, изображение и т. д.

Классификация статусов LCP по времени. Изображение © web.dev

Какое время Google считает оптимальным?

Как видно на графике, Google считает, что максимальное время загрузки LCP для хорошего пользовательского опыта — менее 2,5 секунды. Важно отметить, что во время загрузки элемент LCP может меняться.

Как узнать LCP конкретного URL?

В самом браузере Chrome, запустив аудит Lighthouse, мы можем узнать, что Google считает самым крупным загружаемым контентом. Вот как это сделать:

Какие факторы могут влиять на загрузку LCP?

На то, что время загрузки LCP оказывается выше ожидаемого, влияет несколько действий. Эти элементы или действия:

• ›

  Ответ сервера

• ›

  Запросы к базе данных

• ›

  Ответы API, которые долго обрабатываются

• ›

  CSS или JS, блокирующие рендеринг

• ›

  Медленная загрузка других ресурсов

• ›

  Неоптимизированные изображения

• ›

  И т. д.

First Input Delay, или FID

FID, или First Input Delay, — это метрика, которая показывает, сколько времени странице нужно, чтобы отреагировать, когда пользователь взаимодействует с любым из элементов.

Метрики, взятые из Pagespeed

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

Классификация статусов First Input Delay (FID) по времени. Изображение © web.dev

Главные причины проблем с этой метрикой (FID) связаны с выполнением JavaScript, так что нам нужно определить, какая часть кода заставляет страницу долго реагировать на взаимодействие. Лично я сталкивался с этой проблемой при загрузке рекламных JS.

Cumulative Layout Shift, или CLS

Cumulative Layout Shift — это метрика, которая задаёт ограничения на загрузку элементов, меняющих отображение по мере загрузки. Речь о том, чтобы обеспечить стабильность элементов на экране, чтобы вид не сдвигался, пока подгружаются другие ресурсы.

Google считает (ну, Google и каждый пользователь), что это очень раздражает, когда мы уже начали взаимодействовать со страницей (читать, скроллить и т. д.), а загрузившийся позже элемент смещает положение пользователя относительно контента, вынуждая его исправлять это прокруткой.

Этот пример помогает лучше объяснить, как работает метрика. Сначала мы видим контент, загруженный в левой части. Когда Google говорит о стабильности, он имеет в виду, что загрузка третьего элемента не должна смещать загруженные ранее. Как видно на изображении справа, загрузка видео с YouTube сдвинула два блока, которые загрузились изначально.

Почему Core Web Vitals важны?

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

Улучшение доступности со всех устройств, поощрение безопасного просмотра по защищённому протоколу или наказание сайтов, использовавших навязчивую рекламу (межстраничные объявления), — вот некоторые из битв техногиганта.

Эти метрики — индикаторы, которые Google даёт нам, чтобы указать, какие части сайта могут быть проблемой для пользователя, но... Значит ли это, что они важны?

Смотрим ли мы на сайты с точки зрения «роботов» или с точки зрения «пользователей», эти метрики — индикаторы того, что наши сайты работают не так хорошо, как должны. Мы уже видели в нескольких исследованиях, насколько время загрузки влияет на конверсию и на терпение пользователя. Сейчас они не влияют на ранжирование, но станем ли мы их игнорировать?

Со своей стороны мы точно будем их учитывать.

Влияют ли Core Web Vitals на ранжирование?

На сегодня мы знаем лишь то, что метрики улучшения пользовательского опыта становятся всё важнее, а часть из них уже учитывается в результатах поиска. В статье от 28 мая в блоге Google было объявлено, что в 2021 году ожидается выкатка нового апдейта, включающего несколько метрик, связанных с пользовательским опытом.

Нам остаётся лишь вспомнить, как он поступил с Mobile First Index и предварительными уведомлениями. В этом случае, снова ссылаясь на майскую статью, он предупреждает, что предварительное уведомление будет минимум за 6 месяцев, так что... Будет ли апдейт к концу следующего года?

Инструменты для оптимизации Core Web Vitals

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

Lighthouse

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

Изображение взято из результатов аудита Lighthouse

Page Speed Insights

Page Speed Insights — ещё один вариант, который Google даёт нам для получения данных о производительности сайта. Этот инструмент даже показывает графики самых важных метрик и их статус. Page Speed Insights опирается на отчёт о пользовательском опыте, задача которого — получить данные в сравнении с другими сайтами.

Метрики, которые предлагает Page Speed Insights

Chrome UX

Chrome User Experience Report — это набор данных, которые Google предоставляет о поведении пользователей по всему миру через Chrome. Чтобы получить доступ к этим данным, нужно использовать Big Query, а также иметь аккаунт Google Cloud.

Через Google Data Studio доступ упростили, и всё уже почти готово для нас в этом дашборде

Chrome Dev Tools

Анализировать метрики Core Web Vitals можно не только с помощью Lighthouse: если погрузиться в инструменты разработчика Chrome, можно прийти к тем же выводам. Например, во вкладке «Performance», если сделать запись или новую загрузку, можно получить ценную информацию о том, как ведёт себя наш URL.

Скриншот, сделанный в разделе Performance в Chrome Dev Tools

Web.Dev

Всегда есть более простой способ сделать что-то, по крайней мере когда речь о том, чтобы узнать свои Core Web Vitals. На официальном сайте есть страница с описанием каждой метрики, где даётся объяснение, что это такое, и практики для улучшения.

Кроме того, в Chrome Store есть расширение, которое даёт нам эту информацию при заходе на каждый URL:

По красной или зелёной отметке мы видим статус нашего URL по этим метрикам:

Скриншот результатов, которые даёт расширение Web Vitals

Search Console

Search Console — незаменимый инструмент для любого вебмастера. В него добавили функцию, которая помогает увидеть, у каких URL есть проблемы с этими 3 метриками (LCP, FID и CLS). В меню слева есть пункт «Core Web Vitals». Когда мы выбираем его, появляются два графика с результатами по URL в разрезе устройств. Если выбрать устройство (десктоп или мобильное), мы подробно увидим, у каких URL есть проблемы.

Не пугайтесь, если увидите справа большое число URL: это относительно нормально, поскольку проблемы обычно возникают по типам страниц (например, посты блога), и работа над одной из них даст улучшение сразу по всем.

Выводы

Этот обзор Core Web Vitals призван познакомить нас с метриками, которые будут всё заметнее, и нам — будь мы SEO-специалистами или вебмастерами — предстоит с ними жить. Из SEO Alive мы хотим порекомендовать вам пользоваться всеми этими инструментами, которые мы вам дали: они наверняка помогут улучшить WPO-показатели вашего сайта.

*Принимаете вызов улучшить скорость своего сайта? Проведите тест любым из упомянутых инструментов и пришлите нам сообщение со скриншотом. Мы дадим вам совет по улучшению совершенно бесплатно! *