Моніторинг продуктивності веб-сайту (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 день додатково.