demo · v136

Cold-vs-warm histogram

A real RUM pattern: reload the page many times, classify each navigation as cold or warm using the new criticalCHRestart / notRestoredReasons signals, and accumulate two separate histograms. Without the split, the combined LCP looks like a single fat tail; with it you can see the actual bimodal distribution.

Records every reload in localStorage, classifies it, plots a histogram per mode.
this navigation mode—
this navigation DCL—
samples recorded0

cold (n=0)

p50: — ms   p95: — ms

warm (n=0)

p50: — ms   p95: — ms

the code

const [nav] = performance.getEntriesByType("navigation");
const cold = (nav.criticalCHRestart ?? 0) > 0
          || (nav.notRestoredReasons && nav.notRestoredReasons.reasons?.length);
const bucket = cold ? "cold" : "warm";
recordSample(bucket, nav.domContentLoadedEventEnd);

// Now your p50 / p95 / fast-path budgets are no longer averaged over both modes.

why this angle

The sibling concept reads the new fields and prints them. This concept is what RUM teams actually want to do with them: classify, bucket, accumulate, and compare the two distributions over many reloads. Hit reload a few dozen times and you'll start to see the warm bucket cluster low while the cold bucket trails into the seconds. The whole reason these fields shipped was so dashboards could stop reporting one fat-tailed number that's neither.

see also