Мониторинг производительности сайта (Core Web Vitals Tracking)
Core Web Vitals — три метрики Google, влияющие на ранжирование: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, заменил FID с марта 2024), CLS (Cumulative Layout Shift). Отслеживание этих метрик в реальном времени с реальных пользователей (RUM — Real User Monitoring) принципиально отличается от синтетических замеров Lighthouse.
Сбор метрик через web-vitals.js
<script type="module">
import { onLCP, onINP, onCLS, onFCP, onTTFB } from
'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js';
function sendToAnalytics({ name, value, rating, navigationType }) {
navigator.sendBeacon('/api/vitals', JSON.stringify({
metric: name,
value: Math.round(name === 'CLS' ? value * 1000 : value),
rating, // 'good' | 'needs-improvement' | 'poor'
url: location.pathname,
connection: navigator.connection?.effectiveType ?? 'unknown',
deviceMemory: navigator.deviceMemory ?? 0,
ts: Date.now(),
}));
}
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);
</script>
Пороговые значения
| Метрика | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2500ms | 2500–4000ms | > 4000ms |
| INP | ≤ 200ms | 200–500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1–0.25 | > 0.25 |
| FCP | ≤ 1800ms | 1800–3000ms | > 3000ms |
| TTFB | ≤ 800ms | 800–1800ms | > 1800ms |
Google Search Console vs RUM
Search Console показывает агрегированные данные за 28 дней с реальных устройств Chrome. Это ценно, но не позволяет дрилл-даун по страницам или сегментам. Собственный RUM даёт:
- метрики по конкретным страницам (
/catalog/,/product/) - сегментацию по типу соединения (4G vs WiFi)
- тренды по времени суток
- корреляцию с деплоями
Готовые решения
Grafana + ClickHouse — для команд с собственной инфраструктурой. Метрики пишутся в ClickHouse (аналитическая БД), Grafana визуализирует p75/p95 перцентили.
Sentry Performance — если Sentry уже используется, Web Vitals подключаются через @sentry/browser:
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'YOUR_DSN',
integrations: [new Sentry.BrowserTracing()],
tracesSampleRate: 0.1,
});
Cloudflare Browser Insights — доступен в Pro-плане, без кода на сайте, автоматически собирает Web Vitals с трафика через Cloudflare.
Алерты при деградации
Настройка оповещений при ухудшении метрик — критично после каждого деплоя. В Grafana:
# alert rule (Grafana Alerting YAML)
- name: LCP degradation
condition: avg(lcp_p75) > 2500
for: 10m
labels:
severity: warning
annotations:
summary: "LCP p75 превысил 2500ms на {{ $labels.path }}"
Сроки
Установка web-vitals.js, эндпоинт для сбора, базовый дашборд: 1 день. Настройка алертов, сегментация по страницам и устройствам: 0.5–1 день дополнительно.