Core Web Vitals: как пройти проверку скорости Google

В 2021 году Google объявил, что Core Web Vitals входят в число факторов ранжирования. Теперь на ваши позиции в поиске напрямую влияют три конкретные метрики: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Interaction to Next Paint (INP). Сайты с плохими показателями реже занимают высокие позиции. Сайты с отличными показателями получают преимущество в ранжировании. Для современного SEO прохождение Core Web Vitals обязательно.

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

Что такое Core Web Vitals и почему они важны

Core Web Vitals измеряют три аспекта пользовательского опыта: скорость загрузки (LCP), визуальную стабильность (CLS) и отзывчивость (INP). Страница Google Web Vitals подробно определяет каждую метрику. Эти три метрики отражают самые важные стороны того, как пользователи воспринимают ваш сайт.

Google собрал триллионы точек данных от реальных пользователей, чтобы определить, какие метрики важнее всего. Так появились Core Web Vitals. Это не произвольные пороги, а основанные на данных измерения того, что делает сайт быстрым и отзывчивым для реальных пользователей.

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

Largest Contentful Paint (LCP): измерение скорости загрузки

Largest Contentful Paint (LCP) измеряет, сколько времени требуется, чтобы самый крупный элемент контента на странице стал виден пользователю. Это может быть изображение, видео, заголовок или текстовый блок. LCP фиксирует момент, когда пользователь видит основной контент и понимает, что страница загрузилась.

Рекомендация Google: LCP должен быть меньше 2,5 секунды. Страницы с LCP до 2,5 секунды считаются «хорошими». Страницы с LCP от 2,5 до 4 секунд «требуют улучшения». Страницы с LCP более 4 секунд считаются «плохими». Если LCP превышает 3 секунды, пользователи воспринимают страницу как медленную. Если LCP превышает 4 секунды, пользователи часто уходят со страницы.

Типичные причины медленного LCP: медленный ответ сервера, CSS и JavaScript, блокирующие отрисовку, неоптимизированные изображения и тяжёлые шрифты, которые долго загружаются. Как исправить LCP: ускорить сервер (сократить Time to First Byte / TTFB), убрать ресурсы, блокирующие отрисовку, отложить загрузку JavaScript, оптимизировать и сжать изображения, использовать современные форматы изображений (WebP) и заранее загружать критичные ресурсы.

PageSpeed Insights показывает ваш показатель LCP и даёт конкретные рекомендации. Запустите тест на ключевых страницах, расставьте рекомендации по приоритету в зависимости от влияния и сначала внедрите самые эффективные исправления.

Cumulative Layout Shift (CLS): измерение визуальной стабильности

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

Рекомендация Google: CLS должен быть меньше 0,1. Показатель CLS ниже 0,1 считается «хорошим». Значения от 0,1 до 0,25 требуют улучшения. Значения выше 0,25 считаются «плохими». Даже небольшие сдвиги макета накапливаются. CLS 0,15 означает, что элементы страницы суммарно сместились на 15% высоты окна просмотра за время загрузки. Пользователей это раздражает и расстраивает.

Типичные причины высокого CLS: реклама, которая загружается асинхронно, изображения без заданных атрибутов width и height, встраиваемые элементы (видео YouTube, виджеты соцсетей), которые загружаются асинхронно, и шрифты, которые резко подменяются. Как исправить CLS: указать размеры изображений в HTML (атрибуты width и height), зарезервировать место под рекламу до её загрузки, использовать font-display: swap в CSS @font-face, чтобы избежать рывков при подмене шрифта, и загружать видео и встраиваемые элементы синхронно или с зарезервированным местом.

У каждого изображения на вашем сайте должны быть явно заданные атрибуты width и height. Так браузер резервирует место до загрузки изображения. Без размеров браузер не знает, сколько места нужно зарезервировать, и при появлении изображения макет сдвигается.

Interaction to Next Paint (INP): измерение отзывчивости

Interaction to Next Paint (INP) измеряет, насколько быстро страница реагирует на действия пользователя (клики, касания, ввод с клавиатуры). INP это время между действием пользователя на странице и визуальным откликом страницы. Отзывчивая страница реагирует за миллисекунды. Неотзывчивой странице нужны секунды.

Рекомендация Google: INP должен быть меньше 200 миллисекунд. Значения до 200 мс считаются «хорошими». Значения от 200 до 500 мс требуют улучшения. Значения выше 500 мс считаются «плохими». Пользователи ожидают мгновенного отклика. INP в 500 мс ощущается как тормоза. INP в 1 секунду ощущается как поломка.

Типичные причины плохого INP: тяжёлый JavaScript, блокирующий основной поток, крупные сторонние скрипты, неэффективные обработчики событий и отсутствие использования requestIdleCallback. Как исправить INP: разбить длинные задачи JavaScript на более мелкие части, отложить некритичный JavaScript, удалить неиспользуемые скрипты, оптимизировать обработчики событий и использовать web workers для ресурсоёмких задач.

INP часто сложнее всего оптимизировать среди метрик Core Web Vitals, потому что для этого нужен опыт работы с JavaScript. Если у вашей команды нет навыков оптимизации JavaScript, подумайте о привлечении консультанта по производительности или о стороннем сервисе оптимизации производительности.

Как измеряются Core Web Vitals

Core Web Vitals измеряются двумя способами: лабораторные данные и полевые данные. Лабораторные данные поступают от инструментов вроде PageSpeed Insights и Lighthouse, которые работают в контролируемой среде. Полевые данные поступают от реальных пользователей, посещающих ваш сайт. Google отдаёт приоритет полевым данным, потому что они отражают реальный пользовательский опыт.

Учебный курс Google по производительности объясняет разницу между лабораторными и полевыми метриками. Лабораторные данные помогают находить проблемы и проверять исправления. Полевые данные показывают реальную производительность. Лабораторные показатели могут быть отличными, а полевые плохими, если ваши реальные пользователи сидят на медленных сетях или старых устройствах.

Google Search Console показывает полевые данные Core Web Vitals. В отчёте приведены измерения реальных пользователей, собранные в Chrome User Experience Report (CrUX). Если у вашего сайта недостаточно данных от реальных пользователей, Google вместо них показывает лабораторные данные Lighthouse.

Ориентиры и проходные значения

Google считает Core Web Vitals «хорошими», если они укладываются в 75-й процентиль пользовательского опыта. Это значит, что 75% реальных пользователей видят ваш сайт на уровне порога или лучше. Пороги такие:

LCP: 2,5 секунды или меньше. CLS: 0,1 или меньше. INP: 200 миллисекунд или меньше. Эти пороги научно подтверждены анализом триллионов реальных взаимодействий пользователей. Страницы на уровне этих порогов и выше обеспечивают хороший пользовательский опыт.

При этом Google не требует, чтобы 100% ваших страниц проходили Core Web Vitals. Если проходят 75% страниц, считается, что у сайта в целом «хорошие» Core Web Vitals. Это значит, что у вас могут быть и более медленные страницы, а сайт всё равно пройдёт проверку, если страницы, приносящие большую часть трафика, работают быстро.

Оптимизация каждой метрики: практические шаги

Оптимизация LCP: сначала измерьте TTFB (Time to First Byte) в PageSpeed Insights. Если TTFB медленный (более 600 мс), узкое место ваш сервер. Улучшите хостинг, оптимизируйте серверный код или подключите сеть доставки контента (CDN). Если TTFB хороший, а LCP медленный, значит, отрисовку блокируют CSS или JavaScript. Отложите некритичный JavaScript и встройте критический CSS для контента на первом экране.

Оптимизация CLS: проверьте сайт на элементы, которые смещаются во время загрузки. Найдите смещающиеся элементы в инструментах разработчика браузера. Добавьте атрибуты width и height к каждому изображению. Используйте font-display: swap в CSS. Зарезервируйте место под рекламу, встраиваемые элементы и динамический контент.

Оптимизация INP: на вкладке Performance в Chrome DevTools найдите длинные задачи JavaScript (задачи дольше 50 мс). Разбейте длинные задачи на части. Отложите некритичный JavaScript. Используйте requestIdleCallback для некритичной работы. Тестируйте на реальных устройствах, а не только на настольных компьютерах.

Мониторинг Core Web Vitals в динамике

Используйте Google Search Console, чтобы отслеживать показатели Core Web Vitals. Отчёт Core Web Vitals показывает метрики реальных пользователей вашего сайта и то, как они соотносятся с порогами Google. Страницы делятся на категории: «Хорошие», «Требуют улучшения» и «Плохие».

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

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

Core Web Vitals и стратегия SEO

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

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

Заключение

Core Web Vitals теперь необходимы для успеха в SEO. Оптимизация LCP, CLS и INP напрямую улучшает ваши позиции в поиске и пользовательский опыт. Сайты с отличными Core Web Vitals обгоняют не менее релевантные сайты с плохими показателями. Обойти это невозможно: если вы хотите попасть в топ, вам нужно пройти Core Web Vitals.

Начните с запуска PageSpeed Insights на ключевых страницах. Определите самые серьёзные узкие места и исправьте их в первую очередь. Отдайте приоритет мобильной оптимизации. Регулярно отслеживайте производительность в Google Search Console. Используйте наш GEO SEO-аудит, чтобы найти проблемы с Core Web Vitals на всём сайте и отслеживать улучшения со временем.