Website Performance Monitoring (Core Web Vitals Tracking)
Core Web Vitals are three Google metrics affecting ranking: LCP (Largest Contentful Paint), INP (Interaction to Next Paint, replaced FID since March 2024), CLS (Cumulative Layout Shift). Tracking these metrics in real time from real users (RUM — Real User Monitoring) is fundamentally different from synthetic Lighthouse measurements.
Collecting Metrics with 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>
Threshold Values
| Metric | 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 shows aggregated data from 28 days on real Chrome devices. Valuable, but doesn't allow drill-down by pages or segments. Own RUM provides:
- metrics by specific pages (
/catalog/,/product/) - segmentation by connection type (4G vs WiFi)
- trends by time of day
- correlation with deploys
Ready-made Solutions
Grafana + ClickHouse — for teams with own infrastructure. Metrics written to ClickHouse (analytics DB), Grafana visualizes p75/p95 percentiles.
Sentry Performance — if Sentry already used, Web Vitals connected via @sentry/browser:
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'YOUR_DSN',
integrations: [new Sentry.BrowserTracing()],
tracesSampleRate: 0.1,
});
Cloudflare Browser Insights — available in Pro plan, no code on site, automatically collects Web Vitals from traffic via Cloudflare.
Alerts on Degradation
Setting up notifications on metric degradation is critical after each deploy. In Grafana:
# alert rule (Grafana Alerting YAML)
- name: LCP degradation
condition: avg(lcp_p75) > 2500
for: 10m
labels:
severity: warning
annotations:
summary: "LCP p75 exceeded 2500ms on {{ $labels.path }}"
Timeline
Installation of web-vitals.js, endpoint for collection, basic dashboard: 1 day. Alert setup, segmentation by pages and devices: 0.5–1 day additional.