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

Barry Pollard

投機ルールを使用すると、前の投稿で説明したように、次のページ ナビゲーションをプリフェッチしてプリレンダリングできます。これにより、ページの読み込みが大幅に速くなり、場合によっては瞬時に読み込まれるため、これらの追加のページ ナビゲーションのウェブに関する主な指標が大幅に改善されます。

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

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

動画での説明をご希望の場合は、このドキュメントの内容の概要については、DevTools のヒント動画「投機的ナビゲーションをデバッグしてページ読み込みを高速化する」をご覧ください。

「事前」に関する用語の説明

「事前」という用語が多すぎて混乱しやすいため、まずこれらの用語について説明します。

• プリフェッチ: 将来のパフォーマンスを向上させるために、リソースやドキュメントを事前に取得すること。この記事では、サブリソースのプリフェッチによく使用される同様の古い <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"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</script>

重要なポイント: プリフェッチ推測ルールは、ドキュメントのみをプリフェッチし、サブリソースはプリフェッチしません。この方法では、次のナビゲーションの完全な事前レンダリングよりも使用するリソースが少なくなりますが、ナビゲーション時にサブリソースを取得してレンダリングする必要もあります。

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

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

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

プリフェッチされたドキュメントを表示する Chrome DevTools の [Network] パネル

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

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

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

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

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

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

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

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

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

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

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

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

Chrome DevTools の [投機] タブに、プリフェッチされた URL とそのステータスが表示されている様子

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

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

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

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

Chrome DevTools の [投機的読み込み] タブにプリフェッチが成功したことが表示されている

根拠のない憶測

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

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

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

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

[投機的読み込み] タブに一致しない URL が表示されている Chrome DevTools

Chrome チームは、このような場合のユーザー インターフェースを改善するために、この機能のイテレーションを継続しています。

[投機的読み込み] タブは、投機的ルールのデバッグや、JSON の構文エラーの検出に非常に役立ちます。

プリフェッチ自体については、ネットワーク パネルの方がよく知られているでしょう。プリフェッチの失敗の例では、プリフェッチの 404 を確認できます。

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

ただし、投機的読み込みタブは、次に説明する事前レンダリング投機的ルールで非常に役立ちます。

prerender の推測ルール

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

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

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

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

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

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

プリレンダリング投機ルールの設定されたページの Chrome DevTools の [投機的読み込み] タブ

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

Chrome 121 でドキュメント ルールのサポートが開始されました。これにより、ブラウザは特定の 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 の [投機] タブ

Chrome では、プリレンダリングに上限が設定されています。たとえば、moderate の積極性では最大 2 つのプリレンダリングが許可されています。そのため、3 つ目のリンクにカーソルを合わせると、その URL の失敗理由が表示されます。

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

他の DevTools パネルを使用して prerender をデバッグする

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

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

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

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

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

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

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

または、[要素] パネルで、次のスクリーンショットのようにページ コンテンツを確認できます。この例では、<h1> 要素がプリレンダリングされたページ用であることがわかります。

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

または、プリレンダリングされたページによって出力されたコンソールログを確認できる [コンソール] パネル:

プリレンダリングされたページのコンソール出力を示す Chrome DevTools の [Console] パネル

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

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

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

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

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

URL の不一致を示す Chrome DevTools

まとめ

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

謝辞

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