ソフト ナビゲーションの測定

Barry Pollard

Michal Mocny

公開日: 2023 年 2 月 1 日、最終更新日: 2026 年 9 月 2 日

Core Web Vitals の取り組みは、開始以来、ウェブサイトの作成方法や読み込み方法の技術的な詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目的としてきました。ウェブに関する主な指標の 3 つの指標は、ユーザー中心の指標として作成されました。これは、DOMContentLoaded や load などの既存の技術指標の進化版です。これらの技術指標は、ユーザーがページのパフォーマンスをどのように認識するかとは無関係なタイミングを測定することがよくありました。そのため、サイトのパフォーマンスが良好であれば、サイトの構築に使用されたテクノロジーがスコアに影響することはありません。

実際には理想どおりにはいかないことが多く、一般的なシングルページ アプリケーション アーキテクチャは、Core Web Vitals の指標で完全にサポートされたことはありません。ユーザーがサイト内を移動するたびに個別のウェブページを読み込むのではなく、これらのウェブ アプリケーションでは「ソフト ナビゲーション」と呼ばれる手法が使用されます。この手法では、JavaScript によってページ コンテンツが変更されます。このようなアプリケーションでは、URL を変更し、ブラウザの履歴に前の URL をプッシュすることで、従来のウェブページのアーキテクチャの錯覚を維持し、ユーザーが期待する動作を [戻る] ボタンと [進む] ボタンで実現しています。

多くの JavaScript フレームワークがこのモデルを使用していますが、それぞれ異なる方法で使用しています。これはブラウザが従来「ページ」として認識していたものとは異なるため、測定は常に困難でした。現在のページでのインタラクションと、新しいページでのインタラクションの境界線はどこにあるのでしょうか？

Chrome チームは、この課題をしばらく検討しており、従来のマルチページ アーキテクチャ（MPA）で実装されたウェブサイトが測定されるのと同様の方法で、「ソフト ナビゲーション」の定義と、この定義に沿って Core Web Vitals を測定する方法を標準化しようとしています。

デベロッパーからのフィードバックに基づいて提案にいくつかの改善を加え、Chrome 151 からこの問題の解決に役立つ 2 つの新しいパフォーマンス API をリリースしました。

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

ソフト ナビゲーションの定義は次のとおりです。

• ナビゲーションはユーザー アクションによって開始されます。
• ナビゲーションの結果、ユーザーに表示される URL が変更されます。
• インタラクションの結果としてペイントが可視化される。

一部のサイトでは、この定義により、誤検出（ユーザーが「ナビゲーション」が発生したとは考えない場合）や誤検出（ユーザーが「ナビゲーション」が発生したと考える場合でも、この条件を満たしていない場合）が発生する可能性があります。フィードバックは、ソフト ナビゲーションの仕様リポジトリでお待ちしています。

DevTools でのソフト ナビゲーションのサポート

DevTools のパフォーマンス パネルの [ライブ指標] ビューと、分析情報とマーカーのサポートを含むトレースビューに、ソフト ナビゲーションのサポートを追加しました。

Chrome はウェブ デベロッパー向けにソフト ナビゲーションをどのように実装していますか？

ソフト ナビゲーション機能が有効になると（詳しくは次のセクションをご覧ください）、Chrome は一部のパフォーマンス指標のレポート方法を変更します。

• ソフト ナビゲーションが検出されるたびに、soft-navigation PerformanceTiming イベントが発行されます。
• この soft-navigation エントリには、navigationId、name 属性の新しい URL、開始インタラクションの interactionId が含まれます。
• コンテンツフル ペイントを引き起こすインタラクションの後、1 つ以上の interaction-contentful-paint エントリが発行されます。これには、ソフト ナビゲーションの Largest Contentful Paint（LCP）を測定するために使用できる largestContentfulPaint エントリが含まれます。
• navigationId 属性は、各パフォーマンス タイミング（first-paint、first-contentful-paint、largest-contentful-paint、interaction-contentful-paint、first-input-delay、event、layout-shift）に追加されます。これは、イベントが発行されたナビゲーション エントリに対応します。これらのエントリがソフト ナビゲーションにまたがる場合、エントリが発行されたタイミングに応じて、前の navigationId または次の が含まれることがあります。詳しくは、適切な URL に対して指標をレポートするをご覧ください。
• soft-navigation には、そのナビゲーションの最大の interaction-contentful-paint エントリを取得する getLargestInteractionContentfulPaint() 関数が含まれます。これはそのナビゲーションの最初の LCP として使用され、そのインタラクションの interaction-contentful-paint エントリがさらに観測されると、その LCP が更新されます。これは、以前のオリジン トライアルで利用可能だった largestInteractionContentfulPaint 属性を置き換えるものです。
• URL の更新がペイント後まで行われない場合、ソフト ナビゲーションの前に interaction-contentful-paint エントリが発生する可能性があります。このような場合、getLargestInteractionContentfulPaint() 関数を使用すると、ソフト ナビゲーションの完了後に古いエントリをバッファリングして振り返る必要がなくなります。getLargestInteractionContentfulPaint() によって返されるエントリは、出力された時点での最大の interaction-contentful-paint エントリの正確なコピーであることに注意してください。そのため、そのエントリはペイントが発生した時点の以前の navigationId を使用している可能性がありますが、これらのペイントは新しい navigationId に対して測定する必要があります。
• soft-navigation エントリには、そのナビゲーションの FCP として paintTime と presentationTime も含まれます。
• interaction-contentful-paint エントリは、その後の操作でも出力されますが、URL の LCP は、ソフト ナビゲーション interactionId に一致する interaction-contentful-paint エントリに限定し、それらを除外して、その中の largestContentfulPaint プロパティのみに限定する必要があります。

これらの変更により、Core Web Vitals と関連する診断指標の一部をページ ナビゲーションごとに測定できるようになりますが、考慮すべきニュアンスがいくつかあります。

Chrome でソフト ナビゲーションを有効にするとどうなりますか？

この機能を有効にした後、サイト所有者が考慮する必要がある変更は次のとおりです。

• soft-navigation エントリをモニタリングすることで、パフォーマンス エントリを各「ナビゲーション」に「スライス」できます。
• CLS 指標と INP 指標は、ページ ライフサイクル全体にわたって測定されるのではなく、すでに任意でスライスできますが、ソフト ナビゲーション機能を使用すると、使用されている基盤となるテクノロジーに関係なく、このタイミングの標準化された測定値が得られます。
• largest-contentful-paint エントリはインタラクションで確定されるため（ソフト ナビゲーションを開始するために必要）、最初の「ハード」ナビゲーションの LCP を測定するためにのみ使用できます。つまり、ソフト ナビゲーションが測定されてもこの値は変更されないため、初期のハード ナビゲーションのページ読み込みの LCP をこれまでどおり測定できます。
• インタラクションから出力される新しい interaction-contentful-paint エントリを使用すると、その中の largestContentfulPaint プロパティを確認することで、ソフト ナビゲーションの LCP を測定できます。ただし、このエントリの使用方法については考慮すべき点があります。この記事では、それについて説明します。
• このソフト ナビゲーション機能は、すべてのユーザーがサポートしているわけではありません。特に、他のブラウザや Chrome のバージョン 151 より前のバージョンを使用しているユーザーはサポートしていません。一部のユーザーは、Core Web Vitals 指標を報告していても、ソフト ナビゲーション ベースの指標を報告しない場合があります。

RUM プロバイダに、ソフト ナビゲーションによる Core Web Vitals の測定をサポートしているかどうかを確認してください。多くの企業がこの新しい基準のテストを計画しており、以前の考慮事項を考慮する予定です。それまでの間、一部のプロバイダは独自のヒューリスティックに基づいて、パフォーマンス指標の測定を限定的に許可しています。

ソフト ナビゲーションの指標を測定する方法については、ソフト ナビゲーションごとの Core Web Vitals の測定セクションをご覧ください。

Chrome でソフト ナビゲーションを有効にするにはどうすればよいですか？

ソフト ナビゲーション機能は、Chrome 151 以降でデフォルトで有効になっています。

ソフト ナビゲーション API のサポートを検出する機能

次のコードを使用して、API がサポートされているかどうかをテストできます。

if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
  // Monitor Soft Navigations
}

または:

if ('SoftNavigationEntry' in window) {
  // Monitor Soft Navigations
}

ソフト ナビゲーションを測定するにはどうすればよいですか？

サポートされている場合、他の指標と同様に PerformanceObserver API を使用して指標をレポートできます。ただし、これらの指標については、考慮すべき点がいくつかあります。

ソフト ナビゲーションをレポートする

PerformanceObserver を使用して、ソフト ナビゲーションを観察できます。次のコード スニペットは、buffered オプションを使用して、このページの以前のソフト ナビゲーションを含むソフト ナビゲーション エントリをコンソールに記録する例です。

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

これは、前のナビゲーションのフルライフ ページ指標を確定するために使用できます。

適切な URL に対して指標をレポートする

ソフト ナビゲーションが検出されたら、前のページの Core Web Vitals を確定し、前の URL についてレポートし、新しい URL について新しいモニタリングを開始する必要があります。

適切な soft-navigation エントリの name 属性には、指標をレポートする新しい URL が含まれます。navigationId は、このナビゲーションの一意の参照になります（同じ URL がシングルページ アプリケーションのライフサイクル中に複数回アクセスされる可能性があるため）。

これは各 soft-navigation エントリとして設定され、次の soft-navigation エントリが受信されるまで指標のレポートに使用されます。