Core Web Vitals: Полный гайд по технической оптимизации сайта

Скорость загрузки сайта напрямую влияет на конверсию и ранжирование. Google использует Core Web Vitals как фактор ранжирования с 2021 года, и игнорировать эти показатели — значит терять позиции и клиентов.

Каждый третий пользователь уходит со страницы, если она загружается дольше 3 секунд. Для бизнеса это означает потерю дохода и репутации. Разберём, как измерять и улучшать ключевые метрики производительности.

Что такое Core Web Vitals

Core Web Vitals — это набор метрик, которые оценивают пользовательский опыт: скорость загрузки, интерактивность и визуальную стабильность. Три основных показателя:

• LCP (Largest Contentful Paint) — время загрузки самого крупного элемента viewport. Цель: менее 2,5 секунд.
• INP (Interaction to Next Paint) — отзывчивость на действия пользователя. Цель: менее 200 миллисекунд.
• CLS (Cumulative Layout Shift) — стабильность верстки при загрузке. Цель: менее 0,1.

Эти метрики измеряются на основе реальных данных пользователей (field data) через Chrome User Experience Report.

Оптимизация LCP: ускоряем загрузку контента

LCP определяется временем от начала навигации до рендера самого крупного видимого элемента — обычно это изображение, видео или блок текста. Для улучшения показателя:

Оптимизируйте сервер: используйте CDN, включите HTTP/2 и кэширование. Время TTFB (Time to First Byte) должно быть менее 600 мс.

Сжимайте изображения: форматы WebP и AVIF уменьшают размер файлов на 25-50% без потери качества. Используйте lazy loading для изображений вне первого экрана.

Устраните блокирующие ресурсы: отложите загрузку JavaScript, используйте async/defer для скриптов, критический CSS внедрите inline.

Улучшение INP: быстрая реакция на действия

INP заменил FID в 2024 году и измеряет задержку при всех взаимодействиях на странице, а не только при первом. Для большинства сайтов проблемные места — тяжёлые JavaScript-обработчики и анимации.

Разбейте длинные задачи: JavaScript-код, выполняющийся дольше 50 мс, блокирует интерфейс. Используйте requestIdleCallback и Web Workers для фоновых операций.

Оптимизируйте обработчики событий: делегируйте события, используйте пассивные слушатели для scroll и touch. Избегайте синхронных layout-операций внутри обработчиков.

«Каждые 100 мс задержки снижают конверсию на 1%. Оптимизация INP — это прямые деньги для бизнеса.»

Устранение CLS: стабильная вёрстка

Сдвиги элементов раздражают пользователей: кнопка «Купить» прыгает, текст исчезает под блоком рекламы. Основные причины CLS: изображения без размеров, динамический контент, веб-шрифты.

Задайте размеры изображениям: атрибуты width и height или CSS-свойство aspect-ratio резервируют место до загрузки файла.

Предзагрузите шрифты: используйте <link rel="preload" as="font"> и font-display: optional для предотвращения FOIT/FOUT.

Зарезервируйте место для рекламы: установите минимальную высоту для блоков с динамическим контентом.

Инструменты для измерения

PageSpeed Insights — показывает данные CrUX и рекомендации по улучшению. Search Console — агрегирует CWV для всего сайта и выделяет проблемные URL. Lighthouse — детальный аудит производительности в DevTools.

Регулярно проверяйте показатели и внедряйте улучшения итеративно. Даже небольшие изменения в коде могут дать прирост позиций и конверсий.