Загрузка...
Загрузка...
Актуальное руководство по Core Web Vitals в 2026 году. LCP, INP, CLS — как измерять, анализировать и улучшать показатели для SEO и пользовательского опыта.
Поделитесь с коллегами или изучите другие материалы блога
Core Web Vitals остаются ключевым фактором ранжирования Google в 2026 году. С обновлением метрики INP (Interaction to Next Paint), которая полностью заменила FID, требования к интерактивности сайтов стали ещё строже. В этом руководстве разберём актуальные метрики, методы измерения и практические способы оптимизации.
Core Web Vitals — это набор метрик Google, оценивающих реальный пользовательский опыт на сайте. В 2026 году актуальны три основные метрики:
Время отрисовки самого крупного видимого элемента на странице.
Заменил FID в марте 2024. Измеряет задержку между действием пользователя и визуальным откликом интерфейса.
Накопительный сдвиг макета — измеряет визуальную стабильность страницы.
# Lighthouse в Chrome DevTools
# F12 → Lighthouse → Analyze page load
# PageSpeed Insights API
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Реальные данные пользователей из Chrome UX Report (CrUX):
// Web Vitals JavaScript библиотека
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Используйте инструмент Web Vitals на reChecker для быстрой проверки любого сайта без установки расширений.
<!-- Используйте современные форматы -->
<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>
<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>
# 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 — самая сложная метрика для оптимизации. Она измеряет отзывчивость на ВСЕ взаимодействия пользователя.
// Плохо: блокирующая операция
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();
}
}
В 2026 году scheduler.yield() поддерживается всеми современными браузерами:
async function handleClick() {
// Первый этап — немедленный визуальный отклик
showLoadingState();
await scheduler.yield();
// Второй этап — тяжёлые вычисления
const result = await processData();
await scheduler.yield();
// Третий этап — обновление UI
updateUI(result);
}
// Плохо: тяжёлая логика в обработчике
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');
});
});
<!-- Всегда указывайте размеры -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- Или используйте aspect-ratio -->
<style>
.image-container {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
/* Оптимальная загрузка шрифтов */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: optional; /* или swap для важных шрифтов */
}
/* Фиксированная высота для рекламных блоков */
.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 в 2026 году — это не просто фактор ранжирования, а показатель качества пользовательского опыта. Особое внимание уделите INP — эта метрика часто страдает из-за тяжёлого JavaScript. Используйте reChecker Web Vitals для регулярного мониторинга и не забывайте проверять реальные данные из CrUX.
Помните: оптимизация Core Web Vitals — это инвестиция в конверсию и удержание пользователей, а не только в SEO.