Core Web Vitals: как оптимизировать сайт и улучшить его ранжирование в Яндексе и Google

В этой статье я подробно раскрою процесс работы с Google Core Web Vitals для качественной технической оптимизации сайта. А также поясню, почему это важно не только для Google, но и для Яндекса.

Оглавление

• Что такое Google Core Web Vitals?
• Почему это важно для SEO-продвижения?
• Метрики Core Web Vitals
• Как получить данные?
  • Оценка LCP и CLS через Google PageSpeed Insights
  • Оценка INP через Lighthouse
  • Отчеты Chrome User Experience (CrUX)
  • Данные Google Search Console
• Как улучшить показатели Core Web Vitals?

Что такое Google Core Web Vitals?

Google Core Web Vitals — это набор из трех метрик, которые измеряют скорость, интерактивность и визуальную стабильность веб-страницы. По ним осуществляется оценка «производительности» страниц сайта. По сути производится анализ пользовательского опыта (UX) по нескольким десяткам факторов, которые являются частью сигналов ранжирования как в Google, так и в Яндексе.

Почему это важно для SEO-продвижения?

Прежде чем перейти к рассмотрению конкретных метрик, скажем о том, почему нужно с ними работать.

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

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

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

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

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

Метрики Core Web Vitals

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

На начало 2025 года к основным метрикам относятся:

• Largest Contentful Paint (LCP) – измеряет скорость загрузки самого крупного элемента в области просмотра при открытии страницы. Чем ниже этот показатель, тем больше показатель отказов: пользователь с большей вероятностью покинет сайт, если контент долго не загружается. Обычно самым крупным элементом является изображение или видео.
• Interaction to Next Paint (INP) – отражает интерактивность страницы, насколько быстро происходит отклик на действия пользователя в целом. К таким действиям относятся события мыши и клавиатуры (например, клик по кнопке, заполнение формы). Для мобильных устройств — это будет взаимодействие с сенсорным экраном и экранной клавиатурой. Долгое время отклика ухудшает пользовательский опыт, что особенно критично для мобильных устройств.
• Cumulative Layout Shift (CLS) – показывает стабильность макета страницы. Этот показатель оценивает суммарное смещение элементов на странице во время посещения страницы. Если элементы интерфейса перемещаются при загрузке и во время взаимодействия с сайтом, это раздражает пользователей. Следование простым правилам позволяет уменьшить значение этого параметра до нуля.

Эффективность (производительность, performance) страницы оценивается в соответствии со следующими критериями:

Более наглядно эти цифры представлены на графиках ниже:

Как получить данные?

Оценка LCP и CLS через Google PageSpeed Insights

Наиболее удобным инструментом для тестирования данных показателей является Google PageSpeed Insights.

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

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

После того, как откроется страница с результатами проведенного анализа, в самом верху вы увидите переключение между данными для мобильных устройств и для компьютера. Результаты для компьютера будут всегда заметно лучше, чем для мобильных. Но при оптимизации сайта нужно ориентироваться именно на данные для мобильных, т.к. на них ориентируются и Google, и Яндекс при ранжировании веб-документов (Mobile First Index).

В самом начале выводится суммарный показатель эффективности (производительности) страницы, который может принимать значения в диапазоне от 0 до 100.

• Значение ниже 50 является критическим. Это означает, что уровень оптимизации не отвечает современным требованиям поисковых систем и сайт не является удобным для пользователей.
• Значение от 50 до 89 говорит о необходимости улучшений.
• Значения от 90 и выше говорят о высоком качестве страницы. Использование счетчиков аналитики, красивых шрифтов, стандартных «библиотек» и «фреймворков», используемых для сложного функционала, является зачастую неизбежным для решения маркетинговых задач владельца сайта. Тем не менее, они отнимают ресурс на загрузку веб-страницы. Показатель 100 для мобильных устройств может быть недостижимым. Но нужно стремиться получить максимум.

Ниже будет более подробная информация по целому ряду значений, в том числе, LCP и CLS.

В данном примере видно, что показатель CLS является идеальным, а показатель LCP требует улучшения, хотя он и не является критичным. Ниже выводится блок «Диагностика», в котором есть рекомендации по оптимизации страницы. Это перечень успешных и неуспешных аудитов.

В частности, мы можем видеть более подробную информацию по параметру LCP. В нашем примере — возможность сократить время с 3.3с до требуемых 2.5с возможно путем уменьшения времени ответа сервера (TTFB = Time To First Byte) и ускорения отрисовки контента.

Оценка INP через Lighthouse

Схема ниже показывает, из чего складывается показатель INP.

Источник: web.dev

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

Инструмент Lighthouse интегрирован в браузер Google Chrome. Он находится на панели DevTools (F12) → вкладка «Lighthouse».

Результаты аудитов через Lighthouse выглядят аналогичным образом, как и в PageSpeed Insights. Для оценки INP необходимо выбрать Mode: Timespan, как это показано на изображении ниже. Не забудьте выбрать режим мобильного устройства! После этого запустится режим сбора данных. Вы осуществляете различные взаимодействия со страницей сайта, и после проведения всех тестов завершаете процесс и получаете результат.

Отчеты Chrome User Experience (CrUX)

Инструменты «лабораторной» оценки PageSpeed Insights и Lighthouse удобны для тестирования изменений на сайте, а также для оценки производительности новых сайтов или сайтов с низкой посещаемостью. Тем не менее, это не совсем те данные, которые учитываются поисковыми алгоритмами поисковых систем.

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

Если за последние 28 дней было собрано достаточное количество данных, то в отчете PageSpeed Insights вначале будут выведен блок со средними показателями страницы за последние 4 недели. На изображениях ниже можно увидеть, что, например, показатель LCP сильно отличается в оценке CrUX (3.8с) и оценке PageSpeed Insights (7.4с). Если за последний месяц на данной странице не было изменений, то более высокий показатель по CrUX говорит о том, что реальная оценка производительности сайта, на самом деле, выше, чем это показывает аудит, сделанный в «лабораторных условиях».

Здесь же приведен показатель INP, который покажет намного более точные данные, чем через Lighthouse.

Данные по CLS также могут сильно различаться, если на некоторых устройствах происходит сдвиг макета. В этом случае необходимо проверить, как себя ведет макет на разных типах устройств с различными шириной и положением экрана (portrait, landscape). В примере ниже этого нет, и сдвиг макета незначительный.

Данные Google Search Console

В Google консоли есть отчет, который называется «Core Web Vitals». Здесь собираются все данные по эффективности работы страниц сайта. Это так же данные на основе CrUX. Но здесь есть возможность получить более детальные данные по группам страниц.

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

Как улучшить показатели Core Web Vitals?

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

К основным рекомендациям относятся следующие:

• оптимизация работы сервера или перенос сайта на другой более быстрый сервер, а также использование CDN для изображений и видео, скриптов, jQuery;
• оптимизация CSS/JS-скриптов:
  • некоторые из скриптов должны загружаться только на определенном типе страниц (например, не нужно загружать стили оформления детальной страницы товара на главной или в каталоге товаров; или загружать скрипт калькулятора на страницах, где его нет). Следовательно, нужно выделить специфичный код и загружать его только на тех страницах, где он нужен;
  • следует отложить загрузку некоторых JS-скриптов с помощью команд defer и async, если это не влияет на взаимодействие со страницей в первые секунды. Например, карусель изображений, расположенная внизу страницы;
  • часть кода, который не является критичным, можно перенести в конец;
  • минифицированный CSS/JS-код уменьшает размер файлов и позволяет быстрее их загрузить.
• оптимизация изображений, видео:
  • загрузка изображений в оптимальном разрешении (корректная ширина и высота);
  • указание ширины и высоты изображений и видео, чтобы не сдвигался макет во время загрузки;
  • использование lazy load для изображений;
  • использование preload для изображений, которые должны быть отрисованы в видимой при загрузке части страницы;
  • использование оптимизированных форматов webp/avif;
• шрифты — использование display:swap;
• динамический контент — если на странице есть места, где контент подгружается из других источников (например, реклама), убедитесь, что для него зарезервировано место, точно указана ширина и высота блока, чтобы не сдвигался макет.

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