投機ルールを使用すると、前の投稿で説明したように、次のページ ナビゲーションをプリフェッチしてプリレンダリングできます。これにより、ページの読み込みが大幅に速くなり、場合によっては瞬時に読み込まれるため、これらの追加のページ ナビゲーションのウェブに関する主な指標が大幅に改善されます。
投機ルールのデバッグは難しい場合があります。これは、事前レンダリングされたページに特に当てはまります。これらのページは別のレンダラでレンダリングされるため、有効になったときに現在のタブを置き換える非表示のバックグラウンド タブのようなものになります。そのため、通常は DevTools のオプションを使用して問題をデバッグすることはできません。
Chrome チームは、投機ルールのデバッグに対する 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 推測ルールをデバッグする
推測ルールによってトリガーされたプリフェッチは、他のフェッチと同様に [ネットワーク] パネルで確認できます。