サイトを閲覧しているユーザーのページ読み込みパフォーマンスを向上させる最も効果的な方法の一つは、ユーザーが次にアクセスするページの読み込みを、ユーザーがアクセスする前に開始することです。これは、Speculation Rules API を使用した投機的読み込みと呼ばれる手法で行うことができます。
仕組み
投機的読み込みは、JSON ベースの投機ルールを使用して、プリフェッチまたは事前レンダリングが可能なリンクをブラウザに通知することで、ユーザーがリンクをクリックしたときのページ読み込みパフォーマンスを向上させます。
ルールは、urls キー（リストルールと呼ばれる）の URL のハードコードされたリストか、ページ上のリンクを検索するために使用される href と CSS セレクタのセットを含む where キー（document ルールと呼ばれる）のいずれかです。
ルールには、ページをプリフェッチまたは事前レンダリングするタイミングを指定するオプションの eagerness プロパティを含めることもできます。eagerness プロパティは、immediate、eager、moderate、conservative のいずれかに設定できます。immediate はできるだけ早く投機的に処理しますが、他のオプションは、ユーザーが短時間ホバーする、長時間ホバーする、ページをクリックし始めるなどのユーザー シグナルを待ってから処理します。
ルールをさまざまなイーガーネス設定と組み合わせて、イーガーにプリフェッチし、ユーザーがさらに操作したときに事前レンダリングできます。
用途
投機的読み込みは、コンテンツが頻繁に変更される可能性が低く、ページの生成コストが低い静的ページ（特にエッジでキャッシュされている場合）に特に有用です。動的ページにも使用できますが、コンテンツが古くなる可能性があることに注意する必要があります。
投機的読み込みは通常、同一オリジンのリンクに使用されますが、より高度なオプションを使用すると、クロスオリジンの投機的読み込みも可能になります。このガイドでは、より一般的な同一オリジンのユースケースに焦点を当てています。
より積極的な投機的読み込みは、次にアクセスされる可能性が高いページ（ヘッドライン記事や、学習コースなどの段階的なプロセスの次のページなど）に適しています。
ユーザーが次に何をするかが明確でない場合や、ページに多くのリンクがあり、それぞれにアクセスされる可能性が同じである場合は、積極性の低い投機的読み込みが適しています。ホバーやページでのクリックの開始など、より多くのシグナルを待つことで、次のページを先取りして、完全にプリフェッチまたは事前レンダリングされていなくても、ユーザー エクスペリエンスを向上させることができます。
同様に、プリフェッチはプリレンダリングよりも控えめな選択肢であり、使用するリソースは少ないものの（クライアント側とサーバー側の両方で）、ユーザーに提供するメリットは少なくなります。これは、初期実装に適した選択肢であり、デベロッパーが明示的にリクエストしたときに、後で事前レンダリングに拡張できます。
活用方法
投機ルールは JSON ベースの形式で、<script type="speculationrules"> タグに含めることができます。ルールは、ドキュメントの <head> または <body> に含めることも、JavaScript を使用して動的に追加することもできます。
tag は、グローバル レベルまたはルールごとに使用することもできます。このタグを設定すると、Sec-Speculation-Tags ヘッダーに含まれ、どの推測が行われたかをサーバーサイドで識別できるようになります。
事前定義された URL をプリフェッチするためのシンプルな URL リストルールの例
<script type="speculationrules">
{
"tag": "product-page-speculations",
"prefetch": [
{
"urls": ["/product/1", "/product/2", "/product/3"]
}
]
}
</script>
ページ上のすべての同一オリジンリンクを事前レンダリングするシンプルなドキュメント ルールの例
<script type="speculationrules">
{
"tag": "all-links-speculations",
"prerender": [{
"where": { "href_matches": "/*" }
}]
}
</script>
インタラクティブなサイトを除外してリンクを事前レンダリングする複雑なドキュメント ルールの例
<script type="speculationrules">
{
"tag": "speculations-with-exclusions",
"prerender": [{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": {"href_matches": "/wp-admin"}},
{ "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
{ "not": {"selector_matches": ".do-not-prerender"}},
{ "not": {"selector_matches": "[rel~=nofollow]"}}
]
}
}]
}
</script>
混合ルールセットの例
この例は、すべてのリンクを積極的にプリフェッチし、さらに moderate の積極性でより多くのシグナルを取得したときに同じリンクを事前レンダリングするルールセットを示しています。
<script type="speculationrules">
{
"prefetch": [{
"tag": "prefetch-speculations",
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender": [{
"tag": "prerender-speculations",
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
ベスト プラクティス
- 推奨事項: 投機ルールを使用して、ユーザーが次にアクセスする可能性が高いページをプリフェッチおよび事前レンダリングします。
- 推奨: コンテンツが頻繁に変更される可能性が低く、ページを生成するコストが低い静的サイト（特にエッジでキャッシュされている場合）では、投機ルールを使用します。
- 推奨事項: 動的ページに投機ルールを使用する場合は、より注意を払ってください。動的ページでは、コンテンツが頻繁に変更される可能性が高く、古くなる可能性があり、ページの作成コストが高くなります。
- 推奨: リストルールよりもドキュメント ルールを優先します。ドキュメント ルールは柔軟性が高く、同じルールを複数のページで共有でき、事前に不明なページのプリフェッチと事前レンダリングに使用できます。
- 推奨事項: プリフェッチと事前レンダリングのトレードオフを考慮し、ユースケースに適したものを選択します。事前レンダリングはプリフェッチよりもコストが高く、動的な状態を表示する複雑なアプリケーションでは、意図しない副作用が発生する可能性がありますが、ユーザー エクスペリエンスは向上します。不明な場合は、デベロッパーに希望を尋ねます。
- 推奨事項: さまざまな
eagernessレベル間のトレードオフを考慮し、ユースケースに適したレベルを選択します。より積極的な投機的実行は、ユーザー エクスペリエンスを向上させますが、より多くのリソースを使用し、動的な状態を表示する複雑なアプリケーションで意図しない副作用を引き起こす可能性があります。不明な場合は、デベロッパーに希望を尋ねます。 - 投機ルールを過度に使用しないでください。たとえば、ページ上のすべてのリンクを投機的に処理することは避けてください。ブラウザには制限があります（非積極的な投機の場合は 2 つの投機）。
immediateは、ごく少数のリンクにのみ使用してください。 /logoutや/add-to-cartなど、状態変更をトリガーする可能性のある URL を投機的に実行しないでください。ドキュメント ルールに含まれる可能性がある場合は、投機ルールから明示的に除外してください。- シングルページ アプリケーション（SPA）では、投機ルールを使用しないでください。投機ルールは、ブラウザがナビゲーションごとに新しいドキュメントに移動するマルチページ アプリケーション（MPA）向けに設計されています。SPA では、ブラウザはナビゲーションごとに新しいドキュメントに移動しないため、投機ルールは想定どおりに機能しません。
ブラウザのサポートとフォールバック戦略
ただし、投機的読み込みはプログレッシブ エンハンスメントです。拡張機能として使用してもまったく問題ありません。パフォーマンスの向上が期待できるため、使用することを強くおすすめします。ブラウザが投機ルールをサポートしていない場合は、単に無視されます。