推測ルールのデバッグ

Barry Pollard

前回の投稿で詳しく説明したように、推測ルールは、次のページのナビゲーションのプリフェッチと事前レンダリングに使用できます。これにより、ページの読み込みが大幅に速くなり、さらにはページ ナビゲーションの Core Web Vitals が大幅に改善されます。

投機ルールのデバッグは難しい場合があります。事前レンダリングされたページは、別のレンダラでレンダリングされるため、特にその傾向が強くなります。つまり、アクティブになると現在のタブが置き換わる、非表示の背景タブのようなものです。そのため、通常の DevTools オプションでは問題をデバッグできないことがあります。

Chrome チームはこれまで、投機ルールのデバッグに対する DevTools のサポートの強化に取り組んできました。この投稿では、これらのツールを使用してページの投機ルールを理解し、ルールが機能しない理由、デベロッパーがよりなじみのある DevTools オプションを使用できるケース、使用できないケースをすべて紹介します。

「事前」の用語の説明

混同されやすい「前」の用語が多数あるため、まずはそれらの説明から始めましょう。

• プリフェッチ: 将来のパフォーマンスを向上させるために、リソースまたはドキュメントを事前に取得します。この投稿では、Speculation Rules API を使用してドキュメントをプリフェッチする方法について説明しますが、サブリソースのプリフェッチによく使用される古い <link rel="prefetch"> オプションとは異なります。
• 事前レンダリング: プリフェッチにとどまらず、ユーザーが実際に移動したかのようにページ全体をレンダリングしますが、非表示のバックグラウンド レンダラ プロセスに留まり、ユーザーが実際に移動した場合に使用できるようにします。繰り返しになりますが、このドキュメントは、（完全な事前レンダリングを行わない）古い <link rel="prerender"> オプションではなく、このバージョンの Speculation Rules API 版に関するものです。
• ナビゲーション投機的機能: 投機ルールによってトリガーされる新しいプリフェッチ オプションと事前レンダリング オプションの総称です。
• プリロード: <link rel="preload">、プリロード スキャナ、Service Worker のナビゲーション プリロードなど、さまざまなテクノロジーやプロセスを指すオーバーロードされた用語。これらの項目についてはここでは説明しませんが、「ナビゲーション投機的」という用語と明確に区別するために用語を使用しています。

prefetch の推測ルール

投機ルールを使用すると、次のナビゲーションのドキュメントをプリフェッチできます。たとえば、次の JSON をページに挿入すると、next.html と next2.html がプリフェッチされます。

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

ナビゲーションのプリフェッチに投機ルールを使用することには、より表現力の高い API や、HTTP ディスク キャッシュではなくメモリ キャッシュに保存された結果など、以前の <link rel="prefetch"> 構文よりもいくつかの利点があります。

prefetch 投機ルールのデバッグ

投機ルールによってトリガーされたプリフェッチは、他のフェッチと同様に [ネットワーク] パネルに表示されます。

赤色でハイライト表示された 2 つのリクエストは、[タイプ] 列に示されているように、プリフェッチされたリソースです。これらは今後のナビゲーションで使用するため、Lowest の優先度で取得され、Chrome では現在のページのリソースが優先されます。

いずれかの行をクリックすると、Sec-Purpose: prefetch HTTP ヘッダーも表示されます。これは、サーバー側でこれらのリクエストを識別する方法を示しています。

[投機的読み込み] タブを使用した prefetch のデバッグ

Chrome DevTools の [Application] パネルの [バックグラウンド サービス] セクションに、[投機的読み込み] セクションが新たに追加され、投機ルールのデバッグに役立ちます。

このセクションには 3 つのタブがあります。

• 投機的読み込み: 現在のページの事前レンダリング ステータスを一覧表示します。
• ルール: 現在のページで見つかったすべてのルールセットをリストします。
• 推測: ルールセットからプリフェッチされた URL と事前レンダリングされた URL をすべて一覧表示します。

前のスクリーンショットは [Speculations] タブを示しています。この例のページには、3 つのページをプリフェッチする 1 つの投機ルールセットがあります。このプリフェッチのうち 2 件は成功し、1 件は失敗しました。[ルールセット] の横にあるアイコンをクリックすると、[要素] パネルにルールセットのソースが表示されます。または、[Status] をクリックすると、そのルールセットでフィルタされた [Speculations] タブが表示されます。

[投機的] タブには、すべてのターゲット URL、アクション（プリフェッチまたは事前レンダリング）、ルールセット（ページ上に複数ある可能性があるため）、各投機のステータスが表示されます。

URL の上にあるプルダウンを使用して、すべてのルールセットの URL または特定のルールセットの URL のみを表示できます。その下にすべての URL が一覧表示されます。URL をクリックすると、さらに詳しい情報が表示されます。

このスクリーンショットでは、next3.html ページの失敗の理由を確認できます（このページは存在しないため、2xx 以外の HTTP ステータス コードである 404 が返されます）。

概要タブの [投機的読み込み] には、[このページの投機的読み込みステータス] レポートが表示され、このページでプリフェッチまたは事前レンダリングが使用されたかどうかを確認できます。

プリフェッチされたページの場合、そのページに移動すると、成功を示すメッセージが表示されます。

比類のない推測

プリフェッチや事前レンダリングが使用されない投機ルールが設定されたページからナビゲーションが行われた場合、タブの追加セクションには、URL が投機用 URL のいずれとも一致しなかった理由の詳細が表示されます。これは、投機ルール内の入力ミスを見つけるのに役立ちます。

たとえば、ここでは next4.html に移動しましたが、プリフェッチは next.html、next2.html、next3.html のみであるため、これら 3 つのルールのどれにも完全には一致していません。

[投機的読み込み] タブは、投機ルール自体をデバッグする場合や、JSON 内の構文エラーを見つける場合に非常に便利です。

プリフェッチ自体に関しては、[Network] パネルのほうがわかりやすいでしょう。プリフェッチの失敗の例では、プリフェッチの 404 をこちらで確認できます。

ただし、次に説明する投機的読み込みルールの事前レンダリングには、[投機的読み込み] タブが便利です。

prerender の推測ルール

事前レンダリングの投機ルールは、プリフェッチの投機ルールと同じ構文に従います。次に例を示します。

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

このルールセットは、指定されたページの完全な読み込みとレンダリングをトリガーします（特定の制限があります）。これにより、リソースには費用がかかりますが、すぐに読み込むことができます。

ただし、プリフェッチとは異なり、Chrome の別のレンダリング プロセスで取得、レンダリングされるため、[ネットワーク] パネルには表示されません。これにより、事前レンダリングの投機的ルールをデバッグするうえで、[投機的読み込み] タブの重要性が増します。

[投機的読み込み] タブで prerender をデバッグする

事前レンダリングの投機的ルールには、同じ [投機的読み込み] 画面を使用できます。これは、3 つのページをプリフェッチするのではなく、事前レンダリングを試みる同様のデモページで示されています。

ここでも、3 つの URL のうち 1 つが事前レンダリングに失敗しています。デベロッパーは [Speculations] タブで [2 Ready, 1 Failure] リンクをクリックして、URL ごとの詳細を確認できます。

Chrome 121 でドキュメント ルールのサポートがリリースされました。これにより、ブラウザは特定の URL のセットをリストするのではなく、ページ上の同一オリジンのリンクからこれらのリンクを取得できるようになります。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

この例では、/not-safe-to-prerender で始まるものを除くすべての同じオリジンのリンクが事前レンダリングの候補として選択されます。

また、事前レンダリングの eagerness を moderate に設定します。これは、リンクにカーソルを合わせるかクリックしたときにナビゲーションが事前レンダリングされることを意味します。

こちらのデモサイトにも同様のルールがあります。このサイトの新しい投機的読み込みセクションを使用すると、ブラウザでページ上で検出された有効な URL がすべて一覧表示されるため、この新しいタブの有用性がわかります。

これらの事前レンダリング プロセスがまだ開始されていないため、[ステータス] は [トリガーされていません] です。ただし、リンクにカーソルを合わせると、各 URL が事前レンダリングされるため、ステータスが変わることがわかります。

Chrome では、moderate の事前レンダリングを最大 2 回行うなど、事前レンダリングに上限を設けています。3 番目のリンクにカーソルを合わせると、その URL の失敗の理由が表示されます。

他の DevTools パネルを使用して prerender をデバッグする

プリフェッチとは異なり、事前レンダリングされたページは、独自のバックグラウンド レンダラでレンダリングされるため、[ネットワーク] パネルなどの DevTools パネルの現在のレンダリング プロセスには表示されません。

ただし、DevTools パネルで使用されるレンダラは、右上のプルダウン メニューを使用するか、パネルの上部で URL を選択して [検証] を選択することで切り替えられるようになりました。

このプルダウン（および選択した値）は、他のすべてのパネル（たとえば [Network] パネルなど）で共有されます。ここで、リクエストされたページが事前レンダリングされたパネルであることを確認できます。

これらのリソースの HTTP ヘッダーを見ると、すべて Sec-Purpose: prefetch;prerender ヘッダーで設定されていることがわかります。

または、[要素] パネルでは、ページ コンテンツを確認できます。次のスクリーンショットでは、事前レンダリングされたページの <h1> 要素が表示されています。

または、コンソールパネルでは、事前レンダリングされたページで出力されたコンソールログを確認できます。

事前レンダリングされたページで投機ルールをデバッグする

前のセクションでは、事前レンダリングを開始するページで事前レンダリングされたページをデバッグする方法を説明しました。ただし、事前レンダリングされたページ自体がデバッグ情報を提供することもできます。その場合は、アナリティクス呼び出しを行うか、コンソールにロギングします（前のセクションで説明したとおりに確認できます）。

また、事前レンダリングされたページをユーザーが移動して有効にすると、[投機的読み込み] タブにこのステータスと、事前レンダリングに成功したかどうかが表示されます。事前レンダリングできない場合は、その理由の説明が提供されます。

また、プリフェッチの場合と同様に、現在のページと一致しない投機ルールを含むページから移動すると、[投機的読み込み] タブで前のページの投機ルールでカバーされていた URL と URL が一致しない理由の確認が試行されます。

おわりに

この投稿では、デベロッパーがプリフェッチ ルールと事前レンダリング投機ルールをデバッグするためのさまざまな方法を紹介しました。チームは、推測ルールのためのツールの開発に引き続き取り組んでいます。この画期的な新しい API のデバッグに役立つその他の方法について、開発者の皆様からのご提案をお待ちしています。機能のリクエストや発見したバグについては、Chrome Issue Tracker で問題を報告することをおすすめします。

謝辞

サムベイルの画像（作成者: Nubelson Fernandes、Unsplash）