Chrome DevTools で投機ルールをデバッグする

Barry Pollard

前の投稿で詳しく説明したように、投機ルールを使用して、次のページ ナビゲーションのプリフェッチと事前レンダリングを行うことができます。これにより、ページの読み込みが大幅に速くなり、さらには一瞬で済むようになり、ページ移動の増加に関する Core Web Vitals が大幅に改善されます。

投機ルールのデバッグは簡単ではありません。事前レンダリングされたページは別のレンダラでレンダリングされるため、特にこの点が重要です。これは、アクティブになると現在のタブを置き換える、非表示の背景タブのようなものです。そのため、通常の DevTools オプションを問題のデバッグに使用できないことがあります。

Chrome チームは、投機ルールのデバッグに対する DevTools のサポートの強化に取り組んできました。この投稿では、これらのツールを使用してページの投機ルールを理解するためのさまざまな方法、投機ルールが機能しない理由、デベロッパーがより使い慣れた DevTools オプションを使用できる場合と使用できない場合について説明します。

「pre-」の説明利用規約

このコースではそのため、まずはこれらの用語について説明します。

• プリフェッチ: 将来のパフォーマンスを向上させるためにリソースまたはドキュメントを事前に取得します。この投稿では、Speculation Rules API を使用してドキュメントをプリフェッチする方法について説明します。これは、サブリソースのプリフェッチによく使用されている同様のオプションではありませんが、古い <link rel="prefetch"> オプションです。
• Prerender: これはプリフェッチのさらに一歩先に進み、ユーザーが実際にそのページに移動したかのようにページ全体をレンダリングしますが、非表示の背景レンダラ プロセスに保持され、ユーザーが実際にその場所に移動したときに使用できる状態になります。ここでも、このドキュメントは、（完全な事前レンダリングが行われなくなった）古い <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>

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

prefetch の投機ルールをデバッグする

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

</ph>

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

いずれかの行をクリックすると、Sec-Purpose: prefetch HTTP ヘッダーも表示されます。これにより、サーバーサイドでこれらのリクエストを識別できます。

</ph>

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

投機的ルールのデバッグに役立つ、Chrome DevTools の [Application] パネルの [Background services] セクションに、新しい [投機的読み込み] セクションが追加されました。

</ph>

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

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

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

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

</ph>

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

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

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

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

</ph>

比類のない憶測

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

</ph>

たとえば、ここでは next4.html に移動しましたが、プリフェッチの対象となっているのは next.html、next2.html、next3.html のみであるため、この 3 つのルールのどれにも一致しないことがわかります。

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

プリフェッチ自体については、[Network] パネルの方が見慣れた場所です。プリフェッチの失敗例では、プリフェッチの 404 がここに表示されます。

</ph>

ただし、[投機的読み込み] タブは、投機ルールの事前レンダリングには非常に便利です。これについては、後で説明します。

prerender の投機ルール

事前レンダリング予測ルールは、プリフェッチ投機ルールと同じ構文に従います。例:

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

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

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

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

事前レンダリングを試みるデモページで、3 つのページをプリフェッチする代わりに、事前レンダリングを試みる同様のデモページで、同じ投機的読み込み画面を事前レンダリング ルールにも使用できます。

</ph>

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

Chrome 121 で、ドキュメント ルールのサポートをリリースしました。これにより、ブラウザは特定の URL のセットをリストするのではなく、ページ上の同じオリジンのリンクからこれらの 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 がすべて一覧表示されるため、この新しいタブが有用であることがわかります。

</ph>

これらの事前レンダリング プロセスはまだ開始されていないため、[ステータス] は [トリガーされていません] となっています。ただし、リンクの上にポインタを置くと、各 URL が事前レンダリングされるため、ステータスが変化します。

</ph>

Chrome には事前レンダリングに上限が設定されており、moderate エガーネスの場合、事前レンダリングは最大 2 回までとされています。そのため、3 番目のリンクにカーソルを合わせると、その URL の失敗理由が表示されます。

</ph>

他の DevTools パネルで prerender をデバッグする

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

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

</ph>

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

</ph>

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

</ph>

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

</ph>

[コンソール] パネルでは、事前レンダリングされたページによって生成されたコンソールログを表示できます。

</ph>

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

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

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

</ph>

また、プリフェッチの場合と同様に、投機ルールが現在のページと一致しないページから移動すると、前のページの投機ルールで示された URL が [投機的読み込み] タブに記載されていなかった理由が表示されます。

</ph>

まとめ

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

謝辞

サムネイル画像: Nubelson Fernandes、Unsplash より