Core Web Vitals: практическое руководство по скорости
Что измеряют Core Web Vitals, как проверить их бесплатными инструментами и три конкретных исправления, которые улучшат показатели и позиции в Google.
Медленный сайт теряет посетителей еще до того, как отрисуется первый заголовок. Google это знает, поэтому Core Web Vitals входят в его системы ранжирования: если страницы загружаются быстро и плавно реагируют, вы конкурируете лучше. Хорошая новость в том, что для улучшения этих метрик редко нужна полная переделка сайта — нужно понимать, что измерять и с чего начинать.
Что такое Core Web Vitals
Это три метрики, которыми Google описывает реальный опыт загрузки страницы:
- LCP (Largest Contentful Paint): за сколько отрисовывается самый крупный видимый элемент — обычно главное изображение или заголовок. Цель: меньше 2,5 секунды.
- INP (Interaction to Next Paint): как быстро страница реагирует, когда пользователь нажимает, кликает или печатает. Цель: меньше 200 миллисекунд.
- CLS (Cumulative Layout Shift): насколько сильно «прыгает» верстка во время загрузки. Цель: меньше 0,1.
Ключевая деталь: Google оценивает данные реальных пользователей (отчет CrUX), а не только лабораторные тесты. Поэтому сайт может проходить проверку на вашем ноутбуке и проваливаться на среднем смартфоне с мобильным интернетом.
Как измерить бесплатно
Три бесплатных инструмента закрывают почти весь процесс диагностики:
- PageSpeed Insights показывает полевые данные и лабораторный аудит по любому URL.
- Search Console (отчет «Основные интернет-показатели») группирует проблемные URL по всему сайту.
- Lighthouse в Chrome DevTools позволяет повторять тесты по мере внесения правок.
Аудит можно запустить и прямо из терминала:
npx lighthouse https://your-site.com --viewТри исправления с быстрым эффектом
Оптимизируйте главное изображение
LCP почти всегда упирается в одну картинку. Отдавайте ее в современном формате (AVIF или WebP), задавайте явные размеры и помечайте атрибутом fetchpriority="high". Всему, что ниже первого экрана, ставьте loading="lazy".
Сократите блокирующий JavaScript
Каждый килобайт JavaScript нужно скачать, разобрать и выполнить, прежде чем страница станет отзывчивой. Удалите неиспользуемые библиотеки, разделите код по маршрутам и отложите сторонние скрипты, без которых можно обойтись при первой отрисовке.
Резервируйте место под поздний контент
CLS возникает, когда реклама, изображения или шрифты сдвигают контент. Всегда указывайте width и height у изображений, выделяйте контейнеры фиксированной высоты под рекламные блоки и используйте font-display: swap с похожим резервным шрифтом.
Вывод
Не гонитесь за идеальными 100 баллами — это лабораторный показатель, а не цель. Сосредоточьтесь на том, чтобы все три полевые метрики были «в зеленой зоне» у реальных пользователей. Сначала измерьте, затем исправьте главное изображение, урежьте JavaScript и стабилизируйте верстку — на большинстве сайтов именно этот порядок решает основную часть проблемы.