Chrome 151 終於認得 SPA 轉頁：React、Next.js 效能數據唔再塞落首頁

Chrome 151 穩定版已經喺 7 月 28 日推出，今次有項改動唔算搶眼，但做 React、Next.js、Vue 或其他 SPA 嘅團隊幾實用：瀏覽器開始正式提供 soft navigation 效能紀錄。同一份網頁入面切換 route，LCP、CLS 同 INP 終於有標準方法分返畀相應網址，唔使再靠每套 framework 或分析工具各自估。

SPA 一直有個量度盲點

假設客人由電商首頁撳入商品頁，JavaScript 更新網址同畫面，但冇重新下載成份 HTML document。對用家嚟講已經轉咗頁，瀏覽器過往卻仍然當成同一次 page load。結果可能係商品頁圖片出得慢、按鈕有窒頓，RUM 報表仍然將數據塞落首頁；差嘅 route 冇現形，首頁反而孭咗成個 session 嘅帳。iThome 報道亦以呢個監測缺口做重點，至於 API 點用同有咩限制，就要睇 Chrome 官方文件先講得準。

圖片：Chrome for Developers

Chrome 點判斷一次轉頁

Chrome 151 會睇三個條件：轉頁由用家操作觸發、網址有明顯改動，畫面亦有內容更新。三樣齊先記成 soft navigation，所以 React Router 或 Next.js client-side navigation 有機會直接受惠，網站本身毋須叫 framework 額外發出一個「轉頁完成」訊號。好處係量度準則跨 framework 較一致，不過 browser 靠 heuristic 判斷始終會有誤報同漏報；自動 redirect、背景狀態更新或者冇明顯 repaint 嘅 route transition，都要逐個流程驗證。

LCP 最易分錯網址

新 soft-navigation entry 會帶住新網址、navigationId 同觸發轉頁嘅 interactionId，而 interaction-contentful-paint 就記低互動之後出現嘅內容。CLS 同 INP 可以喺每次轉頁重新起計，但 soft navigation 嘅 LCP 唔可以見到 navigationId 就直接歸檔。部分 paint 可能早過網址正式更新，entry 當刻仍然帶住上一個 ID；官方建議先用 getLargestInteractionContentfulPaint() 取得起始值，再只追蹤 interactionId 相同嘅內容繪製。時間亦要減返該次 soft navigation 嘅 startTime，先係由撳掣到主要內容出現嘅實際所需時間。

現有 RUM 未必即刻識用

網站團隊可以先用 PerformanceObserver.supportedEntryTypes 檢查有冇 soft-navigation，再用 buffered: true 收返較早發生嘅 entry。報告網址應該取自 soft-navigation entry 嘅 name，唔好臨上報先讀 location.href，因為效能資料可能遲咗先送到 observer，嗰陣用家已經去咗下一個 route。Google 嘅 web-vitals 文件已有 reportSoftNavs: true 示範，但現階段例子仍然指向 web-vitals@soft-navs 測試渠道；用緊第三方 RUM、GA tag 或自家 SDK，都要先確認版本同欄位支援，唔好假設升咗 Chrome 就會自動拆好報表。

報表要分開 browser 睇

呢套 API 由 Chrome 151 起提供，舊 Chrome、Safari 同 Firefox未必會交出同一組 soft-navigation 數據。直接將新舊樣本撈埋計平均數，好容易得出假改善或者假退步。較穩陣嘅做法係按 browser、API support 同 navigation type 拆開數據，初期亦保留原有 page-lifecycle 指標方便比較，再另開 soft navigation dashboard。長時間唔 reload 嘅後台、電郵介面同網上服務尤其值得壓測，因為呢類 app 一個 session 可以切好多次 route，最容易撞到 observer、上報次序同數據去重問題。

DevTools 見到，SEO 報表未必同步

Chrome DevTools Performance trace 已經會用星號標出 soft navigation 同相關 LCP，開發者可以先走一次主要流程，睇吓 browser 有冇認錯 route；官方同時表明 Live Metrics 等介面嘅支援仍未齊。Chrome 147 至 149 早前做過最後一輪 origin trial，期間 API 名稱同取值方式都有改，沿用舊試驗程式碼前要對返最新 changelog。iThome 報道亦提到，Chrome UX Report 會點呈現呢批數據仍未定案，所以 Chrome 151 上線唔代表 Search Console 即刻會逐個 SPA route 重算成績。現階段最實際係先校準 RUM 同 DevTools，等數據穩定後再決定效能預算點分。

參考來源

• iThome — Chrome 151補上單頁網站效能監測缺口，可分開量測各網址核心網頁指標 — original report
• Chrome 151 release notes — 確認穩定版推出日期、新 performance entry 同正式支援範圍
• Measuring soft navigations — Chrome 官方量度指南，涵蓋偵測條件、LCP 歸檔、時間計算同 browser 限制
• Final Soft Navigations origin trial starting in Chrome 147 — 交代 origin trial 範圍、API 演變同 CrUX 尚未定案嘅背景
• GoogleChrome web-vitals — 確認 reportSoftNavs 選項、navigationURL 用法同現階段套件示範

本文根據原文及公開資料整理；資料有出入時，以原文及官方資料為準。