Что такое Core Web Vitals и как оно влияет на SEO продвижение сайта?

Что такое Core Web Vitals и как оно влияет на SEO продвижение сайта

В мае 2020 года Google анонсировал новый алгоритм ранжирования под названием Page Experience. Цель его внедрения — ранжировать выше ресурсы, с которыми пользователю будет удобнее взаимодействовать. Составной частью алгоритма стали факторы Core Web Vitals — скорость загрузки, возможность быстрого взаимодействия с контентом и визуальная стабильность

Core Web Vitals — это группа новых факторов ранжирования Google. В эту группу входят 3 параметра:

• LCP (Largest Contentful Paint) — скорость загрузки основного контента. Основной контент — это самый большой элемент на странице: текст, видео, картинка. Гугл сравнивает разницу между загрузкой основного контента и остальных элементов.
• FID (First Input Delay) — время ожидания до начала взаимодействия с сайтом. Чем дольше пользователю приходится ждать момента, когда можно начать кликать по ссылкам и элементам, тем ниже лидогенерация и выше показатель отказов.
• CLS (Cumulative Layout Shift) — устойчивость верстки и элементов, которые мешают пользователю взаимодействовать с сайтом. Если в процессе загрузки элементы, особенно кликабельные, смещаются по экрану, пользователь рискует нажать совсем не на ту кнопку, которую планировал. Ни пользователю, ни Гуглу это теперь не понравится.

Взаимодействие со страницей и соответствующие метрики Core Web Vitals будут официально использоваться для ранжирования страниц в 2021 году.

Самый простой способ просмотреть метрики для вашего сайта — воспользоваться отчетом “Основные интернет-показатели” в Google Search Console. С помощью отчета можно легко увидеть, в какую категорию попали ваши страницы, “плохие URL-адреса”, “URL-адреса, требующие улучшения” или “хорошие URL-адреса”.

В отчете вы также найдете более подробную информацию о конкретных проблемах и список затронутых страниц.

Почему вам стоит отслеживать метрики Core Web Vitals?

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

Page Experience будет оцениваться по совокупности факторов, которые Google считает важными для UX, в том числе:

• HTTPS;
• Мобильная версия сайта;
• Отсутствие межстраничных всплывающих окон;
• «Безопасный просмотр» (в основном отсутствие вредоносных ссылок/виджетов на вашей странице).

Метрики Core Web Vitals лягут в основу новой метрики и больше всего повлияют на оценку качества страницы.

Важно также учесть, что высокий показатель качества страницы не гарантирует, что сайт сразу попадет в ТОП. Google отмечает, что они используют для ранжирования сайтов примерно 200 факторов. В первую очередь положительно оценивается качественный, релевантный для пользователей контент.

Показатель Largest Contentful Paint (LCP)

LCP — это время загрузки самого большого видимого элемента в области просмотра.

В отличие от других показателей скорости загрузки страницы (например, TTFB и First Contextual Paint), фактор LCP отвечает за самые важные для пользователей действия — возможность видеть и взаимодействовать с контентом.

Вы можете проверить свой LCP, используя Google PageSpeed Insights.

Как и в Google PageSpeed Insights, данные в Search Console приходят из отчета Chrome о пользовательском опыте. Но в отличие от PageSpeed Insights здесь вы можете видеть данные LCP по всему сайту, а не только по отдельной странице. Вместо того чтобы анализировать страницы по отдельности, вы получаете целый список страниц с хорошими, плохими или средними LCP-показателями.

Что можно сделать, чтобы улучшить LCP вашего сайта:

• Удалите все ненужные сторонние скрипты: недавнее исследование по Pagespeed показало, что каждый сторонний скрипт замедляет страницу на 34 мс.
• Обновите веб-хостинг: лучший хостинг = более высокая скорость загрузки страницы.
• Настройте отложенную загрузку: при отложенной загрузке изображения загружаются только тогда, когда пользователь прокручивает страницу вниз.
• Удалите большие элементы страницы: в отчете Google PageSpeed Insights вы увидите, есть ли на странице элементы, которые замедляют ее загрузку.
• Используйте меньше CSS кода, когда это возможно.

Показатель Cumulative Layout Shift (CLS)

CLS измеряет, как перемещаются элементы, другими словами насколько устойчив макет страницы. При этом учитываются размеры контента и расстояние, на которое он перемещается. Одна из основных проблем с этой метрикой заключается в том, что она продолжает измеряться даже после начальной загрузки страницы.

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

Как проверить CLS

Вы найдете список смещающихся элементов в PageSpeed Insights в разделе “Диагностика”.

Как минимизировать CLS:

• Задайте size-атрибуты для любого медиаконтента (видео, изображения, GIF-файлы, инфографику и т. д.). Браузер пользователя будет точно знать, сколько места элемент займет на странице, и не будет менять его, пока страница загружается.
• Выделите специальное место под рекламу. В противном случае рекламные элементы могут внезапно появиться на странице, смещая основной контент.
• Добавляйте новые элементы интерфейса в нижней части страницы. Таким образом, они будут показываться пользователю по мере скролла и не будут смещать контент.

Показатель First Input Delay (FID)

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

Примеры взаимодействий:

• выбор пункта из меню;
• щелчок по ссылке;
• ввод адреса электронной почты в поле и т. д.

FID измеряет время, необходимое для того, чтобы на странице отразились действия, произведенные пользователем.

Для страницы с информационным контентом (например, страницы комментариев в блоге или новостных статей) FID, вероятно, не так важен. Единственное реальное «взаимодействие» — это прокрутка страницы или увеличение/уменьшение масштаба страницы.

Причины FID

JavaScript конкурирует за главный поток. Главный поток может быть только один, и JavaScript конкурирует за выполнение в нем задач.

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

Как улучшить показатели FID вашего сайта:

• Удалите все ненужные скрипты: как и в случае с FCP, сторонние скрипты (например, код плагинов, тепловые карты сайта и т. д.) могут негативно повлиять на FID.
• Используйте кэширование элементов: это поможет быстрее загружать контент вашей страницы.

Инструменты для работы с Core Web Vitals

Lighthouse позволяет проверять интерактивность, доступность, скорость загрузки страниц сайта в "лабораторных" условиях. C ним можно работать через командную строку, веб-интерфейс Page Speed Insights, инструменты для разработчиков в Chrome. Используйте инструмент после улучшений или изменений на сайте.

То, что видят пользователи доступно в базе данных CrUX — общедоступном наборе реальных данных о производительности пользователя. В этой базе данных находится порядка 8-9 миллионов страниц. Можно посмотреть конкурентов и лидеров отрасли.

PageSpeed Insights агрегирует данные из Lighthouse и CrUX и отображает их в отчете.

В Google Search Console есть данные по Core Web Vitals и они доступны для каждой отдельной страницы и ее динамике.

В Chrome Dev Tools трассируются все три показателя — LCP, CLS, TBT.

Расширение Web Vitals Chrome Extension для real-time измерений на странице.

Подключите библиотеку web-vitals.js весом менее 1 кб для анализа пользователей и отслеживания эффективности улучшений.

Заключение

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