v150 · Performance

Core Web Vitals per Route

Navigate between routes. The browser resets LCP and CLS after each soft navigation — this demo observes and displays the per-route metrics in real time, just like a RUM library would.

Feature detection: checking…

LCP (this route)

—ms

Good: <2500ms

Soft nav duration

Time for DOM to settle

Route navigations

Total soft navigations

Route history

Route LCP Nav duration Timestamp
Navigate to populate route history
 
// Observe LCP after each soft navigation
const lcpObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // entry.startTime is relative to the LAST soft navigation
    // (browser resets the clock on each soft-navigation entry)
    recordLCP(currentRoute, entry.startTime);
  }
});
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

// Observe the soft navigations themselves
const navObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    startNewRouteMeasurement(entry.name);
  }
});
navObserver.observe({ type: "soft-navigation", buffered: true });

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗