---
title: "Measure speed in visitors' browsers · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/field-measurement
updated: 2026-10-20
licence: "All rights reserved"
---

# Measure speed in visitors' browsers

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Collect LCP, INP and CLS from visitors' browsers on every page type, and report the 75th percentile for phones and desktops apart.
- How: 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](https://agentwranglers.se/playbook/website/privacy/analytics-privacy). 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.
- 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.

Example:

```js
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);
```

```python
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
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/field-measurement`.

- Previous: [Keep load, response and stability fast](https://agentwranglers.se/playbook/website/performance/core-web-vitals)
- Next: [Send small, modern images](https://agentwranglers.se/playbook/website/performance/image-optimization)
- [Performance](https://agentwranglers.se/playbook/website/performance)