Navigation ID performance attribution

내비게이션 ID별 성능 귀속

An experimental navigation ID groups SPA performance entries with the right view.

···
html
<div class="atlas"><div class="head"><b>NAVIGATION ID · event grouping</b><span class="pulse"></span></div><div class="stage"><div class="nid-stream mono"><span>paint A</span><span>event B</span><span>shift A</span></div><div class="nid-lane" id="nid-a"><b>nav A</b><i>paint</i><i>shift</i></div><div class="nid-lane" id="nid-b"><b>nav B</b><i>event</i></div><div class="nid-caption mono" id="nid-caption">entries carry their navigationId</div></div></div>
css
.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.nid-stream{display:flex;gap:5px;height:28%;align-items:center}.nid-stream span{flex:1;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:4px 0;font-size:12px}.nid-lane{height:27%;border-left:3px solid var(--line);padding-left:8px;display:flex;align-items:center;gap:7px;transition:border-color .3s}.nid-lane b{width:43px;font-size:12px}.nid-lane i{font:12px ui-monospace,monospace;background:var(--bg);border:1px solid var(--line);padding:3px 7px;border-radius:4px}.nid-lane.on{border-color:var(--accent)}.nid-lane.on i{color:var(--accent);border-color:var(--accent)}.nid-caption{color:var(--accent);font-size:12px;text-align:right}
js
let lane=false;function tick(){lane=!lane;document.getElementById('nid-a').classList.toggle('on',!lane);document.getElementById('nid-b').classList.toggle('on',lane);document.getElementById('nid-caption').textContent=lane?'event → nav B':'paint + shift → nav A'}tick();setInterval(tick,1500)

During soft navigations, an entry may be observed after the view that caused it has changed. The proposed navigationId associates paint, event, and layout-shift entries with their navigation.

The demo groups events from one timeline into A and B lanes. This field is part of Chrome’s 2026 Soft Navigations origin trial.

When to use

Use it experimentally when late performance entries are assigned to the wrong SPA route.

Open as page ↗