Core Web Vitals остаются ключевым фактором ранжирования Google в 2026 году. С обновлением метрики INP (Interaction to Next Paint), которая полностью заменила FID, требования к интерактивности сайтов стали ещё строже. В этом руководстве разберём актуальные метрики, методы измерения и практические способы оптимизации.
Что такое Core Web Vitals в 2026 году
Core Web Vitals — это набор метрик Google, оценивающих реальный пользовательский опыт на сайте. В 2026 году актуальны три основные метрики:
LCP (Largest Contentful Paint)
Время отрисовки самого крупного видимого элемента на странице.
- Хорошо: ≤ 2.5 секунды
- Требует улучшения: 2.5 – 4 секунды
- Плохо: > 4 секунд
INP (Interaction to Next Paint)
Заменил FID в марте 2024. Измеряет задержку между действием пользователя и визуальным откликом интерфейса.
- Хорошо: ≤ 200 мс
- Требует улучшения: 200 – 500 мс
- Плохо: > 500 мс
CLS (Cumulative Layout Shift)
Накопительный сдвиг макета — измеряет визуальную стабильность страницы.
- Хорошо: ≤ 0.1
- Требует улучшения: 0.1 – 0.25
- Плохо: > 0.25
Как измерять Core Web Vitals
Лабораторные инструменты
# Lighthouse в Chrome DevTools
# F12 → Lighthouse → Analyze page load
# PageSpeed Insights API
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Полевые данные (RUM)
Реальные данные пользователей из Chrome UX Report (CrUX):
// Web Vitals JavaScript библиотека
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
reChecker Web Vitals
Используйте инструмент Web Vitals на reChecker для быстрой проверки любого сайта без установки расширений.
Оптимизация LCP
1. Оптимизация изображений
<!-- Используйте современные форматы -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" fetchpriority="high">
</picture>
2. Предзагрузка критических ресурсов
<head>
<!-- Предзагрузка LCP-изображения -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Предзагрузка шрифтов -->
<link rel="preload" as="font" href="/fonts/main.woff2"
type="font/woff2" crossorigin>
</head>
3. Серверная оптимизация
# Nginx: включение сжатия и кэширования
gzip on;
gzip_types text/plain text/css application/json application/javascript;
location ~* \.(jpg|jpeg|png|webp|avif|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Оптимизация INP
INP — самая сложная метрика для оптимизации. Она измеряет отзывчивость на ВСЕ взаимодействия пользователя.
1. Разбивка длинных задач
// Плохо: блокирующая операция
function processLargeArray(items) {
items.forEach(item => heavyComputation(item));
}
// Хорошо: разбивка на чанки с yield
async function processLargeArrayOptimized(items) {
const chunkSize = 100;
for (let i = 0; i < items.length; i += chunkSize) {
const chunk = items.slice(i, i + chunkSize);
chunk.forEach(item => heavyComputation(item));
// Даём браузеру "вздохнуть"
await scheduler.yield();
}
}
2. Использование scheduler.yield()
В 2026 году scheduler.yield() поддерживается всеми современными браузерами:
async function handleClick() {
// Первый этап — немедленный визуальный отклик
showLoadingState();
await scheduler.yield();
// Второй этап — тяжёлые вычисления
const result = await processData();
await scheduler.yield();
// Третий этап — обновление UI
updateUI(result);
}
3. Оптимизация обработчиков событий
// Плохо: тяжёлая логика в обработчике
button.addEventListener('click', () => {
const data = expensiveCalculation();
renderChart(data);
});
// Хорошо: отложенная обработка
button.addEventListener('click', () => {
// Мгновенный визуальный отклик
button.classList.add('loading');
// Отложенная тяжёлая работа
requestIdleCallback(() => {
const data = expensiveCalculation();
renderChart(data);
button.classList.remove('loading');
});
});
Оптимизация CLS
1. Резервирование места для изображений
<!-- Всегда указывайте размеры -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- Или используйте aspect-ratio -->
<style>
.image-container {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
2. Предотвращение FOUT/FOIT
/* Оптимальная загрузка шрифтов */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: optional; /* или swap для важных шрифтов */
}
3. Резервирование места для динамического контента
/* Фиксированная высота для рекламных блоков */
.ad-container {
min-height: 250px;
contain: layout;
}
/* Skeleton loading */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
Мониторинг в продакшене
Настройка отправки метрик
import { onLCP, onINP, onCLS } from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify({
name: metric.name,
value: metric.value,
rating: metric.rating,
delta: metric.delta,
id: metric.id,
page: window.location.pathname,
});
// Используем sendBeacon для надёжной отправки
navigator.sendBeacon('/api/analytics', body);
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
Чек-лист оптимизации Core Web Vitals
LCP
- Изображения в форматах AVIF/WebP
- Предзагрузка LCP-элемента
- CDN для статики
- Серверное кэширование
- Оптимизация TTFB < 800ms
INP
- Нет длинных задач > 50ms
- Используется scheduler.yield()
- Виртуализация длинных списков
- Code splitting для JavaScript
- Web Workers для тяжёлых вычислений
CLS
- Размеры у всех изображений
- Зарезервировано место для рекламы
- font-display: optional/swap
- Нет динамической вставки контента выше viewport
Заключение
Core Web Vitals в 2026 году — это не просто фактор ранжирования, а показатель качества пользовательского опыта. Особое внимание уделите INP — эта метрика часто страдает из-за тяжёлого JavaScript. Используйте reChecker Web Vitals для регулярного мониторинга и не забывайте проверять реальные данные из CrUX.
Помните: оптимизация Core Web Vitals — это инвестиция в конверсию и удержание пользователей, а не только в SEO.