Скорость сайта — это не комфорт, а деньги. Каждый дополнительный секунда загрузки обходится бизнесу в 7 % конверсии. Google с 2021 года учитывает Core Web Vitals в ранжировании, а с обновлением March 2024 Core Update вес этих сигналов только вырос.
Если ваш сайт не проходит пороги LCP, FID и CLS — вы теряете позиции в поиске и клиентов. Разберём каждую метрику и дадим конкретный план действий.
Что такое Core Web Vitals
Core Web Vitals — три метрики, которые измеряют пользовательский опыт на реальных устройствах реальных посетителей:
- LCP (Largest Contentful Paint) — скорость отрисовки крупнейшего элемента в видимой области. Целевой порог — до 2,5 секунды.
- FID (First Input Delay) — задержка перед первым взаимодействием. Целевой порог — до 100 миллисекунд. С марта 2024 заменён на INP (Interaction to Next Paint).
- CLS (Cumulative Layout Shift) — визуальная стабильность страницы. Целевой порог — до 0,1.
Данные берутся из Chrome UX Report — это не синтетика, а реальные пользовательские сессии.
LCP: ускоряем главный контент
LCP показывает, как быстро пользователь видит основное содержимое страницы —英雄图片, заголовок или текстовый блок.
Частые причины медленного LCP
- Несжатые изображения в формате PNG/JPEG вместо WebP или AVIF
- Рендер-блокирующие CSS и JS в
- Сервер с высоким Time to First Byte (TTFB > 600 мс)
- Отсутствие CDN для статических активов
План оптимизации LCP
- Конвертируйте изображения в WebP/AVIF с помощью Sharp или Squoosh
- Добавьте
fetchpriority="high"на главное изображение - Предзагрузку критических ресурсов:
<link rel="preload"> - Настройте CDN (Cloudflare, Bunny) и кэширование на уровне сервера
INP: убираем задержки взаимодействия
INP заменил FID и измеряет время от клика до следующей отрисовки. Медленный INP означает, что сайт «зависает» при нажатии кнопок, прокрутке или вводе.
- Разбейте длинные JS-задачи на микрозадачи через
requestIdleCallback - Делегируйте аналитику и сторонние скрипты в Web Worker
- Используйте
loading="lazy"для некритичных iframe и изображений - Проверьте Impact на каждом взаимодействии в Chrome DevTools → Performance
Хороший INP — это когда пользователь не замечает задержку. Если он кликнул и ничего не произошло за 200 мс — вы уже потеряли его доверие.
CLS: фиксируем layout
CLS измеряет, насколько элементы прыгают по странице. Каждое смещение — это промахнутый клик, раздражение и потеря конверсии.
- Задавайте width и height для всех изображений и видео — браузер зарезервирует место
- Используйте
aspect-ratioв CSS для адаптивных блоков - Не вставляйте контент над существующим — баннеры, push-уведомления, cookie-бары только в зарезервированном пространстве
- Для шрифтов:
font-display: swap+ предзагрузка<link rel="preload" as="font">
Чеклист: что проверить прямо сейчас
- Запустите PageSpeed Insights — посмотрите данные поля и лабораторные данные
- Откройте Search Console → Core Web Vitals — сколько URL с плохим статусом?
- Проверьте TTFB:
curl -o /dev/null -s -w "%{time_starttransfer}" URL - Сканируйте сайт Lighthouse в CI — настраивайте бюджет производительности
- Удалите неиспользуемый JS и CSS (Coverage tab в DevTools)
Core Web Vitals — это не разовая задача, а процесс. Мониторьте метрики еженедельно, фиксируйте регрессии в CI и не ждите идеальных 100/100 — стремитесь к зелёной зоне по всем трём показателям.
Нужна помощь с техническим SEO? Команда DAMIR STUDIO проведёт аудит производительности и подготовит план оптимизации — оставьте заявку.