Что такое Core Web Vitals
Core Web Vitals — набор метрик разработанных Google для измерения реального пользовательского опыта. Они фокусируются на трёх аспектах: скорость загрузки, визуальная стабильность и интерактивность страницы.
С мая 2021 года Google включил Core Web Vitals в алгоритм Page Experience — это означает что сайты с хорошими показателями получают преимущество в ранжировании перед сайтами с плохими показателями при прочих равных условиях.
По данным Google, страницы с хорошими Core Web Vitals имеют на 24% ниже показатель отказов по сравнению со страницами с плохими показателями.
LCP — Largest Contentful Paint
Измеряет время от начала загрузки страницы до момента когда самый большой видимый элемент (изображение, видео или блок текста) полностью отображается на экране.
Причины плохого LCP:
- Медленный сервер (высокий TTFB)
- Неоптимизированные изображения — тяжёлые PNG/JPG без сжатия
- Блокирующий рендеринг CSS и JavaScript
- Отсутствие предзагрузки главного изображения (preload)
CLS — Cumulative Layout Shift
Измеряет насколько неожиданно смещаются элементы страницы во время загрузки. Высокий CLS означает что кнопки и текст прыгают при загрузке — это раздражает пользователей.
Причины плохого CLS:
- Изображения без явно заданных размеров width и height
- Реклама и виджеты без зарезервированного места
- Динамически подгружаемый контент без placeholder
- Веб-шрифты которые вызывают FOIT/FOUT при загрузке
INP — Interaction to Next Paint
Измеряет время от нажатия кнопки/клика до визуального отклика страницы. Заменил FID в марте 2024 года. Отражает насколько быстро страница реагирует на действия пользователя.
Как проверить Core Web Vitals
- PageSpeed Insights — показывает реальные данные из Chrome UX Report и лабораторные данные
- Google Search Console — раздел "Core Web Vitals" показывает данные по всем страницам сайта
- Audit4SEO — автоматическая проверка всех метрик в составе SEO аудита
Как улучшить Core Web Vitals
Улучшение LCP:
- Добавьте <link rel="preload"> для главного изображения страницы
- Переведите изображения в формат WebP
- Используйте CDN для ускорения доставки контента
- Оптимизируйте TTFB — время ответа сервера
Улучшение CLS:
- Всегда задавайте width и height для изображений и видео
- Резервируйте место для рекламных блоков заранее
- Используйте font-display: swap для веб-шрифтов
Улучшение INP:
- Разбейте длинные задачи JavaScript на части
- Используйте Web Workers для тяжёлых вычислений
- Минимизируйте количество JavaScript на странице
Проверьте свой сайт по этому чек-листу
Запустите бесплатный SEO-аудит — все ключевые параметры за 30 секунд. Без регистрации, с готовым планом исправлений.