demo · v139
Observer Playground
A tiny SPA navigates between routes; PerformanceObserver watches soft-navigation entries and the per-navigation LCP / interaction events that follow. Click a route, see the navigationId update everywhere downstream.
Probing SoftNavigation support…
Click a route to start a soft navigation.
// Observe SoftNavigation entries and the per-navigation Web Vitals
new PerformanceObserver((list) => {
for (const entry of list.getEntriesByType('soft-navigation')) {
console.log('soft-nav', entry.navigationId, entry.name, entry.startTime);
}
}).observe({ type: 'soft-navigation', buffered: true });
new PerformanceObserver((list) => {
for (const e of list.getEntries()) {
// Each entry now carries .navigationId — group your CWV by it.
console.log(e.entryType, e.navigationId, e.startTime);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });