Vitals in the Field

1. 1
   Loading — Largest Contentful Paint

   Watches the largest image or text block in the viewport and records when it rendered, updating its candidate until the first interaction.

   fails by A long critical path, a render-blocking resource, a late-discovered hero image, or a server that is slow to first byte (The Critical Rendering Path).

2. 2
   Interaction responsiveness — Interaction to Next Paint

   Measures each interaction from the input event through handler execution to the next paint showing the result, and summarises the visit.

   fails by A busy main thread before the handler runs, an expensive handler, or a large render triggered by the state change (What a Component Costs to Render).

3. 3
   Visual stability — Cumulative Layout Shift

   Scores unexpected movement of already-visible content, summing the worst window across the visit; movement shortly after user input is excluded.

   fails by Images and embeds without reserved space, fonts that swap metrics, banners injected above content, content replaced after a fetch resolves.

4. 4
   Finalisation

   Each value is only true when the page goes away, so field collection reports at the transition to hidden.

   fails by Reporting early, or not at all when a tab is discarded — producing a dataset biased toward sessions that ended gracefully.

The vitals in the first three rows are the current expression of each concern. The concern is the durable part; the metric naming it is not.

1// Register early, with buffered:true so entries recorded before this ran
2// are replayed to the callback rather than lost.
3const seen: PerformanceEntry[] = []
4 
5for (const type of ['largest-contentful-paint', 'layout-shift', 'event'] as const) {
6  try {
7    new PerformanceObserver((list) => {
8      // Keep the callback trivial. It runs on the main thread, inside the
9      // very interaction whose latency you are reporting.
10      seen.push(...list.getEntries())
11    }).observe({ type, buffered: true })
12  } catch {
13    // Not every engine implements every entry type. A missing observer is a
14    // gap in coverage to record, not an error to swallow silently.
15    coverage.missing.push(type)
16  }
17}
18 
19// The true value is only known when the page goes away.
20addEventListener('visibilitychange', () => {
21  if (document.visibilityState !== 'hidden') return
22  navigator.sendBeacon('/rum', JSON.stringify({
23    route: currentRoutePattern(),   // pattern, never the filled-in URL
24    release: RELEASE,
25    deviceClass: classifyDevice(),
26    browser: engineClass(),          // so values are never pooled across coverage
27    coverage,                        // which observers this browser gave us
28    summary: summarise(seen),        // computed once, here, not per entry
29  }))
30}, { capture: true })

Three details carry the lesson: buffered: true recovers the past, the try/catch records missing coverage instead of pretending a browser reported nothing because nothing happened, and the beacon fires on the transition to hidden — the only reliable last moment a page gets.