新しいソフトナビゲーションのオリジントライアル

Barry Pollard

Michal Mocny

公開日: 2025 年 7 月 31 日

Chrome は、以前から試験運用を行っていた Soft Navigations API の新しいオリジントライアルを Chrome 139 から開始します。このオリジントライアルでは、サイトが実際のユーザーで API を試して、API のフィールドテストを行い、Chrome チームにフィードバックを提供できます。

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

ソフトナビゲーションとは、JavaScript がナビゲーション（リンクのクリックなど）をインターセプトし、新しいページを読み込むのではなく、既存のページのコンテンツを更新するものです。その後、アドレスバーの URL が更新されます（履歴状態により、ソフトナビゲーションの戻る / 進むが可能になります）。ユーザーから見ると、従来のナビゲーションと同じように見えますが、ブラウザから見ると、ページは元のページのままです。

Soft Navigation API が必要な理由

Soft Navigations API は、シングルページアプリケーション（SPA）サイトで使用される、いわゆる「ソフトナビゲーション」のヒューリスティックベースの検出を可能にする API です。ソフトナビゲーションでは実際のページナビゲーションは発生しないため、通常ナビゲーションで発生する特定のアクションは JavaScript で手動で管理する必要があります。ナビゲーション履歴の管理などの一部のアクションは、現在の API で可能です。ただし、Core Web Vitals の測定などのアクションは、これらのナビゲーションではできません。

Soft Navigation API を使用すると、ソフトナビゲーションを観察できます。ソフトナビゲーションを開始する JavaScript（通常は JavaScript フレームワーク）はナビゲーションが発生したことを認識しますが、他の JavaScript とブラウザ自体は認識しません。

Core Web Vitals と SPA

Soft Navigation API の主な推進要因の 1 つは、SPA の Core Web Vitals を測定できるようにすることです。Core Web Vitals は、ブラウザ（Chrome ユーザーエクスペリエンスレポートなどのツールに表示するため）と、実際のユーザーモニタリング（RUM）JavaScript ライブラリの両方で測定されます。

JavaScript フレームワークは、Core Web Vitals の一部を測定できます。特に、Interaction to Next Paint（INP）とCumulative Layout Shift（CLS）は、プリミティブ（それぞれEvent Timing APIとLayout Instability API）に基づいており、任意の期間で測定して INP 指標と CLS 指標を計算できます。ただし、ブラウザはページナビゲーションとインタラクションに基づいて Largest Contentful Paint（LCP）を報告して確定するため、JavaScript フレームワークは SPA の初期読み込みパフォーマンス以外の情報を把握できません。

Soft Navigation API を使用して SPA の Core Web Vitals を測定する方法

Soft Navigation API の最初のイテレーションでは、ソフトナビゲーションのヒューリスティックと LCP のリセットが組み合わされていました。リセット後、新しいコンテンツフルペイントのソフトナビゲーションに対して LCP を再送信できるため、ソフトナビゲーションのこの指標を測定できます。

最新のイテレーションでは、異なるアプローチを採用し、これらのコンセプトを Soft Navigation API と新しい Interaction to Contentful Paint パフォーマンスエントリに分離しています。interaction-contentful-paint エントリは、インタラクション後の「コンテンツフルペイント」を測定します。現時点では、これはソフトナビゲーションでのみ送信されますが、すべてのインタラクションで有効にすると、LCP 以外のユースケースも考えられます。

また、API は、largest-contentful-paint、interaction-contentful-paint、event-timing、layout-shift の各パフォーマンスエントリを拡張して、エントリのナビゲーションの識別子を含めるようにしました。パフォーマンスエントリは、測定対象のイベントの後に送信されます（通常はアイドル時）。つまり、パフォーマンスエントリが送信されるまでに URL が変更されていることがよくあります。エントリにナビゲーションを含めることで、パフォーマンスエントリの時刻をソフトナビゲーションエントリの時刻と照合しなくても、特定の URL の Core Web Vitals を簡単に測定できます。

ヒューリスティックを使用する理由

Soft Navigation API は、次の条件が満たされた場合にソフトナビゲーションと見なします。

ユーザーインタラクションが発生する（ユーザー操作なしで URL が更新された場合はカウントされません）
…DOM の変更とペイントが発生する
…URL の更新が発生する
履歴の変更を含む URL の更新。

この API は、JavaScript フレームワークがソフトナビゲーションを「送信」したり、Navigation API を基に構築したりするのではなく、ヒューリスティックベースのアプローチを採用しています。これにより、フレームワークやデベロッパーの使用方法に関係なく、ソフトナビゲーションを構成する要素を一貫して把握できます。

フレームワークやデベロッパーは、ユーザーインタラクションや、ユーザーがナビゲーションと見なす DOM の更新がなくても、ソフトナビゲーションの URL を更新する場合があります。また、インタラクションの開始時、完了時、またはその間の任意の状態で URL を更新することもあります。

フレームワークの選択に依存するのではなく、ブラウザにソフトナビゲーション検出機能を組み込むことで、正規の「ヒューリスティック」（このオリジントライアルからのフィードバック）を確立し、ソフトナビゲーションの Core Web Vitals を大規模に測定し、そのような測定を大規模に比較できるようにします。

フレームワークとデベロッパーは、Soft Navigations API のヒューリスティックを無視し、基盤となる Event Timing、Layout Instability、Interaction to Contentful Paint API を使用して、必要に応じて追加のパフォーマンス指標を測定することもできますが、ヒューリスティックを使用して Core Web Vitals を測定し、サイト間で測定できるようにすることをおすすめします。

Soft Navigation API のテストにご協力ください

Soft Navigations API をテストして、ソフトナビゲーションが発生したときにヒューリスティックが期待どおりに一致するかどうかを確認する必要があります。API が、ソフトナビゲーションが発生したと見なされる場合に、ソフトナビゲーションを報告しないインスタンスはありますか？逆に、ソフトナビゲーションと見なされないナビゲーションを API が過剰に繰り返すことはありますか？

問題を引き起こす可能性がある例としては、履歴を追加する代わりに replaceState で URL が更新される場合や、ユーザーが開始したナビゲーションが発生しない場合（タイムアウト時のログアウトなど）があります。どちらの場合も、ヒューリスティックと一致しないことが原因です。Chrome チームはこれらを含めないことに同意していますが、ウェブデベロッパーの皆様のご意見をお聞かせください。特に、ヒューリスティックが満たされているように見えるのに、API がソフトナビゲーションを認識しない場合についてお聞かせください。

また、この API と新しい Interaction to Contentful Paint プリミティブが、SPA の Core Web Vitals の測定を可能にするという主なユースケースに対応しているかどうかについても把握したいと考えています。

API ができるだけ有用になるようにしたいと考えています。これは、リリースされてサイトが実装に依存し始める前に行う方がはるかに簡単です。そのため、SPA デベロッパーと、これらのサイトのウェブパフォーマンスの測定に関心のある方は、この API を試して、その動作についてお知らせください。

テスト方法

API は、Chrome フラグまたはコマンドラインオプションを使用してローカルでテストできます。また、オリジントライアルを使用してフィールドでテストすることもできます。

API の技術的な詳細、特にCore Web Vitals の測定方法については、ドキュメントまたはGitHub リポジトリをご覧ください。また、web-vitals ライブラリのソフトナビゲーションの試験運用版もご利用いただけます。

フィードバック

このテストに関するフィードバックを以下の場所で募集しています。

API に関するフィードバックは、GitHub で問題として報告してください。
Chromium 実装のバグは、まだ既知の問題でない場合は、Chrome の Issue Tracker で報告してください。
ウェブに関する主な指標に関する一般的なフィードバックは、web-vitals-feedback@googlegroups.com までお送りください。

ご不明な点がございましたら、どちらの場所でもフィードバックをお寄せください。両方の場所で問題をトリアージし、適切な場所にリダイレクトいたします。