Гайд по Core Web Vitals

Всем SEO–салют! Сегодня у нас гайд по Core Web Vitals. Разберем основные метрики и расскажем как улучшить показатели.

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

● LCP (Largest Contentful Paint) – время/скорость загрузки основного контента на странице(под основным контентом подразумевается самый “тяжелый” мультимедиа контент, например, видео, изображение или большая группа текста);

● FID (First Input Delay) – Задержка перед началом взаимодействия с сайтом(как быстро можно начать кликать по ссылкам и взаимодействовать с контентом);

● CLS (Cumulative Layout Shift) – то, насколько ваша верстка устойчива при загрузке сайта (например, съехал элемент и мешает вам взаимодействовать с сайтом).

Вот общепринятые нормы для оценки данных параметров:

В идеале, хотя бы 70 - 75 % страниц на вашем сайте, должны проходить по нижней границе. Иначе поисковик может понизить вас в выдаче, чтобы повлечёт к потере органики.

Давайте разберем, каждый параметр отдельно, а потом приведем, некоторые доказательства того, что Сore Web Vitals является фактором ранжирования для Google.

Largest Contentful Paint (LCP) – необходимое количество времени на загрузку одного самого большого элемента в области просмотра пользователя. Именно он и сигнализирует для пользователя, что ваш сайт загрузился.

В реалиях нынешнего “сайтостроения” самым большим элементом по стандарту является заглавная картинка в публикации или тег H1, при ее отсутствии. Также сюда можно отнести <img>, <image> svg, превью <video>.

Чтобы посмотреть ваши показатели LCP, необходимо перейти в
PageSpeed Insights, ввести URL, интересующего вас сайта и нажать на кнопку Analyze.

По традиции, для примера, мы возьмем сайт крупнейшего издания
New York Times. Необходимо подождать определенно количество времени, пока сервис изучит сайт до конца.

Общее тестирование NYT прошел на ура, о чем и свидетельствует статус Passed.

Но в текущий момент, нас интересует детальная информация по LCP. Найти ее можно ниже в разделе диагностики. Рекомендуем сразу выбрать данные, связанные только с LCP с помощью фильтра.

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

Шаг 1. Перейдите на нужный сайт и нажмите F12, чтобы вызвать DevTools.

Шаг 2. Далее перейдите в категорию Performance с помощью верхнего навигационного меню.

Шаг 3. Нажмите на Performance insights и подождите, пока DevTools обработает информацию.

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

Параметр Cumulative Layout Shift (CLS) отображает визуальную стабильность страницы в процессе ее загрузки. Учитывается размер элементов и как далеко они смещаются.

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

Вот основные проблемы, которые негативно влияют на CLS:

● У изображения не обозначены размеры;
● Объявления, вставки и iframes без обозначения размеров;
● Внедрение контента внутри JS скриптов;
● CSS стили применяются в конце этапа загрузки страницы.

Что касается просмотра CLS, то Speed Insights вам особо не поможет. Вы получите не информативный результат, как на скрине выше. Максимум, что вам удастся увидеть, это предупреждение: “Avoid large layout shifts”.
Вот совет от наших коллег из Ahrefs, чтобы изучить сдвиги макетов на вашем сайте.
Перейдите на webpagetest.org и вставьте URL тестируемого сайта.

Далее, ждете загрузки теста и переходите к разделу Individuals Runs, а затем выбираете Filmstrip View.

Затем устанавливаете следующие параметры, в
Adjust Filmstrip Settings:
● Highlight Layout Shifts,
● Thumbnail Size: Huge,
● Thumbnail Interval: 0.1 secs

С помощью данного подхода вы по кадрам сможете определить сдвиги макетов, отходящие от нормы.

First Input Delay (FID) – это время от момента первого взаимодействия пользователя с вашей страницей до момента ответа страницы. То есть это базовый индикатор отзывчивости вашего сайта.

Важный момент: В марте 2024 года, показатель заменят на
INP (Interaction to Next Paint). В отличие от FID, INP определяет время от всех взаимодействий пользователя до следующего кадра с обратной связью с учетом всей сессии пользователя, а не только при первой загрузке.

За примеры первичного взаимодействия обычно считают:
● Клик по кнопке или гиперссылке,
● Взаимодействие с полем ввода или выпадающего списка.

Действия вроде скролла страницы или масштабирования к данному параметру не относятся.

Все было бы хорошо, если не одно НО. Далеко не все пользователи, которые перешли на ваш сайт будет взаимодействовать с каждой страницей, поэтому и тестирование данных параметров не всегда релевантно.
Для технического тестирования лучше использовать TBT (Total Blocking Time).

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

Сейчас приведем несколько примеров, почему CWVs можно считать фактором ранжирования, но на деле все гораздо проще. CWVs отвечает за скорость загрузки веб-страниц. Скорость загрузки — фактор ранжирования в SERP. Вот и весь ответ.

Но давайте, чуть вникнем в вопрос.

В 2021 году компания Google провела сессию “Ask me anything”, посвященную Web Vitals. В ходе сессии был задан тот самый вопрос: “Является ли Web Vitals фактором ранжирования?”

Филип Уолтон, инженер Google, занимающийся вопросами производительности веб-сайтов, ответил, что показатели Web Vitals не являются первичным фактором ранжирования. Однако далее следовало высказывание Джона Мюллера, что CWV все же влияет на ранжирование,
но в меньшей степени, чем релевантность для пользователя.

Вот пример: если сайт A работает быстрее, чем сайт B, но при этом B более релевантен запросу пользователя, сайт B все равно опередит A.

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

Далее по хронологии, в 2022 году Мюллер вновь упоминает фактор
“page experience”, к которому относится скорость загрузки на Reddit.

А в 2023 выходит видео с обновлениями на июль 2023 года, где говорится, что несмотря на изменения алгоритмов, “page experience” все равно остается комплексным фактором ранжирования. А вот ссылка на видео, если кому-то будет интересно.

Чтобы получить заветное “passed” от CWV, необходимо проработать зону каждого показателя отдельно, следуя рекомендациям PageSpeedInsights.

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

Используйте рекомендации ниже, при оптимизации LCP:
● Установить приоритет загрузки ресурсов на вашем сайте;
● По возможности сожмите файлы изображений и видео;
● Используйте CDN, чтобы повысить скорость доставки контента;
● Размещайте ресурсы на том же сервере, где находится сайт
● Кешируйте файлы для оптимизации последующих сессий пользователей.
Что касается CLS, то все чуточку тривиальнее. Оптимизируйте шрифты, изображения и т.д.
Вот несколько пунктов по улучшению CLS:
● Заранее укажите размер объектов (картинки, видео и iframe);
● Оптимизируйте загрузку шрифтов на страницах;
● Если хотите использовать анимации, то убедитесь в том, что это не скажется на макете;
● Убедитесь, что страницы используют метод bfcache.
На этом пока, что можно закончить и переходить к FID. Тут вообще нет ничего страшного. Чаще всего большинство страниц на хорошо выполненном сайте автоматически проходят проверку, хотя бы по нижнему порогу.
Но если вы все же хотите пройтись самостоятельно, то вот:
● Отключите все не нужные JS скрипты, если не хотите отключать,
то выставите самый низкий приоритет загрузки.
● Если есть возможность, то разбейте длинные таски на части;
● Используйте технологии web workers и SSR.

Друзья! Спасибо за прочтение и ваше время! В заключение статьи хочется упомянуть, что Core Web Vitals является все же комплексным фактором ранжирования. А значит, что в первую очередь нужно устранить серьёзные технически ошибки и только потом переходить к оптимизации CWV. Будем рады, если вы поделитесь своим опытом и мнением, касательно данной темы!