公開日: 2026 年 4 月 20 日
Chrome は、これまで試験運用を行ってきた Soft Navigations API を今年後半にリリースする予定です。その準備として、Chrome 147 から Chrome 149 まで、もう 1 つのオリジン トライアルを実施します。このトライアルでは、以前のトライアルからのフィードバックが API の最終的な形状に反映されています。この機能に関心をお持ちのウェブサイト オーナーは、リリース前に API の最終的な形状の最終テストを実施することをおすすめします。
ソフト ナビゲーションとは
「ソフト ナビゲーション」とは、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 ユーザー エクスペリエンス レポートなどのツールに表示される）と、サイト所有者が Real User Monitoring（RUM）ソリューションを使用して測定します。
JavaScript フレームワークは、SPA の Core Web Vitals の一部を測定できます。特に、Interaction to Next Paint（INP）とCumulative Layout Shift（CLS）は、プリミティブ（それぞれEvent Timing APIとLayout Instability API）に基づいており、任意の期間で測定してこれらの指標を計算できます。ただし、Largest Contentful Paint（LCP）などの他の指標は、ブラウザによってのみ出力されます。これは、ページ ナビゲーションに基づいており、インタラクション時に確定されます。
API が SPA の Core Web Vitals の測定を可能にする仕組み
Soft Navigation API には、次の 2 つの新しいパフォーマンス エントリが導入されています。
SoftNavigationEntryエントリ。すべてのソフト ナビゲーション要件が満たされたときに出力されます。これには、ソフト ナビゲーションを引き起こしたインタラクションのinteractionId、一意のnavigationId、新しい URL に設定されたname、ソフト ナビゲーションのコンテンツの初回ペイントを測定するために使用できるさまざまなペイント タイミングが含まれます。InteractionContentfulPaintエントリ。インタラクション後のコンテンツの初回ペイントを複数回測定して、ソフト ナビゲーションの LCP を測定できます。
これらの新しいエントリは、PerformanceObserver を使用して、それぞれ soft-navigation タイプと interaction-contentful-paint タイプで観察できます。
また、API は、largest-contentful-paint、interaction-contentful-paint、event-timing、layout-shift の各パフォーマンス エントリ（およびその他）を拡張して、エントリの対象となるナビゲーションを表す識別子 navigationId を含めます。PerformanceObserver は、ページがアイドル状態になるまでパフォーマンス エントリを観察しないため、パフォーマンス エントリを作成したイベントから観察するまでに時間がかかることがあります。これは、ページが非常にビジー状態の場合（ソフト ナビゲーション中など）に特に当てはまります。この navigationId 値は、エントリを正しいナビゲーションに関連付けるのに役立ちます。
一部の interaction-contentful-paint エントリはナビゲーションの前に発生し、一部はナビゲーションの後に発生します。ソフト ナビゲーションが発生する可能性のあるすべてのペイントをトラッキングするのではなく、soft-navigation エントリには、この時点までに確認された最大のペイントである largestInteractionContentfulPaint エントリが含まれています。
これらを組み合わせることで、次の Core Web Vitals を測定できます。
- LCP: 最初のページ読み込みには
largest-contentful-paintを使用し、ソフト ナビゲーションには新しいinteraction-contentful-paintエントリとsoft-navigationエントリを使用します。 - CLS:
layout-shiftエントリを使用し、ソフト ナビゲーションのsoft-navigationエントリに基づいてスライスします。 - INP:
eventエントリを使用し、ソフト ナビゲーションのsoft-navigationエントリに基づいてスライスします。 - FCP: 最初のページ読み込みには
first-contentful-paintを使用し、ソフト ナビゲーションには新しいsoft-navigationエントリのペイント タイミングの詳細を使用します。
詳細については、ソフト ナビゲーションのドキュメントをご覧ください。
ソフト ナビゲーションはどのようにトリガーされますか？
Soft Navigation API は、次の条件が満たされるとソフト ナビゲーションをトリガーします。
- ユーザー インタラクションが発生する
- … ユーザーにコンテンツの表示ペイントが表示される
- … URL が更新される。
この API は、JavaScript フレームワークがソフト ナビゲーションを「出力」したり、Navigation API を基盤にしたりするのではなく、次の 2 つの理由からこのアプローチを採用しています。
- まず、サイトを変更することなく、既存のすべての SPA サイトを含めることができます。
- 2 つ目は、フレームワークやデベロッパーがナビゲーションを処理する方法に関係なく、ソフト ナビゲーションを構成する要素を一貫して把握できることです。
フレームワークやデベロッパーは、ユーザー インタラクションや、ユーザーがナビゲーションと見なす DOM の更新がなくても、ソフト ナビゲーションの URL を更新できます。また、インタラクションの開始時、完了時の終了時、またはその間の任意の状態で URL を更新することもできます。
フレームワークとデベロッパーの選択に依存するのではなく、ブラウザにソフト ナビゲーション検出機能を組み込むことで、標準的な定義が確立され、ソフト ナビゲーションの Core Web Vitals を大規模に測定し、これらの測定値を大規模に比較できるようになります。
フレームワークとデベロッパーは、Soft Navigations API を無視し、基盤となる Event Timing、Layout Instability API、新しい InteractionContentfulPaint パフォーマンス エントリを使用して、必要に応じて追加のパフォーマンス指標を測定することもできます。ただし、Core Web Vitals を測定するには、API を使用して、サイト間やツール間で一貫した測定を可能にすることをおすすめします。
Soft Navigation API のテストにご協力ください
Soft Navigations API をテストし、ソフト ナビゲーションが発生するタイミングに関する期待どおりに動作するかどうかを判断するために、皆様のご協力が必要です。API は、ソフト ナビゲーションが発生したと見なされる場合に、ソフト ナビゲーションを報告しないことがありますか？逆に、ナビゲーションと見なされないナビゲーションを API が過剰に報告することがありますか？
前回のオリジン トライアルからの変更点
今回のイテレーションの主な変更点は、InteractionContentfulPaint をソフト ナビゲーションから切り離して、そのパフォーマンス エントリの他のユースケースを有効にしたことと、SoftNavigationEntry に largestInteractionContentfulPaint 属性を追加したことです。
ウェブサイトの観点から見ると、API に replaceState もソフト ナビゲーションとして含まれるようになりました。これは、多くの場合、ナビゲーションとして考慮することが重要であるというフィードバックをいただいたためです。API がソフト ナビゲーションを認識しないその他のケースがありましたら、ぜひお知らせください。
また、実装に数多くの改善を加えています。最新のイテレーションでの変更点について詳しくは、ソフト ナビゲーションの変更履歴をご覧ください。
API ができるだけ有用になるように、さらなる変更も検討しています。API がリリースされ、サイトが実装に依存し始める前に、API に変更を加える方がはるかに簡単です。そのため、SPA デベロッパーと、これらのサイトのウェブ パフォーマンスの測定に関心をお持ちの方は、この API をテストしてフィードバックをお寄せください。
テスト方法
API は、Chrome フラグまたはコマンドライン オプションを使用してローカルでテストできます。また、オリジン トライアルでフィールドでテストすることもできます（オリジン トライアルの詳細）。
API の技術的な詳細（特にCore Web Vitals の測定方法）については、ドキュメントまたはGitHub リポジトリをご覧ください。
また、web-vitals ライブラリの試験運用版であるソフト ナビゲーション バージョンが GitHub と npm で入手できます。
簡単なテストとして、Chrome DevTools の [パフォーマンス] パネルには、Chrome 145 以降、機能を有効にしなくても、パフォーマンス トレースにソフト ナビゲーションが表示されます。
フィードバック
API に関するフィードバックは GitHub で問題として提起し、Chromium 実装のバグはChrome の Issue Trackerで報告してください。フィードバックがどのカテゴリに該当するかわからない場合は、あまり気にしないでください。どちらの場所でもフィードバックを受け付けており、両方の場所で問題をトリアージして適切な場所にリダイレクトします。