このページは Cloud Translation API によって翻訳されました。

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` の投機ルールをデバッグする

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

プリフェッチされたドキュメントを表示している Chrome DevTools のネットワークパネル — プリフェッチされたドキュメントを表示する Chrome DevTools のネットワークパネル

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

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

Chrome DevTools の [Sec-purpose] が [プリフェッチ] に設定された状態でヘッダーをプリフェッチする — Chrome DevTools でヘッダーをプリフェッチし、Sec-Percentage を [プリフェッチ] に設定

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

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

プリフェッチルールを示す Chrome DevTools の投機的読み込みのタブ — プリフェッチルールを示す Chrome DevTools の [投機的読み込み] タブ

重要なポイント: [投機的読み込み] タブは、投機ルールのプリフェッチと事前レンダリング（総称して「ナビゲーション投機」）を操作するためのものです。これらのタブは、<link rel="preload"> を使用したサブリソースのプリロード、<link rel="prefetch"> を使用したサブリソースのプリフェッチ、または以前の <link rel="prerender"> の状態のないプリフェッチのデバッグには使用できません。

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

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

で確認できます。

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

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

プリフェッチされた URL とそのステータスが表示されている Chrome DevTools の [推測] タブ — Chrome DevTools の [Speculations] タブに、プリフェッチされた URL とそのステータスが表示される

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

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

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

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

プリフェッチが成功したことを示す Chrome DevTools の [投機的読み込み] タブ

比類のない憶測

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

Chrome DevTools の [投機的読み込み] タブ。現在の URL が前のページの投機ルールのどの URL とも一致しないことを示している — 一致しない URL が DevTools でハイライト表示される

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

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

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

プリフェッチに失敗したことを示す Chrome DevTools の [Network] パネル

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

`prerender` の投機ルール

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

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

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

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

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

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

Chrome DevTools の投機的読み込みで、事前レンダリングの投機ルールが設定されたページのタブを読み込む — Chrome DevTools の投機的読み込みで、事前レンダリングの投機ルールが設定されたページのタブを読み込み

ここでも、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 がすべて一覧表示されるため、この新しいタブが有用であることがわかります。

Chrome DevTools の [Speculations] タブに、トリガーされない URL が多数表示されている — 多数の未トリガー URL が表示された Chrome DevTools の [Speculations] タブ

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

事前レンダリングされたページがトリガーされた Chrome DevTools の [推測] タブ

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

失敗したプリロードが表示された Chrome DevTools の [Speculations] タブ

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

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

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

Chrome DevTools で、情報を表示するレンダラを切り替えられるようになりました

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

事前レンダリングされたページのネットワークリクエストが表示されている Chrome DevTools の [Network] パネル — 事前レンダリングされたページのネットワークリクエストを表示している Chrome DevTools の [Network] パネル

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

事前レンダリングされたページの Sec-purpose ヘッダーが表示されている Chrome DevTools の [Network] パネル — 事前レンダリングされたページに Sec-Purpose ヘッダーを表示する Chrome DevTools の [Network] パネル

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

事前レンダリングされたページの Chrome DevTools の [Elements] パネル — 事前レンダリングされたページ用の Chrome DevTools の [Elements] パネル

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

事前レンダリングされたページのコンソール出力を表示している Chrome DevTools コンソールパネル

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

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

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

事前レンダリングされたページと失敗したページの両方を示す Chrome DevTools の [投機的読み込み] タブ

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

現在の URL と前のページでカバーされていた URL の不一致を示す Chrome DevTools の [投機的読み込み] タブ — URL の不一致を示す Chrome DevTools

まとめ

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

謝辞

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

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

「pre-」の説明利用規約

prefetch の投機ルール

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

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