Core Web Vitals: что это и как улучшить показатели
Почему одни сайты в ТОПе Google и Яндекса, а другие — нет, даже при качественном контенте?
Одна из причин — Core Web Vitals, показатели пользовательского опыта, которые влияют на ранжирование с 2021 года. Если ваш сайт медленный, тормозит или «прыгает» при загрузке — вы теряете позиции и клиентов.
В этой статье разберём: что такое Core Web Vitals, как их измерить и улучшить без помощи разработчиков.
Что такое Core Web Vitals
Core Web Vitals — это три ключевых метрики, которые Google использует для оценки качества пользовательского опыта:
1. LCP (Largest Contentful Paint) — Скорость загрузки контента
Что измеряет: Время, за которое загружается самый крупный видимый элемент на странице (изображение, блок текста, видео).
Норма: менее 2.5 секунд.
Проблема: Если LCP больше 4 секунд — пользователь уйдёт, не дождавшись загрузки.
2. FID (First Input Delay) → INP (Interaction to Next Paint)
Что измеряет: Время отклика сайта на первое действие пользователя (клик, скролл, ввод текста).
С 2024 года Google заменил FID на INP — более точную метрику взаимодействия.
Норма INP: менее 200 мс.
Проблема: Если сайт «тормозит» при клике на кнопку или меню — пользователь думает, что сайт завис.
3. CLS (Cumulative Layout Shift) — Стабильность визуального контента
Что измеряет: Насколько сильно «прыгают» элементы страницы при загрузке.
Норма: менее 0.1.
Проблема: Пользователь хочет нажать кнопку, но в последний момент она «съезжает» вниз — и клик попадает не туда. Это раздражает.
Почему Core Web Vitals важны для бизнеса
✅ Влияние на SEO
С 2021 года Google официально включил Core Web Vitals в алгоритм ранжирования. Если ваши конкуренты быстрее — они выше в поиске.
✅ Повышение конверсии
Исследования показывают:
- Увеличение LCP на 1 секунду снижает конверсию на 7%
- Высокий CLS снижает конверсию на 25%
- Плохой INP увеличивает отказы на 30%
Вывод: Медленный сайт = потеря денег.
✅ Лучший пользовательский опыт
Даже если вы не гонитесь за ТОП-1, быстрый и стабильный сайт повышает доверие и возвраты пользователей.
Как проверить свои показатели Core Web Vitals
1. Google PageSpeed Insights (бесплатно)
Ссылка: https://pagespeed.web.dev/
Вводите URL страницы — получаете оценку и рекомендации.
Что смотреть:
- Оценка для мобильных и десктопов
- Конкретные значения LCP, INP, CLS
- Список проблем с приоритетами
2. Google Search Console (для владельцев сайтов)
Раздел Core Web Vitals показывает статистику по всем страницам:
- Какие URL требуют улучшений
- Динамика изменений
3. Chrome DevTools (для разработчиков)
Откройте сайт в Chrome → F12 → вкладка Lighthouse → запустите аудит.
Подробный отчёт с конкретными файлами и скриптами, которые тормозят сайт.
Как улучшить LCP (скорость загрузки контента)
❌ Частые проблемы:
- Тяжёлые изображения (несжатые PNG, JPEG)
- Медленный хостинг
- Отсутствие кэширования
✅ Решения:
1. Сжимайте изображения
- Используйте форматы WebP или AVIF (на 30% легче JPEG)
- Сервисы: TinyPNG, Squoosh
2. Используйте CDN
- Cloudflare, KeyCDN — ускоряют доставку контента на 50%
3. Настройте кэширование браузера
Добавьте в .htaccess (для Apache):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
</IfModule>4. Ленивая загрузка изображений
<img src="/photo.jpg" loading="lazy" alt="Описание">Как улучшить INP (отклик на действия)
❌ Частые проблемы:
- Тяжёлые JavaScript-скрипты
- Блокирующие рендеринг CSS
✅ Решения:
1. Уберите неиспользуемый JavaScript
PageSpeed Insights покажет, какие скрипты не используются. Удалите их или загружайте асинхронно:
<script src="/script.js" defer></script>2. Минифицируйте CSS и JS
Инструменты: UglifyJS, CSSNano
3. Используйте lazy load для скриптов
Загружайте только то, что нужно для первого экрана. Остальное — по мере скролла.
Как улучшить CLS (стабильность контента)
❌ Частые проблемы:
- Изображения и видео без заданных размеров
- Динамическая реклама (баннеры AdSense)
- Шрифты, которые загружаются с задержкой
✅ Решения:
1. Задавайте размеры изображениям и видео
<img src="/photo.jpg" width="800" height="600" alt="Фото">2. Резервируйте место под рекламу
Если используете AdSense — задайте блоку фиксированную высоту.
3. Предзагружайте шрифты
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>4. Избегайте вставки контента сверху
Если добавляете баннер или уведомление — не сдвигайте остальной контент вниз. Используйте фиксированное позиционирование.
Частые ошибки при оптимизации Core Web Vitals
❌ Ошибка 1: Оптимизация только главной страницы
Google оценивает ВСЕ страницы сайта. Проверьте и оптимизируйте карточки товаров, статьи, категории.
❌ Ошибка 2: Игнорирование мобильной версии
Более 60% трафика — с мобильных. Проверяйте показатели отдельно для смартфонов.
❌ Ошибка 3: Установка слишком многих плагинов (для WordPress)
Каждый плагин = дополнительные скрипты. Оставьте только необходимое.
Чек-лист: Как улучшить Core Web Vitals за неделю
День 1-2: Диагностика
- [ ] Проверить сайт через PageSpeed Insights
- [ ] Открыть отчёт в Google Search Console
- [ ] Составить список проблемных страниц
День 3-4: Оптимизация LCP
- [ ] Сжать все изображения
- [ ] Подключить CDN
- [ ] Настроить кэширование
День 5: Оптимизация INP
- [ ] Удалить неиспользуемые скрипты
- [ ] Минифицировать CSS и JS
- [ ] Настроить асинхронную загрузку
День 6: Оптимизация CLS
- [ ] Задать размеры всем изображениям
- [ ] Предзагрузить критичные шрифты
- [ ] Убрать динамические вставки контента сверху
День 7: Повторная проверка
- [ ] Запустить PageSpeed Insights
- [ ] Сравнить результаты до/после
Когда обращаться к специалистам
Вы справитесь сами, если:
- Сайт на конструкторе (Tilda, Wix, Shopify)
- Проблемы только в изображениях и шрифтах
- Есть базовые навыки работы с админкой сайта
Нужна помощь, если:
- Сайт на WordPress с кастомной темой
- Требуется переработка кода и скриптов
- Показатели после всех улучшений остаются низкими
Мы помогаем бизнесу ускорить сайты и улучшить Core Web Vitals. Технический аудит, рекомендации и внедрение изменений «под ключ». Результаты — через 2 недели.
📩 Свяжитесь с нами для бесплатной диагностики вашего сайта.
Выводы
- Core Web Vitals — важный фактор ранжирования. Игнорировать их = терять позиции в поиске.
- Три метрики: LCP, INP, CLS. Каждая отвечает за конкретный аспект пользовательского опыта.
- Большинство проблем решаются базовой оптимизацией: сжатие изображений, кэширование, отложенная загрузка.
- Проверяйте регулярно. Показатели могут ухудшиться после обновлений или добавления нового функционала.
Следующий шаг: Откройте PageSpeed Insights прямо сейчас и проверьте свой сайт. На исправление базовых ошибок уйдёт 1-2 часа, а результаты будут заметны через неделю.
🔗 Полезные ссылки:
- Google PageSpeed Insights: https://pagespeed.web.dev/
- Документация Core Web Vitals: https://web.dev/vitals/
- Сервис сжатия изображений: https://tinypng.com/