Webプリレンダリング（prerender）によるWebアクセスの高速化効果
WebアクセスにおけるUX向上施策
Webアクセスするにあたって、Webページにアクセスしてから表示完了するまでの速度が速いほうがいいのは言うまでもありません。
（厳密に言うとどの時点を表示完了とするのか？など、考えなければならないことはもう少しありますがここではもう少し表面的なハナシとして）
その速度を向上するための施策にはいろいろとあります。その全ては紹介しきれないので、本記事ではHTMLのタグ内で実施できる施策をいくつか紹介し、その内の1つの方法で実際にどのくらいの効果が出るのかを紹介したいと思います。
linkタグにおけるUX向上
HTMLのlinkタグには、Webアクセス時のUXを向上できる仕様が規定されています。
下記の3つです。
- prerender：
指定したWebサイトをバックグラウンドで事前に取得（キャッシュ）します。- prefetch：
指定したWebサイトの指定したリソース（画像、cssやJavaScriptなど）をバックグラウンドで事前にキャッシュします。- dns-prefetch：
指定したWebサイトのURLをバックグラウンドで事前にDNSアクセスでアドレス解決しておきます。
書式はそれぞれ以下の通り。
- prerender
<link rel="prerender" href="http://example.com/nextpage.html" />- prefetch
<link rel="prefetch" href="http://example.com/style.css" />- dns-prefetch
<link rel="dns-prefetch" href="http://example.com/"/>
検証方法
今回は、上記のうちのprerenderを使ったときの効果の検証を実施しましたので、その結果を紹介します。
検証の条件は以下。
- AWS上に、90個の画像が配置されている（ファイルの多い）Webサイトを構築
- 一つのトップページからプリレンダーあり/なしのそれぞれのページに遷移
- リンクボタンクリックから全ての画像が表示されるまでの時間をNavigation timing APIを使ってms単位で取得
検証結果
上記を、3G / LTE / Wi-Fi(ADSL)の3種類のアクセスラインでそれぞれ20回ずつ計測し、平均値を取ってみました。（プリレンダー有無×3アクセスラインで6種類の平均値が出てきます）
単位はms（ミリセック：1/1000秒）です。
| 3G | Wi-Fi(ADSL) | ||||
|---|---|---|---|---|---|
| prerender あり | prerender なし | prerender あり | prerender なし | prerender あり | prerender なし |
| 374 | 8431 | 353 | 1984 | 300 | 3457 |
いずれの場合も、prerenderありの場合はキャッシュに入っているコンテンツを読み出すだけなので350ms前後となっています。体感的にもパッと表示され、相当早いです。
対して、prerenderなしの場合は、各アクセスラインの帯域スペックに概ね比例した感じの時間がかかっていて、prerenderありの場合の5～20倍ほどの時間がかかっています。画像がパラパラと表示されていくのが見ててわかります。
まとめ
WebアクセスのUXを向上する施策としてHTMLタグ内への記載で対応できる方法を紹介し、その効果を検証してみたところ、明らかの効果を確認することができました。
ただ、この効果の代償としてネットワークへ負荷を高めてしまうという課題があります。また、モバイルを前提にすると、パケット利用量が増えてしまうというのも課題です。
長い記事で記事が数ページに分かれているようなケースでは次のページに行くのはほぼ確実であると見込めるので、prerenderを仕掛けておくというのはありだと思いますが、UXとネットワーク負荷/パケット利用量増のバランスを考えて使う必要があります。
