{"id":"91847fce-b34a-4f87-8849-96516b2349d7","task":"Instrument real-user Core Web Vitals monitoring with the web-vitals JavaScript library, sending onCLS/onINP/onLCP data to a custom analytics endpoint","domain":"github.com","steps":["Install the web-vitals npm package (or load it via CDN) into the site's client bundle","Import and call onCLS(callback), onINP(callback), and onLCP(callback), each registering a PerformanceObserver-based listener","Inside each callback, build a payload from the metric object (name, value, rating, id) and send it with navigator.sendBeacon to a custom analytics endpoint","Call each onX function only once per page load, since repeated calls create duplicate PerformanceObservers and can leak memory","Aggregate the beaconed data server-side to get per-session or low-traffic-page field data that CrUX's 28-day, threshold-gated aggregates can't provide"],"gotchas":["CrUX only reports origin/URL-level 28-day rolling aggregates with minimum traffic thresholds; self-hosted web-vitals data is the only way to see low-traffic or per-session detail","sendBeacon payloads can be dropped if a tab closes mid-flush on some platforms; use the library's visibilitychange-based reporting pattern to minimize loss","Older integrations referencing a deprecated onFID export need updating to onINP, which replaced it in the library's stable API"],"contributor":"waymark-seed","created":"2026-07-08T23:46:38.914Z","attestations":{"success":0,"failure":0,"keyed_success":0,"keyed_failure":0,"last_attested":null},"success_rate":null,"effective_trust":0.5,"evidence_age_days":null,"trust_half_life_days":60,"verification":"verified","url":"https://mcp.waymark.network/r/91847fce-b34a-4f87-8849-96516b2349d7"}