「次のページ」や「後で必要なファイル」を先読みさせ、体感表示速度を向上
先読みで体感表示速度を向上
当サイト(All About)には、複数のページで構成されている記事が多数あります。今「1ページ目」を閲覧している読者は、次に「2ページ目」へ進む可能性が高いでしょう。その場合、「閲覧者が1ページ目を読んでいる間」に「次の2ページ目を先読み(プリレンダリング)」しておけば、次のページを表示する待ち時間を短縮できます。
■後で必要になる可能性の高いファイルとは
「トップページ」と「奥のページ」とでデザインが異なるサイトがよくあります。この場合、「トップページ」用のCSSや画像と、「奥のページ」用のCSSや画像は別々であることもあるでしょう。その場合、「閲覧者がトップページを見ている間」に、「奥のページで共通して利用されるCSSや画像を先読み(プリフェッチ)」しておけば、次に移動するページの表示にかかる時間を短縮できます。
ダウンロード速度は向上しなくても、待ち時間は減らせる「先読み」
「現在表示しているページ」の読み込みが完了しても、閲覧者はすぐに次のページへ移動するとは限りません。ページの内容を読むのに時間が必要だからです。このとき、ブラウザには「何もダウンロードせずにユーザの操作を待っている」という無駄な時間があります。もし、「次に表示される可能性の高いページ」や、「後で読み込まれる可能性の高いファイル」が分かっている場合には、このブラウザの待機時間を利用して先読みさせることで、次以降のページの読み込み待ち時間を短くできます。ウェブサーバからのダウンロード速度自体は変わらなくても、次以降のページを表示する体感速度は向上するわけです。
先読みの実現にスクリプトは不要。1行のHTMLを記述するだけ
このように「先読み」を実現できると、閲覧者のストレス(待ち時間)を軽減できる可能性が高まるため、とても便利です。この先読みの実現方法は簡単です。スクリプトなどを使う必要は一切ありません。HTMLのlink要素を使って、たった1行を書くだけで実現できます。本稿執筆時点ではブラウザのサポート状況に差があるため、どんなブラウザでも先読みできるわけではありません。しかし、未対応のブラウザでは単に指定が無視されるだけなので、特に悪影響はありません。ぜひ、試してみて下さい。
先読みのための2種類の方法：プリレンダリング機能とプリフェッチ機能
先読み機能には、下記に説明する「プリレンダリング」と「プリフェッチ」の2種類があります。どちらも、HTMLのlink要素を1行記述するだけで指定できますが、動作が若干異なります。■プリレンダリング(prerendering)機能
指定のウェブページを先読みした後、内部で描画処理も済ませておく機能が「プリレンダリング」です。HTMLを先に読み込んでおくだけでなく、そのレンダリング(描画)処理も背後で進めておくことで、次のページを表示するための待ち時間を短く(＝体感の表示速度を向上)できます。
記事のように数ページが連続している場合など、「次に読まれるページ」が明らかであれば、この「プリレンダリング」機能を使うことで、描画の待ち時間を軽減できるでしょう。
■プリフェッチ(prefetch)機能
後から読み込まれる可能性のあるファイルを事前に先読みしておく機能が「プリフェッチ」です。ウェブサイト内の一部のページで共通するファイル(画像やスクリプトなど)が存在するなら、それを事前に(実際に利用される前に)読み込んでおくことで、待ち時間を減らせます。
本記事では、これらの「プリレンダリング」機能・「プリフェッチ」機能の具体的な記述方法をご紹介致します。
それではまずは、プリレンダリングの記述方法から見ていきましょう。
