В 2021 Google закончил пересмотр факторов ранжирования, чтобы улучшить качество поисковой выдачи. Новые факторы собраны в документе под названием Core Web Vitals. Именно по этим факторам происходит индексация контента в поисковой выдаче
Вот как устроены новые факторы ранжирования.
Теперь ранжирование напрямую связано со скоростью загрузки. Core Web Vitals призван улучшить опыт пользователей при взаимодействии с поиском. Чем скорее пользователь получает ответ на свой запрос — тем чаще он возвращается, тем больше запросов оставляет, логика такая.
Согласно исследованиям Гугла, если время пользователь ожидает загрузки сайта от 1 до 3 секунд, количество отказов возрастает на 32%. А при увеличении ожидания до 6 секунд — практически 100% пользователей покидают сайт. Если же сайт будет отвечать пороговым значениям Core Web Vitals, покидать его будут на 24% пользователей меньше.
Итак,
Что же такое Core Web Vitals
Это показатели ранжирования, жизненно важные для пользователя:
- загрузка
- интерактивность (взаимодействие)
- визуальная стабильность
Текущий набор показателей фокусируется на этих трех аспектах взаимодействия с пользователем:
- Largest Contentful Paint (LCP) — определяет скорость загрузки страницы и ее крупных визуальных элементов. Хороший показатель – до 2,5 с.
- First Input Delay (FID) — измеряет интерактивность сайта, то есть насколько быстро он становится доступным к взаимодействию после загрузки. Желательным будет показатель до 100 мс.
- Cumulative Layout Shift (CLS) — показывает скорость визуальной стабилизации, то есть насколько быстро всё становится на свои места. Идеальным будет показатель меньше 0,1.
Вот как устроены эти показатели.
LCP (загрузка)
Показывает, насколько быстро контент веб-страницы загружается и становится видимым для пользователей. LCP анализирует, когда был отрисован самый большой элемент на странице.
Вот, что относится к большим элементам:
- тег img
- элементы image внутри тега svg
- постер в теге video
- фоновое изображение, загруженное с помощью url (не считая CSS градиента)
- блочные элементы, содержащие текстовые узлы или другие дочерние элементы.
На начальном этапе внедрения Core Web Vitals используется лишь ограниченный список элементов. Дополнительные элементы (например, тег svg, video) планируют добавить в будущем по мере проведения дополнительных исследований.
Элемент считается «самым большим» только после того, как он отрисован и виден для пользователя.
Браузер считает, что запись загружена, как только пользователь начнет взаимодействовать со страницей, поскольку взаимодействие может визуально изменить страницу (прокрутка, модальное окно и т.д.).
Рис.1. Изменение самого большого элемента по мере загрузки содержимого
Размер самого большого элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет overflow: hidden), то эти части не учитываются.
Если у изображения видимый и исходный размеры отличаются, то будет учитываться меньший из них. Например, если изображение сжали до меньшего размера, чем его исходный, то передается видимый размер, а если растянули — исходный.
Для текстовых элементов учитывается только размер их текстовых узлов.
Для всех элементов любые margin, padding или border не рассматриваются.
FID (интерактивность)
Метрика First Input Delay (FID) измеряет первое впечатление пользователя об интерактивности и быстродействии сайта. Это время, когда пользователь впервые взаимодействует со страницей, до того момента, когда браузер может начать обработку событий в ответ на это взаимодействие.
Задержка ввода возникает из-за того, что браузер может быть загружен чем-то другим, например синтаксическим анализом или выполнением большого бандла, поэтому не может ответить пользователю.
Первый ввод рассматривается, потому, что:
- Первое впечатление пользователя формирует общее впечатление о качестве и надежности сайта.
- По статистике, самая распространенная проблема с интерактивностью возникает во время загрузки страницы. Улучшение первого взаимодействия окажет наибольшее влияние на общую интерактивность.
CLS (визуальная стабильность)
Cumulative Layout Shift — показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.
Например, пользователь зашёл на сайт и читает статью. Пока сайт прогружался, на странице появилось ещё несколько элементов. Когда пользователь захотел кликнуть на какой-то элемент навигации, положение скролла неожиданно изменилось. Неприятно.
Рис.2. Пример Cumulative Layout Shift
Первая ассоциация при виде этого примера — реклама. Думаю, что все когда-нибудь сталкивались с неожиданным появлением рекламных блоков, сдвигающих контент статьи. Обычно это происходит из-за асинхронной загрузки ресурсов или динамического добавления DOM-элементов на странице. Причиной может быть изображение или видео с неизвестными размерами, которые динамически изменяют размер блока.
CLS измеряет общую сумму всех показателей визуальной стабильности верстки в течение сессии страницы.
Показатель визуальной стабильности определяет Layout Instability API, который отправляет layout-shift каждый раз, когда существующий элемент меняет свое начальное положение между двумя кадрами.
Обратите внимание, что визуальная стабильность не учитывается, когда новый элемент добавляется в DOM или существующий элемент на странице меняет размер.
Чтобы вычислить коэффициент визуальной стабильности, браузер смотрит на размер области просмотра и перемещение нестабильных элементов между двумя визуальными кадрами. Коэффициент вычисляется двумя показателями: коэффициентом воздействия и расстояния.
layout shift score = impact fraction * distance fraction
Рис.3. Коэффициент воздействия
На приведённом изображении есть элемент, который занимает половину области просмотра на одном экране. На следующем экране элемент смещается вниз на 25%. Красным пунктиром показано объединение видимой области элемента, которая для обоих случаев составляет 75% от экрана.
Рис.4. Доля расстояния
Доля расстояния — это наибольшее расстояние, на которое любой нестабильный элемент переместился на плоскости (по горизонтали или вертикали), деленное на размер экрана.
В приведенном примере наибольшим размером экрана является высота, а нестабильный элемент перемещается на 25%.
Коэффициент визуальной стабильности = 0,75 * 0,25 = 0,1875
Как улучшить показатели Core Web Vitals
Вот, что можно сделать, чтобы приблизить значения загрузки до пороговых значений Core Web Vitals:
- Уменьшить вес всех визуальных элементов (бандлов, картино и т.д.).
- Включить кеширование — это ускорит доступ к страницам, которые пользователь посещал ранее.
- Использовать технологии AMP. (Спорно, но таковы рекомендации Google)
- Уменьшить редиректы или использовать SPA.
- Использовать CDN — это распределит снизит количество маршрутизаторов между конечными файлами и пользователем, что ускорит загрузку.
Как измерить метрики Core Web Vitals
Полный отчет Core Web Vitals report можно получить в Google Search Console. Вот как выглядит отчёт идеального сайта
А вот так выглядят метрики издания, которое не заботится о факторах ранжирования:
Как, вы думаете, это издание выглядит в поисковой выдаче (правильный ответ — никак).
Ещё один способ измерить метрики — поставить расширения Web Vitals для браузера Chrome:
Короче. Пишите скорее адрес вашего сайта в PageSpeed Insights и смотрите, как ваше издание выглядит в глазах самого распространённого поисковика в мире. И пусть у вас хватит ресурсов, чтобы достичь идеальных значений!
Алексей Березовой
главред Делобанка, медиаэксперт
_________________
Тренды медиабизнеса я анализирую в телеграм-канале «Кнут и пряник бренд-медиа». Подпишитесь, чтобы держаться в курсе главных событий индустрии.
Курс-рассылка «Сделай своё медиа» поможет запустить корпоративный блог или разобраться, как устроены современные медиа.