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

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` 推測ルールをデバッグする

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

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

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

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

Sec-Purpose がプリフェッチに設定された Chrome DevTools プリフェッチヘッダー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一致しなかった推測

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

Chrome DevTools の [Speculative loads] タブ。現在の URL が、前のページの投機ルールのどの URL とも一致しなかったことを示しています — 一致しない URL が DevTools でハイライト表示される

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

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

プリフェッチ自体については、[ネットワーク] パネルの方が使い慣れているかもしれません。プリフェッチの失敗の例では、プリフェッチの 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 つがプリレンダリングに失敗しています。デベロッパーは、[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 の [投機] タブ — トリガーされていない URL が多数表示されている Chrome DevTools の [推測] タブ

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

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

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

プリロードに失敗したことを示す Chrome DevTools の [投機] タブ

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

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

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

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

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

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

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

プリレンダリングされたページの Sec-Purpose ヘッダーを示す Chrome DevTools の [Network] パネル — 事前レンダリングされたページの Sec-Purpose ヘッダーを示す Chrome DevTools のネットワークパネル

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

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

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

プリレンダリングされたページのコンソール出力が表示された Chrome DevTools コンソールパネル — 事前レンダリングされたページのコンソール出力が表示された Chrome DevTools Console パネル

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

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

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

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

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

現在の URL と前のページでカバーされている URL の URL の不一致を示す Chrome DevTools の [Speculative loads] タブ — URL の不一致を示す Chrome DevTools

まとめ

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

謝辞

サムネイル画像: Unsplash の Nubelson Fernandes による

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

「pre-」の用語の説明

prefetch の推測ルール

prefetch 推測ルールをデバッグする

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