Measure speed in visitors' browsers

How to do it

Load a small library such as web-vitals in your bundle. Send each final value with navigator.sendBeacon to your own endpoint, with the page path and device type. Store no IP address, cookie or user id, as in count visits without tracking people. Reject unknown metric names and values that are not numbers. Use the Chrome UX Report as a second source when the site has enough traffic.

Example

import { onCLS, onINP, onLCP } from 'web-vitals';
const send = ({ name, value }) => navigator.sendBeacon('/vitals', JSON.stringify({
  name, value, path: location.pathname, device: matchMedia('(pointer: coarse)').matches ? 'phone' : 'desktop',
}));
onLCP(send);
onINP(send);
onCLS(send);

import json
from flask import Flask, request
app = Flask(__name__)
METRICS = {"LCP", "INP", "CLS"}

@app.post("/vitals")
def vitals():
    data = json.loads(request.get_data() or b"{}")
    if data.get("name") not in METRICS or not isinstance(data.get("value"), (int, float)):
        return "", 400
    store_metric(data["name"], data["value"], data.get("path", "/")[:200], data.get("device"))
    return "", 204

How to check

A dashboard shows the 75th percentile of each metric per page type for the last 28 days. A test posts a fake metric and the endpoint answers 400.