Что такое Core Web Vitals?
Core Web Vitals — это набор из трех конкретных метрик, которые Google использует для оценки пользовательского опыта на веб-странице. Эти метрики стали официальным фактором ранжирования в мае 2021 года и с тех пор играют важную роль в SEO.
Три основные метрики
- LCP (Largest Contentful Paint) — время загрузки самого большого контентного элемента. Хорошее значение: менее 2.5 секунд.
- FID (First Input Delay) — задержка до первого взаимодействия. Хорошее значение: менее 100 миллисекунд.
- CLS (Cumulative Layout Shift) — визуальная стабильность страницы. Хорошее значение: менее 0.1.
Как измерять Core Web Vitals
Google предоставляет несколько инструментов для измерения этих метрик:
1. Google PageSpeed Insights
Самый простой способ — ввести URL вашего сайта в PageSpeed Insights. Сервис покажет значения всех трех метрик как для мобильных, так и для десктопных устройств.
2. Google Search Console
В разделе «Производительность» → «Core Web Vitals» вы увидите отчет о проблемах на вашем сайте. Google группирует страницы по типам проблем и показывает примеры URL.
3. Chrome DevTools
В Chrome DevTools есть вкладка «Performance», где можно записать сессию и увидеть детальные метрики. Это особенно полезно для разработчиков, которые хотят понять, что именно замедляет страницу.
Как улучшить LCP (Largest Contentful Paint)
LCP измеряет время загрузки самого большого элемента на странице — обычно это изображение, видео или блок текста.
Оптимизация изображений
- Используйте современные форматы: WebP, AVIF вместо JPEG/PNG
- Сжимайте изображения перед загрузкой
- Указывайте размеры изображений (width и height) в HTML
- Используйте lazy loading для изображений ниже линии сгиба
Оптимизация сервера
- Используйте CDN для статических ресурсов
- Включите кэширование на сервере
- Оптимизируйте время ответа сервера (TTFB)
- Используйте HTTP/2 или HTTP/3
Оптимизация CSS и JavaScript
- Минифицируйте CSS и JS файлы
- Удаляйте неиспользуемый код
- Критический CSS размещайте inline в <head>
- Откладывайте загрузку некритического JavaScript
Как улучшить FID (First Input Delay)
FID измеряет время от первого взаимодействия пользователя (клик, нажатие клавиши) до момента, когда браузер может обработать это взаимодействие.
Оптимизация JavaScript
- Разбивайте большие JS-файлы на более мелкие модули
- Используйте code splitting
- Откладывайте загрузку некритического JavaScript
- Используйте Web Workers для тяжелых вычислений Минимизируйте выполнение JavaScript в основном потоке
Оптимизация сторонних скриптов
- Загружайте аналитику и рекламу асинхронно
- Используйте defer или async для скриптов
- Рассмотрите возможность отложенной загрузки сторонних виджетов
Как улучшить CLS (Cumulative Layout Shift)
CLS измеряет визуальную стабильность — насколько элементы страницы «прыгают» во время загрузки.
Указывайте размеры изображений и видео
Всегда указывайте атрибуты width и height для изображений:
<img src="image.jpg" width="800" height="600" alt="Описание">Избегайте вставки контента поверх существующего
- Резервируйте место для рекламных блоков
- Избегайте вставки виджетов, которые могут сдвинуть контент
- Используйте CSS transform вместо изменения layout-свойств
Используйте font-display: swap осторожно
При использовании кастомных шрифтов с font-display: swap может произойти сдвиг текста. Используйте font-display: optional или font-display: fallback для критических шрифтов.
Практические примеры оптимизации
Пример 1: Оптимизация изображения
До:
<img src="large-photo.jpg" alt="Фото">После:
<img src="large-photo.webp"
width="1200"
height="800"
loading="lazy"
alt="Фото">Пример 2: Оптимизация загрузки шрифтов
До:
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">После:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Мониторинг и постоянное улучшение
Core Web Vitals — это не разовая оптимизация, а постоянный процесс. Регулярно проверяйте метрики в Search Console и PageSpeed Insights, особенно после:
- Добавления нового функционала
- Установки новых плагинов или модулей
- Изменения дизайна
- Обновления CMS или фреймворка
Заключение
Core Web Vitals — это не просто технические метрики, это отражение реального пользовательского опыта. Улучшая эти показатели, вы не только повышаете позиции в поиске, но и делаете сайт более удобным для посетителей. Начните с измерения текущих значений, определите проблемные страницы и постепенно оптимизируйте их.
Помните: даже небольшие улучшения могут значительно повлиять на конверсию и ранжирование. Не пытайтесь оптимизировать все сразу — работайте системно, измеряйте результаты и итеративно улучшайте.