3/3 次ページや共通ファイルを先読みさせて体感速度を向上 [ホームページ作成] All About

後から利用されるファイルを先読みするプリフェッチ機能の記述方法

後から読み込まれる可能性の高いファイルが分かっているなら、HTMLのhead要素内に、以下の1行を記述しておきましょう。

<link rel="prefetch" href="style.css">

link要素のrel属性値に「prefetch」を指定し、href属性値に先読みしたいファイルのURLを記述します(上記では「style.css」)。先読みしたいファイルが複数個あるなら、下記のように必要なだけlink要素を列挙できます。

<link rel="prefetch" href="/common/style.css">
<link rel="prefetch" href="/common/navi.js">
<link rel="prefetch" href="/common/banner.png">

重たいファイルや、読み込まれる可能性の高いファイルから先に記述しておくと良いでしょう。

プリフェッチの制約

link要素を使ったプリフェッチの指示(＝事前にファイルを読み込んでおく処理)は、IE11やChrome、Firefoxなどで使えます。プリフェッチの指定には、以下の仕様があります。

■先読みできる個数
どれくらいの個数まで先読みしてくれるかは、ブラウザやユーザの環境次第です。IE11では、最大で10個のファイルまで先読みが可能です。それを超える指定は無視されます。

■対象外のファイル
「?query=ABC」のような、クエリ文字列付きのURLが指定されている場合は先読みされません。また、HTTPではなくHTTPSが使われている場合も先読みされません。(Firefoxの場合)

先読み(プリフェッチ・プリレンダリング)のデメリット

後から必要になるファイルを、余っている待機時間で読み込むことができれば、体感表示速度を向上させられるメリットがあります。しかし、閲覧者がそのファイルを必要としなければ、通信が無駄になるだけです。あくまでも「先に読んでおく」だけであって、通信速度が向上するわけではありません。閲覧者側にもサーバ側にも、通常と同じ通信量が発生します。

ブラウザは、現在表示中のページをすべて読み終わった後になってから、「先読み」に指定されたファイルをダウンロードし始めます。ですから、「先読み」指定のせいで、現在表示中のページの表示速度が低下することはありません。しかし、それは「そのブラウザ」に限った話です。もし、ブラウザの他にも通信するソフトが起動している場合(または2つ以上の異なるブラウザを同時に起動して併用している場合など)では、「先読み」処理のせいで、もう片方のソフトの通信速度が落ちてしまう可能性はあります。

上記の仕様も考慮して、先読みに指定するファイルは、後で読まれる可能性の高いものだけに限定しておく方が良いでしょう。

ファイルの先読みで体感の表示速度を向上させる方法

今回は、「次のページ」や「後で必要なファイル」を先読みさせる、プリレンダリング機能・プリフェッチ機能の指定方法をご紹介致しました。方法は、先読みさせたいURLをlink要素のhref属性に記述するだけの簡単なものです。未対応ブラウザでは単に無視されるだけで悪影響はありませんから、先読みさせておくと有用なファイルがあるなら、指定しておくと良いでしょう。表示の体感速度を向上させ、閲覧者の待ち時間を軽減させる方法として、ぜひ試してみて下さい。

【関連記事】