Core Web Vitals — это три метрики скорости и удобства сайта от Google: LCP (загрузка главного контента до 2,5 с), INP (отклик на действия до 200 мс) и CLS (стабильность до 0,1). Они влияют на позиции и конверсию. Проверить бесплатно — PageSpeed Insights; улучшить — оптимизация картинок, шрифтов, скриптов и сервера.
Зачем вообще скорость сайту
Медленный сайт теряет дважды: посетитель уходит, не дождавшись, а поисковики понижают в выдаче. По исследованиям, задержка в 1–3 секунды заметно режет конверсию. Плюс Core Web Vitals — официальный фактор ранжирования Google.
Скорость важна и для SEO, и для AI-выдачи: поисковики и нейросети предпочитают быстрые, технически здоровые сайты. Подробнее про связь с SEO — в статье «SEO и AI-выдача в 2026».
Три метрики простыми словами
LCP — Largest Contentful Paint
Сколько секунд грузится самый крупный видимый элемент (обычно картинка или заголовок первого экрана). Показывает, когда пользователь видит основной контент.
- Зелёная зона: до 2,5 с.
- Жёлтая: 2,5–4 с.
- Красная: больше 4 с.
INP — Interaction to Next Paint
Как быстро сайт реагирует на действия пользователя (клик, ввод текста, прокрутка). Пришёл на смену старой метрике FID.
- Зелёная зона: до 200 мс.
- Жёлтая: 200–500 мс.
- Красная: больше 500 мс.
CLS — Cumulative Layout Shift
Насколько дёргается макет при загрузке (когда текст «прыгает», потому что догрузилась картинка или баннер). Показывает стабильность.
- Зелёная зона: до 0,1.
- Жёлтая: 0,1–0,25.
- Красная: больше 0,25.
Как улучшить LCP
- Оптимизируйте картинку первого экрана: WebP/AVIF, правильные размеры, lazy-load для всего ниже.
- Не блокируйте рендер тяжёлыми скриптами в
<head>. - Используйте CDN и кэширование на сервере.
- Предзагружайте ключевой ресурс (
preloadдля главного изображения и шрифта).
Как улучшить INP
- Уменьшите объём JavaScript — лишние библиотеки тормозят отклик.
- Разбивайте длинные задачи в коде, чтобы не блокировать главный поток.
- Оптимизируйте сторонние скрипты (аналитика, чаты, реклама) — они часто самые тяжёлые.
Как улучшить CLS
- Задавайте размеры картинок и видео (
width,heightилиaspect-ratio) — тогда макет не прыгает при загрузке. - Резервируйте место под баннеры и встраиваемые элементы.
- Не вставляйте контент выше существующего после загрузки.
- Подгружайте шрифты корректно (
font-display: swapили предзагрузка).
Как проверить и что делать дальше
- Откройте Google PageSpeed Insights — введите адрес, получите оценки и список проблем.
- Проверьте Search Console (раздел «Core Web Vitals») — реальные данные от пользователей Chrome.
- Яндекс.Вебмастер — покажет скорость и ошибки индексирования.
- Исправьте критичные проблемы (обычно картинки и скрипты).
- Перепроверьте через 1–2 недели после переобхода.
Чек-лист быстрого сайта
| Что | Как |
| --- | --- |
| Картинки | WebP/AVIF, размеры, lazy-load |
| Шрифты | Предзагрузка, font-display: swap |
| Скрипты | Минимум JS, отложенная загрузка |
| Сервер | Кэш, CDN, сжатие (gzip/brotli) |
| Макет | Размеры медиа, резервы под баннеры |
Что запомнить
Скорость — это не «последняя polishing», а база. Держите LCP < 2,5 с, INP < 200 мс, CLS < 0,1 — и сайт будет выше в выдаче, удобнее для людей и предпочтительнее для AI. Большая часть проблем решается оптимизацией картинок и скриптов — это не требует переделки проекта, а даёт заметный эффект.
Комментарии · 0