【HTML Living Standard】prefetch属性値の使い方
prefetch属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
prefetchプロパティは、HTMLにおいて、ブラウザが将来的にユーザーがアクセスする可能性のあるリソースを事前に読み込み、キャッシュに保存するよう指示する設定を保持するプロパティです。主に<link>要素のrel属性の値として「prefetch」が指定されることで機能します。
このプロパティが設定されると、ブラウザは現在のページの表示に影響を与えないバックグラウンドで、指定されたURLのリソース（例えば、次のページで表示される可能性が高いHTMLドキュメント、画像、スタイルシートなど）をダウンロードし、キャッシュに保存します。これにより、ユーザーが実際にそのリソースへのナビゲーションやクリックを行った際に、キャッシュから素早くコンテンツを提供できるようになり、ページの読み込み時間を大幅に短縮し、ユーザーエクスペリエンスを向上させることが期待できます。
prefetchはあくまでブラウザへのヒントであり、ブラウザはネットワーク状況、ユーザーのデバイス状況、設定などを考慮して、実際にリソースをプリフェッチするかどうかを決定します。例えば、データ通信量が制限されている環境やバッテリー残量が少ない状況では、ブラウザがプリフェッチをスキップすることもあります。不必要なリソースのプリフェッチは、ユーザーのデータ通信量やサーバーの負荷を増加させる可能性があるため、次のアクセスが予測できる場面での計画的な利用が重要です。
構文(syntax)
1<link rel="prefetch" href="path/to/resource.html">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML prefetch による画像事前読み込み
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>HTML Prefetch Example</title> 7 <!-- 8 次のページで表示される可能性のある画像を事前にブラウザに読み込ませる指示です。 9 ユーザーが次のページに移動する際に、画像の表示が速くなる効果が期待できます。 10 --> 11 <link rel="prefetch" href="next-page-hero-image.jpg"> 12 <link rel="prefetch" href="thumbnail-image-for-next-page.png"> 13</head> 14<body> 15 <h1>現在のページ</h1> 16 <p>このページでは、ブラウザに次のページで使う可能性のある画像を事前に読み込むよう指示しています。</p> 17 <p>開発者ツールの「ネットワーク」タブを確認すると、これらの画像がバックグラウンドで読み込まれている様子が見えるかもしれません。</p> 18 <!-- 実際には、これらの画像は次のページで利用されることを想定しています。 --> 19</body> 20</html>
HTMLのprefetchは、ウェブページの表示速度を向上させるための機能の一つです。これは<link>タグのrel属性に指定する値で、ブラウザに対して、ユーザーが次に訪れる可能性のあるページで必要となるリソースを、現在のページが読み込まれた時点で事前にダウンロードしておくように指示します。この事前読み込みにより、ユーザーが実際に次のページへ移動した際に、必要なコンテンツ（特に画像などの大きなファイル）を待つことなく、すぐに表示できるようになるため、体感的なページ読み込み速度の向上に繋がり、ユーザーエクスペリエンスが改善されます。
prefetch自体には、直接の引数や戻り値はありません。linkタグの一部として機能し、href属性に指定されたURLのリソースを対象とします。
サンプルコードでは、<link rel="prefetch" href="next-page-hero-image.jpg">のように記述されています。これは、ブラウザに対して「next-page-hero-image.jpg」という画像を、現在のページが読み込まれている間にバックグラウンドで先読みしておくよう指示していることを意味します。同様に「thumbnail-image-for-next-page.png」も事前に読み込まれます。これらの画像が実際に次のページで利用されることを想定しており、ユーザーが次のページへ移動した際に、これらの画像が速やかに表示される効果が期待されます。
prefetchは、将来のページで利用される可能性のある画像などのリソースを、ユーザーがアクセスする前にブラウザに読み込ませる機能です。これにより、次のページへの遷移時、画像の表示が速くなる効果が期待できます。
ただし、この機能はユーザーの通信帯域を消費し、サーバーにも余分な負荷をかける可能性があります。そのため、実際に次のページで使われる可能性が高い、かつ重要なリソースに絞って利用することが極めて重要です。
不必要に多くのファイルをプリフェッチすると、通信料の無駄やモバイル環境でのパフォーマンス低下につながる恐れがあります。効果とコストを考慮し、慎重に適用するようにしてください。
HTML prefetch で次ページを先読みする
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>Prefetchの基本例</title> 7 <!-- 8 この<link>要素は、ブラウザに「next-page.html」を将来的に必要とする可能性があるため、 9 アイドル状態のときに事前に読み込んでおくようヒントを与えます。 10 これにより、ユーザーがそのページに移動した際に、より高速にページが表示される可能性があります。 11 --> 12 <link rel="prefetch" href="next-page.html"> 13</head> 14<body> 15 <h1>Prefetchの基本例</h1> 16 <p>このページは、次にアクセスする可能性のある「次のページ」を事前に読み込む設定をしています。</p> 17 <p><a href="next-page.html">次のページへ移動</a></p> 18</body> 19</html>
HTMLのprefetch属性は、次にアクセスする可能性のあるウェブページやその他のリソース（画像、CSS、JavaScriptなど）を、ユーザーが実際に必要とする前にブラウザが事前に読み込んでおくよう指示するために使用されます。これにより、ユーザーがそのリソースにアクセスした際に、より迅速にコンテンツが表示されるようになり、ウェブサイトの体感速度が向上します。
サンプルコードでは、<head>セクション内に<link rel="prefetch" href="next-page.html">という記述があります。これは、ブラウザに対して「next-page.htmlというファイルを、現在のページを完全に読み込み終え、他に処理することがないアイドル状態のときに、バックグラウンドでこっそり準備しておいてください」というヒントを与えています。ここでrel="prefetch"は事前読み込みの意図を示し、href="next-page.html"は実際に読み込む対象のURLを指定しています。
prefetch属性自体は、引数を受け取ったり、特定の値や結果を直接返したりするものではありません。これは、<link>要素に付与される単なる属性であり、ブラウザが将来必要になるかもしれないリソースを最適に準備するための指示や提案として機能します。ブラウザは、このヒントに基づいて、ネットワーク環境やユーザー設定などを考慮し、リソースのプリフェッチを行うかどうかを判断します。この機能は、特にユーザーが次に遷移する可能性が高いページや、利用する可能性のある重いリソースがある場合に効果を発揮します。
prefetchは、ユーザーの次の操作が予測できる際に、そのリソースを事前に読み込むようブラウザに「ヒント」を与えるものです。これにより、ユーザーが実際にそのリソースにアクセスした際の表示速度が向上し、ユーザー体験がスムーズになります。ただし、prefetchはあくまでブラウザへのヒントであり、ブラウザはユーザーのネットワーク状況やリソース状況などを考慮して、実際に事前読み込みを行うか判断しますので、必ず実行されるとは限りません。過度な利用は、不必要なデータ通信量の消費やサーバーへの負荷につながる可能性があります。そのため、本当に必要性が高く、次にアクセスする可能性が高いリソースに限定して利用することが重要です。