投機ルールを使用すると、前回の投稿で詳しく説明したように、次のページ ナビゲーションをプリフェッチしてプリレンダリングできます。これにより、ページ読み込みが大幅に高速化（または瞬時に完了）し、これらの追加のページ ナビゲーションの Core Web Vitals が大幅に改善されます。
投機ルールのデバッグは、複雑になることがあります。これは、事前レンダリングされたページに特に当てはまります。これらのページは、別のレンダラでレンダリングされるためです。これは、有効化されると現在のタブを置き換える、非表示のバックグラウンド タブのようなものです。そのため、通常の DevTools オプションを問題のデバッグに使用できるとは限りません。
Chrome チームは、投機ルールのデバッグに関する DevTools のサポートを強化するために尽力してきました。この投稿では、これらのツールを使用してページの投機ルールを理解するさまざまな方法、投機ルールが機能しない理由、デベロッパーがより使い慣れた DevTools オプションを使用できる場合と使用できない場合について説明します。
「pre-」が付く用語の説明
「pre-」が付く用語は多く、混乱を招きやすいため、まずはこれらの用語の説明から始めます。
- プリフェッチ: 将来のパフォーマンスを向上させるために、リソースまたはドキュメントを事前に取得すること。この投稿では、Speculation Rules API を使用したドキュメントのプリフェッチについて説明します。これは、サブリソースのプリフェッチによく使用される、類似しているものの古い
<link rel="prefetch">オプションとは異なります。 - 事前レンダリング: プリフェッチよりも一歩進んだ処理で、ユーザーがページに移動したかのようにページ全体を実際にレンダリングします。ただし、ユーザーが実際にページに移動した場合に備えて、非表示のバックグラウンド レンダラ プロセスに保持されます。このドキュメントでは、古い
<link rel="prerender">オプション（完全な事前レンダリングは行われなくなりました）ではなく、新しい Speculation Rules API バージョンについて説明します。 - 投機的ナビゲーション: 投機ルールによってトリガーされる新しいプリフェッチ オプションと事前レンダリング オプションの総称。
- プリロード:
<link rel="preload">、プリロード スキャナ、Service Worker ナビゲーション プリロードなど、さまざまなテクノロジーやプロセスを指す、過負荷の用語。これらの項目についてはここでは説明しませんが、「投機的ナビゲーション」という用語と明確に区別するために、この用語が含まれています。
prefetch の投機ルール
投機ルールを使用すると、次のナビゲーションのドキュメントをプリフェッチできます。たとえば、次の JSON をページに挿入すると、next.html と next2.html がプリフェッチされます。
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
ナビゲーション プリフェッチに投機ルールを使用すると、以前の <link rel="prefetch"> 構文よりも、API の表現力が向上し、結果が HTTP ディスク キャッシュではなくメモリ キャッシュに保存されるなどのメリットがあります。
prefetch の投機ルールをデバッグする
投機ルールによってトリガーされたプリフェッチは、他のフェッチと同様に [ネットワーク] パネルで確認できます。
赤でハイライト表示されている 2 つのリクエストは、プリフェッチされたリソースです。これは、[Type] 列で確認できます。これらは将来のナビゲーション用であり、Chrome は現在のページのソースを優先するため、Lowest の優先度で取得されます。
いずれかの行をクリックすると、Sec-Purpose: prefetch HTTP ヘッダーも表示されます。これは、サーバー側でこれらのリクエストを識別する方法です。
[投機的読み込み] タブで prefetch をデバッグする
Chrome DevTools の [アプリケーション] パネルの [バックグラウンド サービス] セクションに、投機ルールをデバッグするための [投機的読み込み] セクションが新たに追加されました。
![プリフェッチ ルールを示す Chrome DevTools の [投機的読み込み] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prefetch.png?hl=ja)
このセクションには 3 つのタブがあります。
- [投機的読み込み]: 現在のページの事前レンダリング ステータスが一覧表示されます。
- [Rules] には、現在のページで見つかったすべてのルールセットが一覧表示されます。これらは、URL またはルールタグとして指定されます（存在する場合）。
- [Speculations]: ルールセットからプリフェッチおよび事前レンダリングされたすべての URL が一覧表示されます。
上のスクリーンショットに [投機] タブが表示されています。このサンプルページには、3 ページのプリフェッチを行う投機ルールが 1 つ設定されていることがわかります。これらのプリフェッチのうち 2 つは成功し、1 つは失敗しました。[Rule set] の横にあるアイコンをクリックすると、[Elements] パネルのルールセットのソースに移動できます。または、[ステータス] リンクをクリックすると、そのルールセットでフィルタされた [投機] タブに移動できます。
[Speculations] タブには、すべてのターゲット URL と、アクション（プリフェッチまたは事前レンダリング）、それらの URL の取得元となったルールセット（ページに複数存在する場合があります）、各投機のステータスが表示されます。
![プリフェッチされた URL とそのステータスを示す Chrome DevTools の [投機] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-prefetch-annotated.png?hl=ja)
URL の上にあるプルダウンを使用すると、すべてのルールセットの URL を表示したり、特定のルールセットの URL のみを表示したりできます。その下に、すべての URL が一覧表示されます。URL をクリックすると、詳細情報が表示されます。
このスクリーンショットでは、next3.html ページ（存在しないため、2xx 以外の HTTP ステータス コードである 404 が返される）の失敗理由を確認できます。
[投機的読み込み] の概要タブには、[このページの投機的読み込みステータス] レポートが表示され、このページでプリフェッチまたはプリレンダリングが使用されたかどうかが示されます。
プリフェッチされたページの場合、そのページに移動すると成功メッセージが表示されます。
![プリフェッチが成功したことを示す Chrome DevTools の [投機的読み込み] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/successful-prefetch.png?hl=ja)
一致しない推測
投機ルールが設定されたページからナビゲーションが発生し、プリフェッチまたはプリレンダリングが使用されなかった場合、タブの追加セクションに、URL が投機 URL のいずれとも一致しなかった理由の詳細が表示されます。これは、投機ルールの入力ミスを見つけるのに役立ちます。
![Chrome DevTools の [投機的読み込み] タブ。現在の URL が前のページの投機ルールの URL と一致しなかったことを示しています。](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prefetch.png?hl=ja)
たとえば、ここでは next4.html に移動しましたが、プリフェッチされるのは next.html、next2.html、next3.html のみであるため、この 3 つのルールのいずれにも一致しないことがわかります。
[投機的読み込み] タブは、投機ルール自体のデバッグや、JSON の構文エラーの検出に非常に役立ちます。
プリフェッチ自体については、[ネットワーク] パネルの方がなじみがあるかもしれません。プリフェッチ失敗の例では、プリフェッチの 404 が次のように表示されます。
![失敗したプリフェッチを示す Chrome DevTools の [ネットワーク] パネル](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-network-failed-prefetch.png?hl=ja)
ただし、[投機的読み込み] タブは、次に説明する事前レンダリングのルールでより有用になります。
prerender の投機ルール
事前レンダリングの投機ルールは、プリフェッチの投機ルールと同じ構文に従います。次に例を示します。
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
このルールセットは、指定されたページの完全な読み込みとレンダリングをトリガーします（特定の制限が適用されます）。これにより、追加のリソース費用はかかりますが、瞬時に読み込みを行うことができます。
ただし、プリフェッチとは異なり、これらは Chrome の別のレンダリング プロセスで取得およびレンダリングされるため、[ネットワーク] パネルには表示されません。これにより、[Speculative loads] タブは、プリレンダリングの投機ルールをデバッグするうえでより重要になります。
[投機的読み込み] タブで prerender をデバッグする
同じ 投機的読み込み 画面を事前レンダリングのルールに使用できます。これは、3 つのページをプリフェッチするのではなく、事前レンダリングを試みる同様のデモページで実証されています。
![事前レンダリングの投機ルールが適用されたページの Chrome DevTools の [投機的読み込み] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prerender.png?hl=ja)
ここでも、3 つの URL のうち 1 つがプリレンダリングに失敗したことがわかります。デベロッパーは、[2 Ready, 1 Failure] リンクをクリックして、[Speculations] タブで URL ごとの詳細を確認できます。
Chrome 121 でドキュメント ルールのサポートがリリースされました。これにより、ブラウザは特定の URL のセットをリストするのではなく、ページ上の同じオリジンのリンクからこれらの URL を取得できます。
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
この例では、/not-safe-to-prerender で始まるリンクを除くすべての同一オリジンのリンクを事前レンダリング候補として選択します。
また、プリレンダリング eagerness を moderate に設定します。これは、リンクにカーソルを合わせたとき（パソコンの場合）、ビューポート（モバイルの場合）、またはクリックしたときに、ナビゲーションがプリレンダリングされることを意味します。
投機ルール デモサイトにも同様のルールがあります。このサイトの新しい [投機的読み込み] セクションを使用すると、ブラウザがページで見つけた対象となるすべての URL が一覧表示されるため、この新しいタブの有用性がわかります。
![トリガーされていない URL が多数表示されている Chrome DevTools の [投機] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-not-triggered.png?hl=ja)
これらのプリレンダリング プロセスは開始されていないため、[ステータス] は [トリガーされていません] になります。ただし、リンクにポインタを合わせると、各 URL が事前レンダリングされるにつれてステータスが変化します。
![トリガーされたプリレンダリング ページが表示された Chrome DevTools の [投機] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-triggered.png?hl=ja)
Chrome では事前レンダリングに上限が設定されており、moderate のイーガーネスでは最大 2 つの事前レンダリングが可能です。そのため、3 つ目のリンクにカーソルを合わせると、その URL の失敗理由が表示されます。
![失敗したプリロードが表示されている Chrome DevTools の [投機] タブ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/replaced-prerender-shows-as-failure.png?hl=ja)
他の DevTools パネルで prerender をデバッグする
プリフェッチとは異なり、事前レンダリングされたページは、独自のバックグラウンド レンダラでレンダリングされるため、ネットワーク パネルなどの DevTools パネルの現在のレンダリング プロセスには表示されません。
ただし、DevTools パネルで使用されるレンダラを切り替えるには、右上のプルダウン メニューを使用するか、パネルの上部で URL を選択して [Inspect] を選択します。
このプルダウン（および選択した値）は、ネットワーク パネルなど、他のすべてのパネルでも共有されます。このパネルでは、リクエストされているページが事前レンダリングされたページであることがわかります。
これらのリソースの HTTP ヘッダーを見ると、すべてに Sec-Purpose: prefetch;prerender ヘッダーが設定されていることがわかります。
![プリレンダリングされたページの Sec-Purpose ヘッダーを示す Chrome DevTools の [ネットワーク] パネル](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/sec-purpose-headers-prerender.png?hl=ja)
または、[Elements] パネルでページ コンテンツを確認できます。次のスクリーンショットでは、<h1> 要素が事前レンダリングされたページ用であることがわかります。
![プリレンダリングされたページの Chrome DevTools の [Elements] パネル](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-elements-panel.png?hl=ja)
または、コンソール パネル。ここでは、事前レンダリングされたページから出力されたコンソールログを確認できます。
![プリレンダリングされたページからのコンソール出力を表示する Chrome DevTools の [Console] パネル](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-console-panel.png?hl=ja)
プリレンダリングされたページで投機ルールをデバッグする
前のセクションでは、事前レンダリングを開始するページで事前レンダリングされたページをデバッグする方法について説明しました。ただし、プリレンダリングされたページ自体が、アナリティクス呼び出しを行うか、コンソールにロギングすることで（前のセクションで説明したように表示可能）、デバッグ情報を提供することもできます。
また、ユーザーがプリレンダリングされたページに移動してそのページが有効になると、[投機的読み込み] タブにこのステータスと、プリレンダリングが成功したかどうかが表示されます。プリレンダリングできなかった場合は、その理由が説明されます。
![Chrome DevTools の [投機的読み込み] タブに、成功した事前レンダリング ページと失敗した事前レンダリング ページの両方が表示されている](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/success-failed-prerender.png?hl=ja)
さらに、プリフェッチの場合と同様に、現在のページと一致しない投機ルールを含むページから移動すると、[投機的読み込み] タブに、URL が前のページの投機ルールでカバーされている URL と一致しなかった理由が表示されます。
![Chrome DevTools の [Speculative loads] タブに、現在の URL と前のページでカバーされている URL の不一致が表示されている](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prerender.png?hl=ja)
まとめ
この投稿では、デベロッパーがプリフェッチとプリレンダリングの投機ルールをデバッグするさまざまな方法を紹介しました。チームは引き続き、投機ルール用のツールの開発に取り組んでいます。このエキサイティングな新しい API のデバッグに役立つ他の方法について、デベロッパーの皆様からのご提案をお待ちしております。機能リクエストやバグが見つかった場合は、Chrome Issue Tracker で問題を報告することをおすすめします。
謝辞
サムネイル画像: Nubelson Fernandes、Unsplash より。