次のページを先読みするプリレンダリング機能の記述方法
次に表示される可能性の高いページが分かっているなら、HTMLのhead要素内に、以下の1行を記述しておきましょう。<link rel="prerender" href="nextpage.html">link要素のrel属性値に「prerender」を指定し、href属性値に先読みしたいページのURLを記述します(上記の場合は「nextpage.html」)。この記述は1つだけに留めておきます。2つ以上書いた場合、(IE11では)後の指定だけが有効になります。
なお、前後のウェブページの存在を表す、以下の記述方法もあります。
<link rel="next" href="page3.html"> <link rel="prev" href="page1.html">上記の記述では、「次のページがpage3.html」であり、「前のページがpage1.html」であることを示せます。この記述方法は昔から使われていて、Movable TypeやWordPressのようなCMSツール(ブログツール)では標準で書き出されることも多いでしょう。最近では、モバイル端末等のページフリップ機能にも利用されます。この2行の記述の内、「rel="next"」を指定した方は、プリレンダリングの対象になります(少なくともIE11では)。
さて、先読みを指示する記述方法は上記の通りですが、いくつかの制約があります。また、先読みと事前描画が行われたとしても、条件によっては破棄されます。その点を以下でご紹介致します。
プリレンダリングの制約
link要素を使ったプリレンダリングの指示(＝事前にウェブページの読み込みと描画を行っておく処理)は、IE11やChrome30以降などのブラウザで使えます。プリレンダリングが実行されるためには、以下の条件があります(※IE11の場合)。■フレームの内部で読み込まれていない
プリレンダリングの指定を読んで実行されるのは、そのページがフレーム内部にはない場合のみです。iframeなどの内部で読み込まれている場合は、プリレンダリングの指定があっても無視されます。
■HTTP・HTTPSのみ(かつ、ファイルのダウンロードではない場合)
プロトコルとしてHTTPかHTTPSが使われていて、「ファイルのダウンロード」にはならない場合にのみ機能します。例えば、指定のURLにアクセスすると「ZIPファイルをダウンロードする」ようになっている場合は、プリレンダリングとして指定していても、ファイルはダウンロードされません。
※「プロトコルにHTTPが使われている」とは、URLとして表記した際に「http://」で始まることを指しています。しかし、link要素のhref属性値が「http://」で始まっている必要はありません。相対パスで「href="../folder/nextpage.html"」のように記述しても問題ありません。
■対象は1ページだけ
プリレンダリングが可能なのは1ページのみです。link要素を複数回記述して、プリレンダリング対象を複数個記述した場合は、最後の1つが採用されます。
■レンダリングが途中で停止する場合もある
プリレンダリング対象のページで、レンダリング(描画)中にJavaScriptなどでアラートが表示されたり、動画の自動再生が始まるような場合は、ブラウザ内部でのレンダリング処理は中断されます。閲覧者が実際にそのページにアクセスした際に、中断した位置からレンダリングが再開されます。
■レンダリング結果が破棄される場合もある
なお、プリレンダリング処理が完了していても、ユーザが5分以内にそのページを閲覧しなかった場合や、ユーザが異なるページへ移動した場合、ユーザが別のタブを開いた場合などには、プリレンダリングされた内容は破棄されます。
※上記に記述した制約は、すべてIE11での仕様です(参考情報)。ブラウザによって仕様は異なる可能性があります。
※Firefoxでは「rel="next"」を使った場合にはプリフェッチとして機能します。
次に、ページではなくファイルを先読みするプリフェッチ機能の記述方法を見ていきましょう。
