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

Barry Pollard

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

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

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

「pre-」の用語の説明

混乱を招く「前」の用語が多いので、まずはそれらについて説明します。

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

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 つのリクエストは、[Type] 列からわかるように、プリフェッチされたリソースです。これらのリソースは、将来のナビゲーション用であるため、Lowest の優先度でフェッチされます。Chrome は現在のページのリソースを優先します。

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

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

投機ルールのデバッグに役立つように、Chrome DevTools の [アプリケーション] パネルの [バックグラウンド サービス] セクションに新しい [投機的読み込み] セクションが追加されました。

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

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

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

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

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

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

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

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

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

一致しなかった推測

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

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

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

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

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

ただし、[推測読み込み] タブは、事前レンダリングの推測ルールに非常に役立ちます。この点については、後述します。

prerender の推測ルール

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

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

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

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

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

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

ここでも、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 が一覧表示されるため、この新しいタブの有用性を確認できます。

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

プリレンダリングされたページがトリガーされた Chrome DevTools の [投機] タブ

Chrome では、moderate の即時読み込みで最大 2 件のプリレンダリングなど、プリレンダリングに上限が設定されています。そのため、3 番目のリンクにカーソルを合わせると、その URL の失敗理由が表示されます。

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