Core Web Vitals и техничка: как скорость и UX влияют на ранжирование

Core Web Vitals – что это за показатель и что в него входит

Core Web Vitals или сокращенно CWV – это официальный показатель Google, который используется для оценки удобства сайта для пользователей. До 2024 года в него входило три критерия, но на сегодняшний день список расширен до четырех:

• LCP – время загрузки самого крупного блока
• FCP – время, необходимое для появления первого контента
• INP – время отклика интерфейса на пользовательское действие
• CLS – насколько “прыгает” вёрстка при загрузке страницы

Также есть вспомогательный критерий – время до первого байта, по-английски этот показатель называется “Time to First Byte” или сокращенно “TTFB”.

Оценка Core Web Vitals рассчитывается для каждой страницы сайта отдельно. Причем оценивается отдельно для десктопной и отдельно для мобильной версии. Пример оценки:

Один и тот же сайт может иметь хорошую оценку Core Web Vitals для одного типа устройств и плохую для других. Но с учетом, что на мобильный трафик в большинстве ниш приходится больше 50% запросов, при оптимизации важно учитывать обе оценки. Также на одном сайте может быть высокая оценка одних страниц и низкая других – поэтому важно изучать конкретный URL, а не показатели веб-сайта в целом.

Core Web Vitals часто путают с двумя другими схожими терминами:

• Скорость загрузки сайта – это фактически входит в показатель CWV, однако является лишь одной из его частей, но не единственной.
• Время ответа сервера – это полностью другой показатель, который оценивает, когда сервер передал первый байт информации.

Большое время ответа сервера – то есть более 1000 мс, само по себе может оказывать негативное влияние на общий срок, необходимый для загрузки страниц, но этот показатель не относится к напрямую CWV. Проверить время ответа можно через Яндекс Вебмастер или его аналоги. Например:

Знать оценку Core Web Vitals и каждого показателя важно при продвижении в Google. Проблемы с CWV могут поставить крест на всей стратегии продвижения, даже если у проекта хороший ссылочный профиль, высокий траст домена и качественный контент.

FCP

FCP или First Contentful Paint — это момент, когда пользователь впервые видит что-либо на экране. Это не означает, что страница загрузилась полностью, речь про первый контент, например:

• Текст
• Изображение
• Фон
• Или другой элемент

Единственное, что не попадает в FCP – скрипты и код, которые не отражаются на экране.

Если момент отображения первого контента “затянут”, то посетитель может прийти к мысли, что сайт “сломался” или вообще не работает. Это не просто неудобно, но и в конечном итоге приводит к повышению процента отказов – людей, кто закрыл сайт, не дождавшись загрузки.

Пример оценки FCP:

В зависимости от скорости появления первого контента, странице присваивается оценка FCP:

• Менее 1.8 секунд – хорошо
• До 3 секунд – нужны улучшения
• Более 3 секунд – плохо

Оценка вашего сайта должна быть в “зеленой” зоне, то есть до 1,8 секунд, для эффективного продвижения в Google. Скорость до 3 секунд также позволяет добиться неплохих результатов в выдаче Гугла, но усложняет процесс.

При загрузке дольше 3 секунд не получится успешно пройти оценку удобства, так как Гугл отнесет страницу к проблемным. И в результате вы можете столкнуться с трудностями при продвижении – даже хороший контент не будет высоко ранжироваться из-за потенциального неудобства для пользователей.

Важно – показатели одного сайта для мобильных устройств и десктопа могут существенно отличаться. Например:

Это значит, что одна и та же страница может иметь разную оценку в зависимости от устройства. Поэтому проверять необходимо по всем форматам.

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

Потенциальное отличие оценок в зависимости от устройства и по конкретного URL актуально для всех параметров – FCP, LCP, INP и CLS.

LCP

LCP или Largest Contentful Paint – это момент, когда загружается самый крупный элемент на странице, который виден для пользователя. Сюда относятся разные элементы:

• Картинка
• Заголовок
• Блок текста
• Или другой большой видимый элемент

Как и в случае с FCP, при анализе LCP оценивается реально то, что видно на странице – это значит, что большой “кусок кода” не влияет напрямую на оценку, если код не генерирует на странице видимые элементы.

FCP оценивает, насколько быстро сайт становится полезным. Если по LCP Google понимает общую производительность страницы, то FCP является техническим маркером полезности.

Пример оценки LPC для сайта:

Как и в случае с FCP, Google ввёл четкие критерии, что такое хорошо, а что плохо:

• До 2,5 секунд – хорошо
• До 4 секунд – нужны улучшения
• Больше 4 секунд – плохо

На практике это значит, что первый контент на странице должен загрузиться быстрее, чем 1,8 секунды, а первая содержательная часть – не дольше 2,5 секунд. Если загрузка большей части занимает более 4 секунд, то пройти тест CWV не получится и у страницы могут быть серьезные проблемы при ранжировании.

INP

INP или Interaction to Next Paint – это самая новая метрика в оценке, которая заменила ранее существовавший индекс FID.

INP измеряет, насколько быстро интерфейс реагирует на клики, нажатия и другие действия. В отличие от большинства других оценок, ИНП является стабильной. Это не значит, что показатель не меняется, но Google оценивает этот показатель стабильным.

Пример показателя INP на сайте:

Как и с другими параметрами, здесь Google также поделились критериями хорошего и плохого:

• До 200 миллисекунд – хорошо
• До 500 миллисекунд – нужны улучшения
• Больше 500 миллисекунд – плохо

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

CLS

CLS или Cumulative Layout Shift – данный показатель измеряет “скачки” интерфейса во время загрузки. Это может касаться разных элементов, например:

• Баннер, который внезапно сдвигает текст
• Кнопка, которая “уехала” в момент нажатия
• И других

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

Пример оценки CLS:

Данный параметр также имеет оцифрованный показатель, помогающий понять актуальное качество страницы:

• До 0.1 – хорошо
• До 0.25 – нужны улучшения
• Более 0.25 – плохо

CLS, как и остальные показатели, влияют на общую оценку Core Web Vitals, а значит, нахождение страницы в “плохой зоне” может критично повлиять на возможности её SEO продвижения.

Как проверить Core Web Vitals

Существует несколько способов, как проверить Core Web Vitals для любого сайта, основные – через Lighthouse или с помощью PageSpeed Insights. Оба способа бесплатные и работают как для ваших собственных проектов, так и для сайтов конкурентов.

Совет – некоторые платные SEO-инструменты позволяют оценить сайт комплексно, включая CWV. Это удобно, так как позволяет увидеть все показатели проекта в одном окне. Однако, желательно, проверять Core Web Vitals в официальных инструментах – это лучший способ, как узнать точную информацию.

Lighthouse

Lighthouse – функция для аудита сайта, встроенная в десктопную версию браузера Chrome. Дополнительных расширений устанавливать не требуется, достаточно:

1. Зайдите на страницу, которую необходимо оценить. Откройте её как обычно открываете сайты в браузере.
2. Кликните правой кнопкой мыши в любом месте и выберите пункт “Посмотреть код”

   

3. В открывшейся панели необходимо перейти во вкладку Lighthouse и запустить анализ:

   

Чтобы получить оценку CWV, необходимо выбрать категорию анализа “Performance” или “Производительность”. Также необходимо выбрать тип устройства – мобильное или десктоп в зависимости от вашей задачи.

1. Далее необходимо дождаться завершения анализа. В среднем на это требуется около 1-2 минут, но в редких случаях может занять больше времени:

   

2. По завершению анализа вы увидите результат – оценку производительности страницы и другие параметры:

   

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

PageSpeed Insights

Второй способ, как проверить CWV – использовать инструмент PageSpeed Insights.

Это официальный инструмент от Google, который позволяет оценить любой проект. Для этого также не требуется специальный софт, достаточно зайти на страницу инструмента, скопировать адрес страницы в поисковую строку PageSpeed Insights и нажать на кнопку “Анализировать”:

Как правило, на оценку требуется около 1-2 минут. Для совсем новых страниц и сайтов, которые появились меньше суток назад, оценка может быть неполной, но в большинстве случаев PageSpeed Insights выдаст подробный результат. Например:

Преимущество этого способа в его детализации. Через вкладку в Хроме вы также получите некоторые дополнительные данные, но именно в PageSpeed Insights информация будет максимально полной. Например, вы увидите конкретные рекомендации и примеры проблем на странице:

Инструмент полностью бесплатный и позволяет проверять как собственные проекты, так и конкурентов.

5 приоритетных правок, которые реально работают

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

Оптимизация изображений

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

Чтобы оптимизировать картинки, руководствуйтесь следующими правилами

• Откажитесь от устаревших форматов JPG и PNG, вместо этого используйте WebP или AVIF.
• Подключите <img srcset> для адаптивности.
• Активируйте функцию “lazy loading”.

Эти три действия помогут улучшить FCP и LCP на 15-25% в зависимости от текущего состояния. При этом, реализация может быть очень простой, особенно, если вы используете WordPress или другие популярные системы управления сайтом. Для WordPress существуют готовы плагины, которые позволяют оптимизировать сжатие картинок. Например, можно использовать плагин Tinypng.

Если у вас нет возможности оптимизировать картинки на стороне сайта, то это можно частично решить до загрузки изображений на сайт. Для этого можно использовать офлайн инструменты, как XNView, либо онлайн, например, Tinypng позволяет сжать картинки без потери качества:

Удаление ненужного JavaScript и CSS

Лишний JavaScript и CSS есть практически на каждом проекте. Он появляется с годами, когда вы меняете шаблон или отдельные блоки, а иногда появляется из-за ошибок настройки.

Найти ненужные скрипты и стили можно с помощью инструмента “Coverage” в Chrome DevTools. Также вы можете удалить неиспользуемые библиотеки, например, jQuery на одностраничнике.

Ещё одно решение, которое позволит ускорить сайт – минимизация кода. Это лучше доверить профессионалам, но существуют также онлайн инструменты по минимизации кода.

Всё это сказывается на показателях INP и FCP. В зависимости от начального уровня проблемы, удаление ненужного кода может улучшить эти показатели на 10-20%.

Важно – перед любыми изменениями кода создайте резервную копию всех важных файлов. Неумелое обращение с кодом может повлиять на работоспособность вашего проекта.

Использование CDN и HTTP/2

Вы могли видеть, что крупные сайты используют для загрузки страниц CDN – технологию Cloud Delivery Network. Вы можете взять её на вооружение и для своего проекта независимо от его размера.

CDN позволяет настроить контент для параллельной загрузки ресурсов. Например, вы можете использовать Cloudflare или его аналоги. Дополнительно в настройках можно включить HTTP/2 или HTTP/3.

Это сказывается сразу на всех метриках CWV и в зависимости от изначальной ситуации может улучшить их на 10-30%.

Настройка кэширования

Кэширование ускоряет загрузку страниц и помогает улучшить оценку LCP и INP в Core Web Vitals.

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

Если вы будете настраивать вручную, то:

• Установите cache-control, expires.
• Включите сервис-воркеры для PWA.
• Используйте stale-while-revalidate.

Но вам не требуется разбираться в деталях, настроить кэширование можно с помощью программиста или использовать готовые плагины кеширования. Например, для WordPress существуют десятки готовых решений, которые можно настроить даже без знаний в программировании:

Устранение сдвигов верстки

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

Вы можете улучшить показатель на 80-90%, если сейчас он в красной зоне, простыми действиями:

• Указывайте размеры элементов в коде.
• Задайте резервные блоки под рекламу.
• Используйте font-display: swap для шрифтов.

По нашей практике, резервные блоки под рекламу есть менее чем на 20% сайтов с рекламой. При этом это легко реализуется и оказывает значительный эффект на оценку.

Проблемы и решения

Отчёт о проблемах конкретной страницы – лучший источник информации, что именно нужно поправить. Google PageSpeed Insights также дает некоторые рекомендации по их решению, поэтому в одном инструменте вы сможете узнать сразу практически всё, что требуется для решения проблем на вашем сайте.

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

В отчете используется три цвета рекомендаций:

• Красный – критические рекомендации, которые важно соблюсти.
• Желтый – рекомендации, которые желательно соблюсти.
• Серые – базовые рекомендации, не оказывают значимого влияния.

В идеальном случае, необходимо учесть сразу все, но если ваш бюджет и навыки ограничены, то программа минимум – исправить красные рекомендации и часть желтых.

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

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

Разберем несколько примеров проблем и решений. Например, если вы столкнулись с проблемой, что загрузка корневого документа занимает слишком много времени, то необходимо поработать над темой. Google рекомендует следующее:

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

Другой пример – долгое ожидание отрисовки самого крупного контента. Google в данном случае не дает решений, лишь подсвечивает наличие проблемы:

Решение зависит от элемента, в данном случае речь про рекламу – заменять месторасположения не требуется, но можно принудительно загрузить блок после остальных или настроить асинхронную загрузку. Это позволит полностью решить проблему, так как блок перестанет быть первым и самым крупным.

Аналогичным образом вы сможете оценить другие проблемы. Но чтобы вам было проще найти решение, важно знать – какой специалист может помочь:

Проблема	Решение	Специалист
Долгий FCP	Минификация и кэш JS/CSS + предзагрузка критического CSS	Фронтенд разработчик
Плохой LCP	Оптимизация изображений + lazy-loading	Фронтенд разработчик и DevOps
Высокий CLS	Фиксированные размеры блоков, layout-контроль	Верстальщик и UX
Задержки на клики (INP больше 200 мс)	Оптимизация JavaScript + разбивка	Бекенд разработчик
Много ненужного JS	Отказ от тяжелых и устаревших библиотек	Бекенд разработчик
Нет кэширования	Настройка заголовков сервера + внедрение CDN	DevOps

Найти специалиста для решения проблемы, если вам не хватает собственных навыков, можно на биржах фриланса.

Как скорость и UX влияют на ранжирование

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

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

Помимо оценки Core Web Vitales, также важно обращать внимание и на UX – User Experience. Google оценивает реальное поведение пользователей на сайте, чтобы понять их опыт. На это влияет сразу множество параметров, в частности:

• Адаптивность дизайна
• Удобство навигации
• Понятность структуры контента
• Минимальное количество раздражающих элементов
• Доступность для всех пользователей, включая посетителей с ограниченными возможностями
• И некоторые другие

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

Поведенческие факторы сильно влияют на формирование выдачи и могут стать решающими при формировании выдачи по высококонкурентным запросам. Например, Google оценивает следующие параметры:

• Время на странице
• Количество просмотров страниц на посетителя
• Доля возвратов в поиск со старым запросом

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

Даже если вы успешно прошли оценку Core Web Vitals, это не гарантирует трафик. Плохое техническое состояние сайта может стать критичным, но без качественного и полезного контента, который отвечает на запрос пользователя, эффективное SEO невозможно. Как и без удобного оформления страницы, которое делает взаимодействие простым и понятным.

Для оценки UX существуют специальные сервисы, но также есть отдельная услуга на биржах фриланса – оценка пользовательского опыта. Это особенно полезно для интернет-магазинов и коммерческих сайтов, где UX влияет не только на SEO, но и на конверсию.

Вы можете отдельно заказать оценку UX или оценку путей посетителя на сайте, либо оценить это самостоятельно с помощью Яндекс Метрики. В Метрику входит инструмент “Вебвизор”, через который можно бесплатно и наглядно оценить поведение пользователей на сайте – как именно посетители взаимодействуют со страницей:

Это бесплатный отчет, но по умолчанию он выключен. Чтобы получить данные о действиях пользователей, необходимо включить Вебвизор. Помимо активации в личном кабинете Яндекс Метрики, может потребоваться обновить код счетчика на странице.

Вебвизор даёт полное понимание, как посетители взаимодействуют со страницей – это настоящий кладезь информации для исправления проблем.

Например, вы сможете увидеть запись экрана, как именно человек взаимодействовал со страницей. Это особенно полезно для оценки UX сайтов с формой заказа, CTA и другими блоками на странице. Например:

Помимо фактических действий на странице, UX и удобство можно оценить по методу Google – изучите среднее время на сайте, процент отказов и другие метрики, сигнализирующие об удобстве контента для пользователя. Данные доступны в Яндекс Метрике или других системах аналитики.

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

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

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