Chrome DevTools、SPAのソフトナビゲーション分析が完成、CPU性能ティアの上書きも追加
SPAの「画面遷移」の速さをDevToolsでそのまま分析でき、デバイス性能別のパフォーマンステストをコードで同じように再現できるようになった。
Chrome DevToolsは、SPA（ページを再読み込みせずに画面を切り替えるWebアプリ）の開発者向けに、パフォーマンス機能を2つ追加した。ひとつはPerformanceパネルのInsightsでソフトナビゲーションを分析する機能、もうひとつはChrome DevTools Protocol（CDP、DevToolsをコードから操作するための規格）でCPUの性能ティアを指定するコマンドだ。Chrome for DevelopersのDevToolsアップデート記事（Chrome 153・154対象、9月22日公開）に載っている。
ソフトナビゲーションとは
通常、リンクをクリックするとブラウザーはサーバーから新しいページを取得する。SPAは違う。JavaScriptがアドレスバーのURLだけを変え、画面の一部を差し替える。ユーザーにはページ移動に見えるが、ブラウザーは「新しいページを開いた」とは認識していない。
そのため、読み込みの指標（LCP）は最初の1回しか測定されず、その後の画面遷移は測定から抜け落ちていた。Soft Navigations APIは、こうした遷移をひとつの移動として認識し、性能を別に測れるようにするものだ。
- Chrome 152で、DevToolsのLive Metricsとトレース画面にソフトナビゲーションのサポートが入った。
- 今回、PerformanceパネルのInsightsに分析が追加され、Chromeはこれを「測定から分析までのエンドツーエンドのサポートの完成」と説明している。
CPU性能ティアをコードで指定
- 新しいCDPコマンドは
Emulation.setCPUPerformanceOverrideだ。較正済みのCPU性能ティアを設定し、「ハードウェア階層をまたいだ再現可能な性能テスト」を可能にするとChromeは説明している。 - 従来の方式（
Emulation.setCPUThrottlingRate）は、CPUを「4倍遅く」のように固定倍率で遅くしていた。新しい方式は、まず自分のPCの実際の性能を測り、「低性能モバイル」「中性能モバイル」といった基準を作って、そのティアに合わせる仕組みだと伝えられている。
この部分の詳細（ティアの種類、較正の方法）はChromeの記事では詳しく説明されていない。較正プリセットの説明は、DevToolsのスロットリングに関するドキュメントに基づく。
確認できなかった点
- 「Soft Navigation Timing APIによる統合モニタリングを提供」: DevToolsの分析サポートとAPIの正式提供は別の話だ。Chromeは4月20日の記事で、Chrome 147〜149にわたる最後のオリジントライアル（一部のサイトが機能を先行して試せる試験期間）を開始し、正式提供は今年中を計画しているとだけ述べた。その後に正式提供されたかは確認できなかった。一部の外部記事は提供済みと書いているが、Chrome公式の資料では確認できなかった。
- 「ReactやNext.jsなどのフレームワークが対象」: Chromeの記事でフレームワークに触れた箇所は見つからなかった。特定のフレームワークではなく、SPA方式の画面遷移全般が対象と見られる。
- 「コマンド群」: Chromeの記事で確認できた新しいCDPコマンドは
Emulation.setCPUPerformanceOverrideの1つだけだ。 - 日付: Chromeの記事の公開日は9月22日だ（ページタイトルは「October 2026」）。
開発者に起こりうる変化
以下は公式記事をもとにした筆者の推測と助言だ。
- すぐ試せること: Chrome 153以降のPerformanceパネルのInsightsで、SPAの画面遷移ごとのボトルネックを確認できる。最初の読み込みだけを見る測定から離れ、「ルートを移動するときに何が遅いか」を探すのに向いている。
- 実ユーザーのデータ収集はまだ早い: Soft Navigations APIは正式提供前の段階なので、実際の訪問者の遷移性能の収集に使うには、ブラウザーの対応範囲を別途確認する必要がある。
- 自動テストで同じ条件を作る: CI（コードを上げるたびに自動で走る検査）やE2Eテスト（ブラウザーを自動で操作して確認するPuppeteerやPlaywrightなど）でCPUティアを固定すれば、「この変更で遅くなったか」を同じ基準で比較しやすくなる。
- 同じマシンで比べよう: ティアは各PCの性能を較正して作られる。チームメンバーやCIマシンごとに基準が異なる場合があるので、比較は同じ環境で行うほうが安全だ。
今後の注目点
Soft Navigations APIの正式提供時期と他のブラウザーの対応、Emulation.setCPUPerformanceOverride の公式ドキュメントとパラメーター、そしてNext.jsなどのフレームワークがソフトナビゲーションをどう扱うか。