【HTML Living Standard】speculationrules属性値の使い方
speculationrules属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
speculationrules定数は、HTMLの<script>要素のtype属性に指定することで、そのスクリプトブロックがWebページの投機的ナビゲーション（Speculative Navigation）のためのルールを定義するものであることをブラウザに伝える定数です。投機的ナビゲーションとは、ユーザーが次にどのページに移動するかを予測し、そのページを事前に読み込んだりレンダリングしたりすることで、体感速度を向上させる技術を指します。
この定数が指定された<script>要素内には、JSON形式で投機的ナビゲーションのルールが記述されます。これらのルールには、例えば、特定のリンクがクリックされる可能性が高い場合に、そのリンク先のページをプリフェッチ（事前に取得）したり、プリレンダリング（事前にレンダリング）したりする指示が含まれます。ブラウザは、これらのルールを解析し、ユーザーエクスペリエンスを向上させるために、バックグラウンドで次のページへの準備を進めます。
システムエンジニアを目指す方にとって、この機能はWebアプリケーションのパフォーマンス最適化において重要な役割を果たすことを理解することが大切です。ユーザーが次のアクションを起こす前にページの読み込みが完了していれば、アプリケーションはより高速でスムーズに動作しているように感じられるため、ユーザー満足度の向上に直結します。この仕組みを利用することで、特にナビゲーションが多いサイトや、読み込みに時間がかかる可能性のあるページを持つアプリケーションで、顕著な効果が期待できます。
構文(syntax)
1<script type="speculationrules"> 2 { 3 "prefetch": [ 4 { 5 "source": "document", 6 "where": { 7 "href_matches": "/path/to/*" 8 }, 9 "eagerness": "moderate" 10 } 11 ] 12 } 13</script>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
Speculation Rules APIでページを高速化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Speculation Rules API サンプル</title> 7</head> 8<body> 9 <h1>Speculation Rules APIの基本例</h1> 10 <p> 11 このページは、Speculation Rules API を使用して、 12 将来ユーザーがアクセスする可能性のあるページを事前に準備するためのルールを定義しています。 13 </p> 14 <p>以下のリンクは、Speculation Rules APIによって事前にプリレンダリングされる対象のページです。</p> 15 <ul> 16 <li><a href="/next-page.html">次のページへ移動</a></li> 17 <!-- 注意: /next-page.html はこのサンプルコードには含まれていません。 --> 18 </ul> 19 20 <!-- 21 Speculation Rules API は、ブラウザがユーザーの次のナビゲーションを予測し、 22 事前にリソースをロードしてページの表示を高速化するための機能です。 23 <script type="speculationrules"> タグ内に JSON 形式でルールを記述します。 24 --> 25 <script type="speculationrules"> 26 { 27 // 'prerender' は、指定されたURLのページ全体をバックグラウンドで事前に読み込み、 28 // ユーザーが実際にそのページへ移動した際の表示を高速化します。 29 "prerender": [{ 30 // 'urls' プロパティを使用して、プリレンダリングの対象となるURLを直接リストで指定します。 31 "urls": ["/next-page.html"] 32 }] 33 } 34 </script> 35</body> 36</html>
このHTMLサンプルコードは、Speculation Rules API（推測ルールAPI）を用いて、ユーザーが次にアクセスする可能性のあるページを事前に準備するためのルールを定義する方法を示しています。<script type="speculationrules">という特殊なタイプのスクリプトタグの中に、JSON形式でそのルールを記述します。このタグ自体に直接的な引数や戻り値はありませんが、記述されたJSONの内容がブラウザに対する具体的な指示として機能します。
サンプルコードでは、"prerender"というルールを設定しています。これは、指定されたURLのページ全体をユーザーが閲覧する前にバックグラウンドで読み込み、表示の準備を完了させる指示です。"urls"プロパティに/next-page.htmlというURLを指定することで、そのページがプリレンダリングの対象となります。これにより、ユーザーが実際にそのページへのリンクをクリックした際に、既にページが準備されているため、表示が非常に高速になります。この機能は、ウェブサイトのユーザー体験を向上させるために活用されます。
speculationrulesは、ユーザーの次のページ移動を予測し、コンテンツを事前に読み込んで表示を高速化する機能です。この機能は比較的新しく、全てのブラウザでサポートされているわけではないため、利用前に対応状況を確認してください。
不必要に多くのページを事前に読み込むと、ユーザーのデータ通信量増加やサーバーへの負荷につながる可能性があります。そのため、実際にアクセスされる可能性が高いページに限定して設定することが重要です。
また、<script type="speculationrules">タグ内の記述は厳密なJSON形式である必要があり、構文エラーがあると機能しません。セキュリティのため、信頼できるURLのみを対象とすることも忘れないでください。サンプルにあるリンク先のページは別途準備が必要です。
Speculation Rules でページを高速化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Speculation Rules Example</title> 7 8 <!-- 9 <script type="speculationrules"> は、ブラウザに次のページを投機的に（先読みで） 10 プリフェッチ（事前に読み込む）またはプリレンダリング（事前にレンダリングする）するよう 11 指示するためのルールを定義します。 12 これにより、ユーザーがリンクをクリックした際のページ読み込み速度が向上する可能性があります。 13 ルールはJSON形式で記述され、このスクリプトタグのコンテンツとして埋め込まれます。 14 --> 15 <script type="speculationrules"> 16 { 17 "prefetch": [ 18 { 19 "source": "list", 20 "urls": [ 21 "/products/detail.html", 22 "/contact.html" 23 ] 24 } 25 ] 26 } 27 </script> 28</head> 29<body> 30 <h1>Speculation Rules のサンプル</h1> 31 <p>このページでは、ブラウザの投機的プリフェッチ機能を使用して、特定のURLを事前に読み込むルールを設定しています。</p> 32 <p>上記の `speculationrules` に従って、ブラウザはバックグラウンドで次のページをプリフェッチしようとします。</p> 33 <ul> 34 <li><a href="/products/detail.html">商品詳細ページへ</a></li> 35 <li><a href="/contact.html">お問い合わせページへ</a></li> 36 <li><a href="/blog/latest.html">最新ブログ記事へ (このページはプリフェッチされません)</a></li> 37 </ul> 38 <p>設定されたリンクをクリックすると、プリフェッチが成功していれば、通常よりも速くページが表示される可能性があります。</p> 39</body> 40</html>
HTMLの<script type="speculationrules">は、ウェブページの表示速度を向上させるための新しい機能です。これは、ブラウザに対して、ユーザーが次に訪れる可能性のあるページを、事前にバックグラウンドで読み込む（プリフェッチ）か、事前にレンダリングする（プリレンダリング）ためのルールを定義します。
具体的には、このスクリプトタグの中にJSON形式でルールを記述します。サンプルコードでは、"prefetch"という設定で/products/detail.htmlや/contact.htmlといった特定のURLを事前に読み込むようブラウザに指示しています。これにより、ユーザーがこれらのリンクをクリックした際に、ページの一部または全体がすでに読み込まれているため、通常のページ遷移よりも素早く表示されることが期待できます。
このspeculationrulesタグ自体には直接的な引数や戻り値はありません。タグのコンテンツとして記述されたJSONデータが、ブラウザが投機的に次のページを処理するための命令として機能し、ユーザー体験を向上させる役割を果たします。
<script type="speculationrules">は、特定のページを事前に読み込み、ユーザーの体感速度向上を目指す機能です。しかし、まだ新しい技術のため、すべてのブラウザで動作するわけではありません。指定したページはユーザーがアクセスしなくても読み込まれるため、ネットワーク帯域やサーバーリソースを消費する可能性があります。特に、ログインが必要なページやパーソナライズされたコンテンツに対して安易に適用すると、意図しない情報開示やプライバシーの問題を引き起こす危険性があります。設定するURLは厳選し、サーバーへの不要な負荷やセキュリティリスクを考慮して慎重に導入してください。実際にパフォーマンスが向上するかは環境に依存するため、効果測定も重要です。