Как измерять Web Vitals
Core Web Vitals 2026: LCP (Largest Contentful Paint) < 2.5s, INP (Interaction to Next Paint, replaced FID March 2024) < 200ms, CLS (Cumulative Layout Shift) < 0.1. Field data (real users) — критично для SEO. Lab data (Lighthouse) для testing. Tools: web-vitals.js, Google CrUX, Search Console, Vercel Speed Insights, Enterno RUM.
Ниже: пошаговая инструкция, рабочие примеры, типичные ошибки, FAQ.
Пошаговая настройка
- Install
npm install web-vitals - Report на все 4 metrics в JS
- POST beacon к вашему analytics endpoint
- Aggregate p75 (75-percentile — Google threshold)
- Dashboard: filter by page, device, country
- Alert: p75 LCP > 2.5s на critical pages
- Cross-reference с Google Search Console CrUX данными
Рабочие примеры
| Сценарий | Конфиг |
|---|---|
| Basic web-vitals reporting | import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
fetch('/api/vitals', { method: 'POST', body, keepalive: true });
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics); |
| Enterno RUM beacon | <!-- Add to <head> -->
<script src="https://enterno.io/rum/beacon.js"
data-site="my-site"
defer></script>
<!-- Automatically collects CWV, sends к Enterno RUM dashboard --> |
| Vercel Speed Insights | # Next.js
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<SpeedInsights />
</body>
</html>
);
} |
| Fix slow LCP | <!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Lazy-load below-fold -->
<img src="/hero.webp" fetchpriority="high"> <!-- LCP candidate -->
<img src="/below.webp" loading="lazy"> |
| Fix CLS | /* Reserve space для images */
.hero-img {
aspect-ratio: 16 / 9;
width: 100%;
}
<!-- Or explicit size -->
<img src="hero.webp" width="1600" height="900" alt="..."> |
Типичные ошибки
- Only lab data (Lighthouse) — misses real-world slow devices. Field data от RUM essential
- INP replaces FID — старые implementations still track FID. Обновите к web-vitals v3+
- p75 aggregate — не p50 (median hides slow tail). Google использует p75
- RUM overhead: beacon.js ~2 KB + send overhead. Use keepalive + sendBeacon API
- Privacy: не send user_id в vitals. Aggregate без PII
Почему нам доверяют
Как это работает
Введите URL страницы
Lighthouse анализирует
Получите CWV и советы
Почему скорость сайта важна?
Скорость загрузки напрямую влияет на конверсию, SEO-позиции и удовлетворённость пользователей. Google использует Core Web Vitals как фактор ранжирования. Каждая лишняясекунда загрузки может стоить до 7% конверсии.
Lighthouse-анализ
Анализ на основе Google Lighthouse: Performance, Accessibility, Best Practices, SEO.
Core Web Vitals
LCP (скорость отрисовки), FID (интерактивность), CLS (визуальная стабильность) — ключевые метрики Google.
Анализ ресурсов
Разбивка по типам: HTML, CSS, JavaScript, изображения, шрифты. Размер, количество запросов, блокирующие ресурсы.
Действенные советы
Конкретные рекомендации с оценкой экономии: сжатие изображений, кеширование, минификация и т.д.
Mobile vs Desktop
- Тестирование на эмуляции Moto G Power (медленный CPU)
- Сеть: 4G (1.6 Mbps, 150ms RTT)
- Строже оценивает скорость
- Google индексирует mobile-first
- Приоритет для SEO-оптимизации
- Высокая производительность CPU
- Быстрое соединение без ограничений
- Результаты обычно выше на 20-40 баллов
- Важен для B2B и корпоративных сайтов
- Используйте для baseline-сравнений
Кому это нужно
SEO-специалисты
Core Web Vitals для ранжирования
Разработчики
оптимизация производительности
Маркетологи
скорость = конверсия
DevOps
регрессия производительности
Частые ошибки
async/defer блокируют отрисовку. Переместите в конец или добавьте атрибут.Cache-Control браузер перезагружает CSS/JS при каждом визите.Лучшие практики
loading="lazy" для изображений ниже first fold.brotli on;Cache-Control: max-age=31536000, immutable. HTML: max-age=0, s-maxage=60.<link rel="preload"> для шрифтов и CSS. Уменьшает LCP на 200-500ms.Получите больше с бесплатным аккаунтом
История проверок скорости, сравнение с конкурентами и мониторинг PageSpeed.
Зарегистрироваться (FREE)Больше по теме
Часто задаваемые вопросы
Field vs Lab data?
Field (CrUX, RUM): real users, slow devices, varied networks. Lab (Lighthouse): synthetic ideal conditions. Google SEO = field data.
Почему INP заменил FID?
FID = first interaction (обычно fast). INP = worst interaction per session → better UX signal. March 2024 migration.
RUM provider?
<a href="/rum">Enterno RUM</a> (free tier + pro), Vercel Speed Insights ($10/мес), Google CrUX (free но aggregated), SpeedCurve ($20+).
Как проверить без install?
<a href="/speed">Enterno PageSpeed</a> для lab scores. Google PageSpeed Insights — показывает CrUX field data.