demo · v140

Router Optimization Guide

Chrome 140 adds workerRouterEvaluationStart and workerCacheLookupStart to PerformanceResourceTiming. Run a timing audit, inspect the waterfall, and follow the optimization suggestions to tighten your static router rules.

New timing fields

workerRouterEvaluationStart
When the browser began evaluating static router rules for this navigation. Relative to the navigation start.
workerCacheLookupStart
When a cache lookup began after a router rule matched source: "cache". Only present if a cache rule fired.
workerStart
When the service worker fetch handler started. Present when the request fell through to source: "fetch-event".
fetchStart
When the actual network fetch began. Set when a source: "network" rule or fallback fired.
router evaluation
cache lookup
network fetch
slow (>5ms eval)

Click “Run timing audit” to populate the waterfall.

// Read timing fields in your RUM pipeline
const obs = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    const routerEval = entry.workerRouterEvaluationStart ?? null;
    const cacheLookup = entry.workerCacheLookupStart ?? null;
    const swStart = entry.workerStart;
    const fetchStart = entry.fetchStart;

    // Router evaluation time
    const evalMs = cacheLookup
      ? cacheLookup - routerEval
      : swStart
        ? swStart - routerEval
        : fetchStart - routerEval;

    analytics.record("sw-router-eval-ms", evalMs);
  }
});
obs.observe({ type: "navigation", buffered: true });
obs.observe({ type: "resource", buffered: true });

see also