Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】speculationrules属性値の使い方

speculationrules属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

speculationrules定数は、HTMLの<script>要素のtype属性に指定することで、そのスクリプトブロックがWebページの投機的ナビゲーション(Speculative Navigation)のためのルールを定義するものであることをブラウザに伝える定数です。投機的ナビゲーションとは、ユーザーが次にどのページに移動するかを予測し、そのページを事前に読み込んだりレンダリングしたりすることで、体感速度を向上させる技術を指します。

この定数が指定された<script>要素内には、JSON形式で投機的ナビゲーションのルールが記述されます。これらのルールには、例えば、特定のリンクがクリックされる可能性が高い場合に、そのリンク先のページをプリフェッチ(事前に取得)したり、プリレンダリング(事前にレンダリング)したりする指示が含まれます。ブラウザは、これらのルールを解析し、ユーザーエクスペリエンスを向上させるために、バックグラウンドで次のページへの準備を進めます。

システムエンジニアを目指す方にとって、この機能はWebアプリケーションのパフォーマンス最適化において重要な役割を果たすことを理解することが大切です。ユーザーが次のアクションを起こす前にページの読み込みが完了していれば、アプリケーションはより高速でスムーズに動作しているように感じられるため、ユーザー満足度の向上に直結します。この仕組みを利用することで、特にナビゲーションが多いサイトや、読み込みに時間がかかる可能性のあるページを持つアプリケーションで、顕著な効果が期待できます。

公式リファレンス: <script type="speculationrules">

構文(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)

戻り値なし

戻り値はありません

関連コンテンツ