はじめに

React や Vue などのシングルページアプリケーション（SPA）では、ページ遷移のたびにブラウザが実際のナビゲーションを行いません。
JavaScript が URL と表示内容を書き換えるだけなので、ブラウザからすると「ページが切り替わった」と認識されない問題があります。

その結果、Core Web Vitals（LCP・CLS・INP）は最初のページロード時しか正しく計測されず、SPA のパフォーマンス実態が見えにくくなっていました。

この問題を解決するために Chrome チームが取り組んでいるのが ソフトナビゲーション（Soft Navigation） です。

ソフトナビゲーションとは

ソフトナビゲーションは、以下の 3 つの条件をすべて満たす ユーザー操作のことです。

条件	説明
ユーザーアクション起動	クリックなど、ユーザーの操作で始まる
URL 変更	ブラウザのアドレスバーに表示される URL が変わる
可視ペイント発生	インタラクション結果として画面に描画が生じる

SPA では history.pushState() や location.href の書き換えによって URL が変わりますが、これは従来ブラウザが「ページ遷移」として扱わないものです。
ソフトナビゲーションはこの SPA 的な遷移を、ブラウザが正式に認識・計測できるようにする仕組みです。

なぜ必要なのか

LCP（最大コンテンツ描画）・CLS（累積レイアウトシフト）・INP（次の描画までのインタラクション）などの Core Web Vitals は、ページが切り替わるたびにリセット・再計測されるべきものです。

しかしハードナビゲーション（フルページロード）を前提とした現在の計測では、SPA において次の問題があります。

2 ページ目以降の LCP が計測されない
URL が変わっても CLS・INP がリセットされない

ソフトナビゲーションを検出することで、SPA の各ページ遷移ごとに Core Web Vitals を正確に計測できるようになります。

新しいパフォーマンス API

Chrome はソフトナビゲーションを計測するための新しいエントリタイプを追加しています。

`soft-navigation` エントリ

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name);          // 遷移後の URL
    console.log(entry.startTime);     // ユーザー操作の開始時刻
    console.log(entry.navigationId);  // ナビゲーションの一意識別子
    console.log(entry.interactionId); // 起点となったインタラクションの識別子
  }
});

observer.observe({ type: 'soft-navigation', buffered: true });

`interaction-contentful-paint` エントリ

ソフトナビゲーション後の LCP を取得するエントリタイプです。

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.interactionId);          // 対応するインタラクション ID
    console.log(entry.largestContentfulPaint); // LCP 値
  }
});

observer.observe({ type: 'interaction-contentful-paint', buffered: true });

タイミングの値は、元の「ハード」ナビゲーション開始からの相対値として返されます。
ソフトナビゲーションを基準にした相対時間を求めるには、LCP の時刻からソフトナビゲーションの startTime を差し引く必要があります。

サポートの検出方法

現状は実験的な API のため、利用前にサポートを確認するコードを書くことが推奨されています。

// 推奨: SoftNavigationEntry の存在を確認
if ('SoftNavigationEntry' in window) {
  // ソフトナビゲーション対応
}

// 代替: supportedEntryTypes で確認
if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
  // 対応確認
}

Core Web Vitals ごとの計測方法

ソフトナビゲーション時の各指標は、ハードナビゲーションとは少し異なる扱いになります。

指標	ソフトナビゲーション時の扱い
TTFB	0 として報告される
FCP	`soft-navigation` エントリの `presentationTime` を基準に計測
LCP	`interaction-contentful-paint` エントリから取得
CLS	各ナビゲーション区間でリセット（0 から再計測）
INP	各ナビゲーション区間でリセット（0 から再計測）

有効化方法

Chrome フラグで試す

現在は実験的機能のため、フラグで有効化する必要があります。

Chrome で chrome://flags/#soft-navigation-heuristics を開く
Enabled に変更
Chrome を再起動

コマンドラインで起動する場合

google-chrome --enable-features=SoftNavigationHeuristics

Chrome 151 以降

Chrome 151 からデフォルトで有効化される予定です。

web-vitals ライブラリを使った計測

web-vitals ライブラリの試験運用版ブランチ soft-navs でソフトナビゲーション対応の計測がサポートされています。

import { onLCP, onCLS, onINP } from 'web-vitals/soft-navs';

// ソフトナビゲーション対応の LCP を計測
onLCP(console.log, { reportSoftNavs: true });

// CLS・INP も同様
onCLS(console.log, { reportSoftNavs: true });
onINP(console.log, { reportSoftNavs: true });

このアプローチを使うと、コールバックに navigationId と navigationURL が自動付与されるため、どのページ遷移に対応する計測値かを特定できます。

DevTools でのサポート

Chrome DevTools のパフォーマンスパネルでは、ソフトナビゲーションが * マーク付きで表示されます。
LCP マーカーも各ソフトナビゲーションごとに表示されるため、視覚的に確認しやすくなっています。

詳細指標のライブビューなど、一部の機能は後日追加予定です。現時点では計測結果の完全なサポートではありません。

実装上の注意点

`interactionId` で LCP をマッピングする

interaction-contentful-paint エントリを対応するナビゲーションに結びつける際は、navigationId ではなく interactionId を使う必要があります。

理由は次の 2 点です。

URL 更新前にペイントが発生した場合、古い navigationId が含まれる可能性がある
後続インタラクションによって LCP 対象外のペイントも発生する

アニメーション背景に注意

アニメーション背景はソフトナビゲーション時の LCP 対象外ですが、ハードナビゲーション時は対象となりえます。
同じコンテンツでも読み込み方法によって LCP の対象要素が変わるため注意してください。

ブラウザサポート

ブラウザ	サポート
Chrome（Chromium 系）	対応中（フラグ必要、Chrome 151 でデフォルト有効化予定）
Firefox	未対応
Safari	未対応

現時点では Chromium 系のみの対応です。
RUM（リアルユーザーモニタリング）ツールを利用している場合は、プロバイダのサポート状況も合わせて確認してください。

まとめ

ソフトナビゲーションは、SPA が普及した現在の Web においてページ遷移ごとのパフォーマンスを正確に計測するための重要な仕組みです。

SPA のルーティングを「ナビゲーション」として認識させる
LCP・CLS・INP を遷移ごとにリセット・再計測できる
soft-navigation / interaction-contentful-paint エントリで計測可能
web-vitals ライブラリの soft-navs ブランチで手軽に試せる
Chrome 151 からデフォルト有効化予定

SPA を扱うフロントエンドエンジニアにとって、ユーザー体験の実態をより正確に把握するための強力なツールになりそうです。まずは Chrome フラグを有効化してデベロッパーツールで確認してみてください。

参考

ソフトナビゲーション - Chrome for Developers

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。