【HTML Living Standard】prerender属性値の使い方
prerender属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
prerender定数は、HTMLの<link>要素のrel属性に指定することで、次にユーザーがアクセスする可能性のあるWebページやリソースを、ブラウザがバックグラウンドで事前に読み込み、レンダリングすることを指示するキーワードを表す定数です。
この機能は、Webページのパフォーマンスを最適化し、ユーザーエクスペリエンスを向上させるために利用されます。具体的には、ユーザーが特定のリンクをクリックする前に、そのリンク先のページの内容（HTML、CSS、JavaScript、画像など）をあらかじめダウンロードし、表示準備を整えておくことができます。これにより、実際のページ遷移が発生した際に、読み込み待ち時間を大幅に短縮し、より速やかにコンテンツを表示することが可能になります。
prerenderを適切に利用することで、ウェブサイトのナビゲーションがよりスムーズになり、ユーザーは快適にウェブサイトを閲覧できるようになります。しかし、この機能はブラウザのリソース（ネットワーク帯域、CPU、メモリ）を消費するため、不必要に多くのページやリソースをprerenderすると、ユーザーのデバイスに過度な負荷をかけたり、無駄なデータ通信を引き起こしたりする可能性があります。そのため、実際にユーザーが次にアクセスする可能性が高いと予測されるページに対してのみ、慎重に適用することが推奨されます。現在では、Speculation Rules APIなど、より高度な事前読み込みメカニズムも登場していますが、prerenderはシンプルな事前読み込み指示として、依然として有効な手段の一つです。
構文(syntax)
1<link rel="prerender" href="next-page.html">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML prerenderでページを事前読み込みする
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>Prerender サンプルページ</title> 7 8 <!-- 9 prerender 属性は、ブラウザが指定されたリソース（通常は別のHTMLページ）を 10 バックグラウンドで事前にダウンロード、解析、描画することを指示します。 11 これにより、ユーザーがそのリソースにアクセスする際の表示速度が向上します。 12 例えば、次にユーザーがアクセスする可能性のあるページを高速化したい場合に使用します。 13 この例では、「next-page.html」が事前にロードされます。 14 --> 15 <link rel="prerender" href="next-page.html"> 16</head> 17<body> 18 <h1>Prerender 属性の基本サンプル</h1> 19 <p>このページは、次に訪問される可能性のある「next-page.html」を、</p> 20 <p><code><link rel="prerender" href="next-page.html"></code> を使用してバックグラウンドで事前に読み込んでいます。</p> 21 <p>これにより、<a href="next-page.html">次のページへ</a> のリンクをクリックした際の表示が高速化されることが期待されます。</p> 22</body> 23</html>
このサンプルコードは、HTMLの<link>タグにprerender属性を使用し、ウェブページの表示速度を向上させる方法を示しています。prerender属性は、ブラウザに対して、指定されたリソース（通常は別のHTMLページ）をバックグラウンドで事前にダウンロード、解析、さらには描画まで行うよう指示するものです。これにより、ユーザーが実際にそのリソースにアクセスした際に、瞬時に表示されるようになり、ページの読み込み体験が大幅に改善されます。
具体的には、<link rel="prerender" href="next-page.html">という記述により、next-page.htmlというファイルを現在のページを閲覧中に裏側で先行して読み込んでいます。これは、ユーザーが次にアクセスする可能性が高いページを予測し、そのページの表示を高速化したい場合に非常に有効な手法です。prerender属性自体は引数を取らず、特定の戻り値も持ちません。単にブラウザに事前処理を指示する役割を果たします。この機能は、ユーザーが次のアクションを起こす確率が高いリンク先ページなどで利用すると、ユーザーエクスペリエンスの向上に貢献します。
link rel="prerender" は、指定されたページをバックグラウンドで事前にダウンロード、解析、描画することで、ユーザーがそのページにアクセスする際の表示速度を向上させます。
この機能は、ネットワークやCPUなどのリソースを消費するため、次にアクセスされる可能性が非常に高いページに限定して利用することが重要です。無闇に多用すると、ユーザーのデバイスに負荷をかけたり、サーバーへのHTTPリクエストを不必要に増やし、サーバー負荷となる可能性があります。また、ブラウザやユーザー環境によってはサポートされていなかったり、期待するほどの高速化効果が得られない場合もありますので、導入後は効果を測定し、慎重に利用してください。
HTML prerender属性でページを高速表示する
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 Prerender Example</title> 7 <!-- 8 ブラウザに「/next-page.html」を事前にレンダリングするようヒントを与えます。 9 これにより、ユーザーがこのリンクをクリックした際に、より速くページが表示される可能性があります。 10 prerenderはユーザーのナビゲーションを予測し、バックグラウンドでリソースを準備します。 11 Viteなどのビルドツールやプラグインは、このようなパフォーマンス最適化のヒントを 12 ビルド時にHTMLに自動的に挿入するために使用されることがあります。 13 --> 14 <link rel="prerender" href="/next-page.html"> 15</head> 16<body> 17 <h1>Prerender属性のデモンストレーション</h1> 18 <p>このページは、<code>/next-page.html</code>を事前にレンダリングするようブラウザにヒントを与えています。</p> 19 <p>ブラウザがこのヒントを受け入れ実行した場合、以下のリンクをクリックすると、通常のナビゲーションよりも速くページが表示される可能性があります。</p> 20 <a href="/next-page.html">次のページへ移動</a> 21 22 <!-- 23 注記: 実際のPrerender機能の動作は、ブラウザの実装、ユーザーのネットワーク状況、 24 およびブラウザがリソースを事前にロードする必要があると判断したかどうかによって異なります。 25 常に機能するとは限りません。 26 --> 27</body> 28</html>
HTMLのprerenderは、ウェブページのパフォーマンスを向上させるための重要なヒントをブラウザに与える機能です。これは<link>タグのrel属性にprerenderを指定し、href属性で特定のURLを指すことで使用されます。
この属性の主な目的は、ユーザーが次に訪れる可能性のあるページを、バックグラウンドで事前にレンダリングしておくことです。具体的には、ブラウザは指定されたURLのリソース（HTML、CSS、JavaScriptなど）をダウンロードし、あたかもユーザーがそのページにアクセスしているかのように準備を始めます。これにより、ユーザーが実際にそのリンクをクリックした際に、通常のナビゲーションよりも遥かに速くページが表示される可能性が高まります。結果として、ユーザーは待ち時間を感じにくくなり、よりスムーズなウェブ体験を得られます。
prerender自体はブラウザに対する「ヒント」であるため、特定の引数を取ったり、何らかの戻り値を返したりするものではありません。ブラウザがこのヒントを受け入れるかどうかは、ユーザーのネットワーク状況やデバイスの性能、ブラウザの設定など、様々な要因によって判断されます。
vite plugin html prerenderのようなビルドツールのプラグインは、開発者が意図するパフォーマンス最適化のヒントを、アプリケーションのビルド時に自動的にHTMLへ挿入するために利用されることがあります。この機能は、特にユーザーの操作を予測しやすいウェブアプリケーションにおいて、効果的な高速化手法の一つとして活用されます。
prerenderは、ブラウザに次のページを事前に読み込んでおくよう「ヒント」を与えるものです。このヒントはブラウザの実装やユーザーのネットワーク状況、ブラウザの判断によって実行されるかどうかが決まるため、常にページが高速に表示されることを保証するわけではない点にご注意ください。これはユーザーがアクセスしそうなページを予測し、バックグラウンドでリソースを準備することで体感速度を向上させるためのパフォーマンス最適化の一つです。Viteなどのビルドツールでは、専用のプラグインを使ってこのようなヒントを自動的にHTMLに挿入し、開発者が意識せずとも最適化を図るケースもあります。