Core Web Vitals 2025: полное руководство по ускорению сайта
Медленный сайт в 2025 году — это прямой путь к потере позиций в Google и реальных клиентов. Пользователи нетерпеливы: задержка всего в секунду может снизить конверсию на 70%. В этом руководстве мы разберем Core Web Vitals — ключевые метрики производительности от Google. Вы узнаете, что это такое и получите пошаговый план по их улучшению с практическими примерами.
Что такое Core Web Vitals?
Core Web Vitals — это набор основных показателей, которые Google использует для оценки пользовательского опыта на веб-странице. Представьте, что пользователь заходит на ваш сайт:
- Как быстро он видит основное содержимое?
- Как быстро сайт реагирует на его клики?
- Не «прыгают» ли элементы на странице?
Google постоянно обновляет эти метрики. Главное изменение 2024 года: метрика FID официально заменена на INP. В 2025 году работаем именно с INP.
Три ключевые метрики производительности
1. LCP (Largest Contentful Paint) — Скорость загрузки
LCP измеряет время загрузки самого большого элемента в области просмотра (например, hero-изображения или заголовка).
Целевые значения:
- Хорошо: LCP ≤ 2.5 секунды
- Плохо: LCP > 4.0 секунды
Основные причины плохого LCP:
- Медленное время ответа сервера
- Неоптимизированные изображения и шрифты
- Блокирующий JavaScript и CSS
- Клиентский рендеринг (актуально для React/Vue)
2. INP (Interaction to Next Paint) — Отзывчивость интерфейса
INP оценивает общую отзывчивость сайта для всех взаимодействий пользователя за время сеанса.
Целевые значения:
- Хорошо: INP ≤ 200 миллисекунд
- Плохо: INP > 500 миллисекунд
INP пришел на смену FID, потому что дает полную картину взаимодействия с сайтом, а не только первой задержки.
Основные причины плохого INP:
- Долго выполняющиеся задачи JavaScript
- Неоптимизированные обработчики событий
- Медленный хостинг и слабые устройства пользователей
3. CLS (Cumulative Layout Shift) — Визуальная стабильность
CLS измеряет, насколько неожиданно сдвигаются элементы на странице при загрузке.
Целевые значения:
- Хорошо: CLS ≤ 0.1
- Плохо: CLS > 0.25
Основные причины плохого CLS:
- Изображения и видео без указанных размеров
- Динамически вставляемая реклама и виджеты
- Веб-шрифты с внезапной сменой
- Контент, добавляемый через JavaScript
Как измерить Core Web Vitals
Используйте три основных инструмента от Google:
PageSpeed Insights — главный инструмент для детального анализа
Google Search Console — показывает статистику по всем страницам сайта
Lighthouse — идеален для локальной отладки и разработки
Практическое руководство по улучшению
Ускоряем LCP
Оптимизируйте серверное время ответа через кеширование и CDN
Конвертируйте изображения в WebP/AVIF и используйте ленивую загрузку
Удаляйте неиспользуемый CSS/JS и включайте сжатие Brotli
Улучшаем INP
Разгружайте основной поток с помощью Web Workers для тяжелых вычислений
Используйте дебаунсинг для оптимизации обработчиков событий
Разбивайте длинные задачи на мелкие части
Пример оптимизации обработчика:
// Плохо: функция выполняется при каждом скролле
window.addEventListener('scroll', () => { heavyCalculation(); });
// Хорошо: с дебаунсингом
function debounce(func, timeout = 100) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
window.addEventListener('scroll', debounce(() => { heavyCalculation(); }));
Исправляем CLS
Всегда указывайте ширину и высоту для изображений
Резервируйте место для динамического контента в CSS
Избегайте вставки элементов поверх существующего контента
Пример резервирования места:
<img src="banner.jpg" width="800" height="600" alt=""> <!-- или --> <div class="ad-container" style="height: 250px;"></div>
Работа с Core Web Vitals — это марафон, а не спринт. Начните с аудита в PageSpeed Insights, определите самое слабое место (чаще всего это INP или LCP на мобильных) и применяйте предложенные методы.
Быстрый и стабильный сайт — это не только плюс к SEO, но и уважение к вашим пользователям, которое они оценят по достоинству.