Разработчики Google регулярно выпускают обновления для совершенствования алгоритмов и улучшения поисковой выдачи. Одно из ключевых изменений — создание группы алгоритмов Page Experience, которые анализируют опыт пользователя при взаимодействии со страницей. Для оценки качества сайта используются Core Web Vitals — 3 важных фактора, влияющих на ранжирование сайта в выдаче.
В этой статье мы подробно рассказали о Core Web Vitals, указали оптимальные метрики и рассказали, как их улучшить.
Что такое Core Web Vitals
В 2021 году разработчики создали Page Experience с целью улучшения анализа технического состояния. Он позволяет выше ранжировать страницы, с которым человеку будет комфортнее взаимодействовать.
Ключевой частью нового алгоритма стали 3 фактора Core Web Vitals:
- Скорость загрузки.
- Быстрое взаимодействие.
- Графическая стабильность.
Если вы продвигаете сайт в Google, важно учитывать эти факторы. Они играют ключевую роль в ранжировании страниц в выдаче.
Три ключевых показателя Core Web Vitals
Рассматриваемая группа состоит всего из 3 факторов. Кратко рассмотрим каждый из них.
LCP (Largest Contentful Paint) — время загрузки основного контента
Алгоритмы отслеживают скорость загрузки с момента отправки первого запроса с пользовательского запроса. Стоит отметить, что основным контентом считают наиболее крупный элемент на странице. Им может стать:
- Видео.
- Картинка.
- Фоновое изображение.
- Блочные элементы.
На простых страницах основным контентом может стать текст.
Компания Google создала LCP для более точного анализа удобства сайта. Раньше поисковая система использовала другие метрики (load или DOMContentLoaded), но они не всегда точно соответствуют тому, что пользователь видит на экране. Если же говорить о First Contentful Paint (FCP), то данная метрика отражает только начало процесса загрузки.
Поэтому разработчики из Google занялись исследованием процесса и выявлением способов более точно определить скорость загрузки контента. В результате они пришли к выводу, что нужно следить именно за самым большим элементом.
FID (First Input Delay) — задержка отклика на первое действие
Это время до первого взаимодействия с контентом. Алгоритмы отслеживают задержку до того, как браузер сможет начать обработку событий.
Отметим, почему именно программа не может отреагировать на пользовательский запрос. Это происходит из-за того, что браузер занят другими задачами. Программа полностью занята отрисовкой интерфейса страницы и временно не может отвечать на пользовательские действия.
CLS (Cumulative Layout Shift) — стабильность макета
Проблема многих старых сайтов — нестабильность во время загрузки. Например, пользователь заходит на страницу и хочет нажать на кнопку «Зарегистрироваться». Во время загрузки контента эта клавиша постоянно «убегает» вниз, из-за чего человек не может по ней попасть. В результате пользовательский опыт сильно ухудшается.
Подобное происходит из-за асинхронной загрузки ресурсов и динамического добавления DOM-компонентов, а также по причине виджетов, рекламы и медиафайлов с заранее неизвестными размерами.
Чтобы контролировать стабильность страниц, Google создал отдельный алгоритм. Он анализирует процесс изменения верстки до того, как весь контент загрузится. Чем меньше страница корректируется, тем лучше.
Пороговые значения: что считается «хорошим»
Разработчики Google раскрыли оптимальные значения каждой метрики. Если вы занимаетесь технической оптимизации сайта, то должны сделать каждый показатель не больше обозначенных.
Отметим, что это лишь усредненные показатели. Для сайтов разного типа оптимальные значения будут различаться.
LCP: ≤ 2.5 сек
Оптимальное время загрузки основного контента составляет 2,5 секунды и меньше. Если срок превышает 4 секунды, значит, нужно провести оптимизацию контента.
FID: ≤ 100 мс
Задержка отклика на первое действие должна составлять не более 100 мс. В таком случае пользователь сможет начать взаимодействовать со страницей практически сразу. Если же задержка превышает 300 мс, то сайт начнет хуже ранжироваться в выдаче.
CLS: ≤ 0.1
В идеале все элементы на странице должны встать на свои места за 0,1 секунды. Плохой результат — это более 0,25 секунды. Он говорит о том, что верстка нестабильна.
Как измерять Core Web Vitals: инструменты
Чтобы мониторить показатели CWV, вам стоит использовать следующие инструменты:
- Google Lighthouse. Удобный сервис для улучшения качества веб-страниц. Он проводит аудит и генерирует отчёты по различным аспектам производительности сайта, включая показатели Core Web Vitals.
- Chrome DevTools Performance Panel. Инструмент предоставляет детальный обзор того, как разные элементы влияют на общую скорость загрузки сайта и удобство.
- Google Analytics. Платформа для измерения и мониторинга Core Web Vitals. С её помощью можно собирать важные метрики, связанные со скоростью загрузки, интерактивностью и визуальной стабильностью.
- Chrome UX Report (CrUX). Это публичный набор данных, который содержит информацию о реальном пользовательском опыте на миллионах сайтов.
- Speetals. Инструмент предлагает бесплатный тест скорости сайта и проверку показателей Core Web Vitals.
- New Relic. Решение для мониторинга реального пользователя, которое оценивает скорость и производительность сайта с разных веб-браузеров, устройств, операционных систем и сетей.
- Sematext. Предлагает инструменты мониторинга сайта, которые позволяют собирать как полевые, так и лабораторные данные о показателях Core Web Vitals на мобильных и настольных устройствах.
- WebPageTest. Бесплатный и открытый инструмент, который позволяет анализировать производительность сайта, предоставляя информацию о его диагностике в различных условиях.
- GTMetrix. Позволяет измерять скорость и производительность сайта. При этом анализ проводится на настольных устройствах, а Google и большинство браузеров учитывают метрики и результаты на мобильных устройствах.
- Web.dev. Позволяет измерять показатели CWV наряду с другими факторами производительности. Также предоставляет список рекомендаций и советов по улучшению скорости загрузки сайта.
Как улучшить каждый из показателей
SEO-специалисты уже выявили простые способы улучшить каждый показатель Core Web Vitals и повысить показатели страницы в выдаче. Кратко рассмотрим их:
- Largest Contentful Paint (LCP):
- Оптимизировать и сжать изображения. Можно использовать форматы, например WebP, которые обеспечивают хорошее качество при меньшем размере файла
- Использовать распределенную сеть доставки контента (CDN). Благодаря ей файлы в разных регионах загружаются одинаково быстро.
- Асинхронно загружать файлы CSS и JavaScript. Она увеличивает скорость загрузки сайта и отображения веб-страниц в браузере, так как файлы загружаются и выполняются в фоновом режиме, не блокируя рендеринг.
- Отложить загрузку ненужного JavaScript-кода, задерживающий отображение контента. Для этого SEO-специалисты применяют атрибут defer, который позволяет отложить обработку кода на момент, когда рендер страницы завершится. Пример кода: <head> <script src=»/jquery.js» defer></script> </head>.
- FID (First Input Delay):
- Минимизировать выполнение JavaScript. Мы рекомендуем проверить код и удалить лишнее, а также разбить крупные задачи на части.
- Оптимизировать обратные вызовы событий. Мы рекомендуем выполнить минимизацию каскадных загрузок данных, чтобы освободить ресурсы. Также рекомендуется снизить объем встроенных данных, которые нужно обрабатывать на стороне клиента.
- Использовать веб-рабочих. Они выполняют JavaScript в фоновом режиме, не блокируя основной поток. Это улучшает отзывчивость интерфейса и минимизирует задержки при взаимодействии пользователя с веб-страницей.
- Cumulative Layout Shift (CLS):
- Установить явные размеры для изображений, видео и других элементов, чтобы браузер выделял правильное количество пространства во время их загрузки.
- Зарезервировать пространство для динамического контента с помощью контейнеров с правильными размерами.
- Оптимизировать загрузку шрифтов, например, предварительно загружать важные веб-шрифты.
Как Core Web Vitals влияют на позиции в поиске
Core Web Vitals существенно влияют на положение страницы в выдаче, так как Google учитывает эти метрики при ранжировании страниц. Чем быстрее страница загружается, тем удобнее человеку взаимодействовать с ней. Для Google пользовательский опыт имеет ключевое значение, особенно в нишах с высокой конкуренцией.
Так, один из вебмастеров в день запуска нового алгоритма написал, что его сайт сразу потерял 20% трафика. Поэтому игнорировать новые факторы ранжирования точно не стоит.
Однако нужно помнить, что Core Web Vitals — это только малая часть огромного комплекса метрик, по которым поисковая система анализирует страницу. Кроме того, при оценке конкретной страницы учитывается состояние конкурентов.
Особенности оценки для разных типов сайтов
Сразу стоит отметить, что разработчики Google не предусмотрели дифференциацию по типу сайта. Все страницы в выдаче анализируются и оцениваются одинаково. Однако все же алгоритмы учитывают средние показатели по нише, из-за чего при работе с Core Web Vitals нужно стремиться не к идеальным, а к оптимальным значениям.
Интернет-магазины
Еще до запуска новых алгоритмов аналитическое агентство BrightEdge выпустила исследование, в котором прямо написала, что онлайн-магазины не могут соответствовать Core Web Vitals.
Это обусловлено тем, что на сайтах:
- Размещается большое количество изображений, мешающих быстрой загрузке контента. Так, аналитики BrightEdge обнаружили, что среднее время отображения основного контента (LCP) составляет более 9 секунд.
- Часто есть всплывающие рекламные поп-апы и анимации, увеличивающие задержку перед первым взаимодействием.
Решить данные проблемы сложно, поскольку они обусловлено самой сутью онлайн-магазинов. Продавцы не могут просто убрать часть изображений или встроенную рекламу.
Поэтому SEO-специалистам при работе с сайтом онлайн-магазина стоит сделать акцент на интерактивности и стабильности макета.
Новостные порталы
Из-за того что разработчики из Google не предусмотрели разные методы оценки в зависимости от тематики сайта, новостники оптимизируются по стандартной схеме. Главное — делать акцент на Largest Contentful Paint (LCP). Основной контент должен загружаться максимально быстро. Приведем немного статистики:
- smi2.ru — 2,243 секунды.
- sovsport.ru — 2,284 секунды.
- ura.news — 2,359 секунды.
- news.rambler.ru — 2,56 секунды.
- uznayvse.ru — 3,036 секунды.
- ufa.kp.ru — 3,801 секунды.
Таким образом, для новостного портала 2,5 секунды, указанные в документации Google, — оптимальное значение, к которому действительно стоит стремиться. Также макет должен быть максимально стабильным. Для текста стоит создать фиксированный блок в центре экрана, который не будет смещаться во время загрузки рекламы и т.п.
SaaS и лендинги
Если говорить конкретно о SEO, то для лендингов и других коммерческих сайтов нет каких-либо изменений в оценке. Однако существует четкая корреляция между скоростью работы портала и конверсией.
Команда SEO-специалистов и маркетологов Dropbox уделила большое внимание своей главной странице и основным функциям, обеспечив высочайшую производительность. Они знали, что даже сокращение времени загрузки на 0,1 секунды может повысить коэффициент конверсии на значительный процент. Оптимизировав загрузку JavaScript и сосредоточившись на сокращении времени загрузки, они добились увеличения конверсии на 23%.
Заключение
Core Web Vitals — важный набор метрик, которые отражают техническое состояние сайта и качество user experience. Google анализирует скорость загрузки контента, интерактивность и стабильность страницы на основе собранных данных ранжирует сайты в выдаче. Некоторые порталы после запуска нового алгоритма потеряли существенную долю трафика, так что вам точно не стоит игнорировать данные факторы.
При этом нужно помнить, что работа с показателями Core Web Vitals должна вестись постоянно. Важно контролировать метики и оперативно вносить точечные изменения, чтобы все страницы хорошо ранжировались в выдаче Google.