demo · v139
Multi-Page Comparison
Navigate between pages in the simulated SPA below. Each route change produces a SoftNavigationEntry in the Performance Timeline, separate from the initial hard navigation — so per-route LCP and INP are finally measurable.
Without a soft-navigation entry, this SPA session looks like one hard page load. With the entry, each client-side route gets a separate URL, start time, duration, and navigationId so LCP and interaction timing can be reported per route.
Home
Welcome to the simulated SPA. Click the nav links above to trigger soft navigations and watch them appear in the timeline below.
Docs
Documentation page — navigated via History API pushState. This is a soft navigation; it has its own LCP and INP attribution.
Blog
Blog index — each article would start its own soft navigation entry with a fresh navigationId.
About
About page — navigated client-side. The URL in the address bar changes; the PerformanceObserver fires a SoftNavigationEntry.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'soft-navigation') {
console.log('Soft nav:', entry.name); // URL
console.log('navigationId:', entry.navigationId);
console.log('startTime:', entry.startTime);
console.log('duration:', entry.duration); // until LCP painted
}
}
});
observer.observe({ type: 'soft-navigation', buffered: true });