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

Barry Pollard

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

投機ルールのデバッグは難しい場合があります。これは、事前レンダリングされたページに特に当てはまります。これらのページは、別のレンダラでレンダリングされます。これは、アクティブになると現在のタブに置き換わる、隠れたバックグラウンド タブのようなものです。そのため、通常の DevTools オプションを問題のデバッグに使用できないことがあります。

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

動画で確認したい場合は、このドキュメントの内容の概要については、ページ読み込みを高速化するためのナビゲーション予測のデバッグに関する DevTools のヒント動画をご覧ください。

「事前」の用語の説明

「事前」にはわかりにくい用語が多数あるため、まずはこれらの用語から説明します。

• プリフェッチ: 将来のパフォーマンスを向上させるためにリソースまたはドキュメントを事前に取得します。この記事では、サブリソースのプリフェッチによく使用される、類似の古い <link rel="prefetch"> オプションではなく、Speculation Rules API を使用してドキュメントをプリフェッチする方法について説明します。
• プリレンダリング: プリフェッチのさらに一歩進んだ技術で、ユーザーがページに移動したかのようにページ全体を実際にレンダリングしますが、ユーザーが実際にページに移動したときに使用できるように、非表示のバックグラウンド レンダラ プロセスに保持します。このドキュメントでは、古い <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 のネットワーク パネル

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

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

Chrome DevTools で [Sec-purpose] が [prefetch] に設定されたヘッダーをプリフェッチします。

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

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

Chrome DevTools の [投機的読み込み] タブに表示されたプリフェッチ ルール

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

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

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

重要: DevTools で [Speculative load] タブを開く前にページを読み込んだ場合は、ページを再読み込みしてこれらのパネルにデータを入力する必要があります。これは、パネルが Chrome DevTools プロトコルを使用して推測をリアルタイムでモニタリングするためです。これは、パネルが使用されている場合にのみ有効になります。これを改善し、その後に開いた場合でも一部の状態が表示されるようにする予定です。

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

[投機] タブには、すべてのターゲット URL と、アクション（プリフェッチまたはプリレンダリング）、どのルールセットから来たのか（ページに複数ある場合もあります）、各投機のステータスが表示されます。

プリフェッチされた URL とステータスが表示された Chrome DevTools の [推測] タブ

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

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

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

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

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

比類のない憶測

投機ルールが設定されたページから移動してもプリフェッチまたはプリレンダリングが使用されなかった場合、タブの追加セクションに、URL がどの投機 URL とも一致しなかった理由の詳細が表示されます。これは、投機ルールの誤字脱字を見つけるのに役立ちます。

一致しない URL が DevTools でハイライト表示される

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

注: このフィードバックは主に投機ルールのデバッグ用であるため、投機ルールに含まれていないまったく別のページに移動し、プリフェッチやプリレンダリングが想定されない場合に、この URL の一致が少しわかりにくい場合があります。

Chrome DevTools の [Speculative loads] タブに一致しない URL が表示されている

Chrome チームは、このようなケースのユーザー インターフェースを改善するために、この機能の改善を継続的に行っているとしています。

[推測読み込み] タブは、推測ルール自体のデバッグや、JSON の構文エラーの検出に非常に便利です。

プリフェッチ自体については、[ネットワーク] パネルの方が使い慣れているかもしれません。プリフェッチの失敗の例では、プリフェッチの 404 を以下で確認できます。

プリフェッチの失敗を示す Chrome DevTools ネットワーク パネル

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

prerender の投機ルール

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

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

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

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

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

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

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

ここでも、3 つの URL のうち 1 つがプリレンダリングに失敗しています。デベロッパーは、[2 Ready, 1 Failure] リンクをクリックして [Speculations] タブで 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 の [投機] タブ

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

プリロードに失敗した状態の Chrome DevTools の [推測] タブ

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

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

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

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

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

プリレンダリングされたページのネットワーク リクエストを示す Chrome DevTools のネットワーク パネル

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

事前レンダリングされたページの Sec-purpose ヘッダーが表示された Chrome DevTools の [Network] パネル

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

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

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

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

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

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

また、ユーザーがプリレンダリングされたページに移動してページが有効になると、[推測読み込み] タブにそのステータスと、プリレンダリングが正常に完了したかどうかが表示されます。プリレンダリングできなかった場合は、その理由が説明されます。

Chrome DevTools の [投機的読み込み] タブに、成功したプリレンダリング ページと失敗したプリレンダリング ページの両方が表示されている

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

URL の不一致を示す Chrome DevTools

まとめ

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

謝辞

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