yceffort
◆ SERIES · 4 POSTS

Collecting Core Web Vitals Yourself

A series that splits the CWV measured by web-vitals into OpenTelemetry traces and metrics, and re-measures in a reproduction environment every point where a value disappeared without an error on its way from the browser to a Grafana panel

README

The hard part of collecting CWV yourself was not the measuring but the road from a measured value to a dashboard. The values web-vitals computed vanished inside the browser, at the moment the page was left, in the collector and when the stores were queried, and none of those places raised an error. This series is a record of finding those points one by one and measuring them again in a public reproduction environment.

The same question was worked through in two settings. One sends the values of screens opened in an app webview to an internal observability platform shared by many teams, where the constraints were a webview that gives no signal on leaving and a collector whose settings could not be changed. The other puts the same collection on this blog and runs the collection server as well, where every setting can be changed but visits are rare.

The measurement code and experiments are in blog-experiments/cwv-otel-grafana, and each post and each experiment's README states the versions its numbers were measured against.

04 ITEMS

All posts

in order
01

When Does web-vitals Report Core Web Vitals

#web-performance#debugging#browser
Checked the conditions under which web-vitals 6.2.3 reports each metric, and why INP goes missing when the page is left right after a click.
Updated
33 min · read
02

Sending Core Web Vitals at the Moment of Leaving the Page

#web-performance#debugging#browser
Traced why CLS and INP go missing when the page is left, through the transport of OTel JS and the order in which flush runs.
Updated
22 min · read
03

Sending the Core Web Vitals of an App Webview to a Shared Observability Platform

#web-performance#devops#debugging
Sent the Core Web Vitals measured in an app webview to an observability platform shared by many teams. The webview gave no signal on leaving, and tail sampling, delta-to-cumulative conversion and Tempo queries each dropped values in their own way without raising an error. For every setting that could not be changed, re-measured what was lost in a reproduction environment.
Updated
37 min · read
04

Self-Hosting Core Web Vitals Collection for a Quiet Blog

#web-performance#devops#debugging
Moved a Core Web Vitals collection setup designed for shared observability infrastructure to my personal blog. Fixed a dashboard left empty by sparse traffic and changed when metrics are collected for ordinary browsers. This post records the changes from October 17 to 22, query omissions investigated on October 23, and what five days of data can support.
32 min · read