v147 ยท Core Web Vitals Dashboard

Core Web Vitals Dashboard

Build per-route Core Web Vitals slices from soft-navigation entries, interaction-contentful-paint entries, and the shared interaction/navigation identifiers that Chrome 147 adds to the Performance Timeline.

This dashboard keeps the browser URL inside this concept page while simulating SPA route changes. Use the failure modes to see why a URL update alone is not enough to emit a SoftNavigationEntry.
Checking soft-navigation support...
Route and scenario controls
Route
navigationType
Heuristic mode
Soft-navigation vitals timeline 0 runs

Choose a route to generate the first soft-navigation slice.

Current correlation readout
No soft-navigation entry yet.
No correlated vitals yet.

API code

const softNavsByInteraction = new Map();

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    softNavsByInteraction.set(entry.interactionId, entry);
    const paint = entry.largestInteractionContentfulPaint ??
      entry.getLargestInteractionContentfulPaint?.();
    recordSoftNavigation(entry, paint);
  }
}).observe({ type: "soft-navigation", buffered: true });

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const softNav = softNavsByInteraction.get(entry.interactionId);
    if (!softNav) continue;
    updateRouteLcp(softNav.navigationId, entry.duration);
  }
}).observe({ type: "interaction-contentful-paint", buffered: true });

see also