v147 · JavaScript · Performance

Compatibility Lab

Exercises the Soft Navigation performance contract for single-page app route changes: a same-document URL change in an active interaction context, followed by a contentful paint, should produce a soft-navigation entry linked to an interaction-contentful-paint entry.

API probes

Route heuristic lab

Soft navigation candidate checking
navigationType
Route target
Same-document URL pending
Heuristic outcome No run yet.
interactionId none
performance.getEntriesByType() checking

initial render

Dashboard

The page starts on an in-app route. Route candidates update this same document and, when the paint toggle is enabled, replace this content surface.

Paint target
#route-title
Route state
dashboard

Entry readout

SoftNavigationEntry contract simulated 

        

      

      

        

          interaction-contentful-paint contract
          simulated
        

        

          

        

      

    

  


  

    
Fallback and observer log

    

      

        
Runtime events

        

          
No events yet.

        

      

      

        
Fallback pattern

        

          
const supportsSoftNavigation =
  PerformanceObserver.supportedEntryTypes.includes("soft-navigation");

if (supportsSoftNavigation) {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      entry.navigationType;
      entry.interactionId;
      entry.largestInteractionContentfulPaint ??
        entry.getLargestInteractionContentfulPaint?.();
      entry.navigationId;
    }
  }).observe({ type: "soft-navigation", buffered: true });
} else {
  performance.mark("spa-route-start");
  history.pushState({}, "", "?route=checkout");
  performance.mark("spa-route-end");
  performance.measure("spa-route", "spa-route-start", "spa-route-end");
}

        

      

    

  


  

    
References