Core Web Vitals Exporter (and SLOs?) for Client-Side Applications

[brettimus]

Web Vitals refers to an initiative by Google to provide metrics/data that can quantify a user's experience of a website.

A subset of Web Vitals, called Core Web Vitals, consists of three metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. (All are explained in more depth on the Web Vitals website, linked above.)

These measurements are in use across several mainstream projects, including Next.JS, and in Create React App.

Someone even created a Web Vitals Prometheus exporter for Next.js apps, though it doesn't seem to be actively maintained.

This begs the question of what kind of "core" metrics we could pull from a client-side application, and what use frontend developers could garner from having these metrics.

This also makes me wonder, based off of a thought by @actualwitch, what kind of SLOs would be relevant for browser-based applications.

[IvanMerrill]

I've previously used 5XX errors for client-side SLOs which worked very nicely.
Latency ones are obviously much harder given the lack of control over the network. I would always suggest collecting this data, and it can definitely help capture things like mistakenly adding a 10MB picture on a page (which has happened!), caching misconfiguration etc... It's just harder to alert on reliably. The LCP metric looks pretty good though :)