読者です 読者をやめる 読者になる 読者になる

Webinar

Web関連情報のウェブセミナー

Webプリレンダリング(prerender)によるWebアクセスの高速化効果

html5

WebアクセスにおけるUX向上施策

Webアクセスするにあたって、Webページにアクセスしてから表示完了するまでの速度が速いほうがいいのは言うまでもありません。

(厳密に言うとどの時点を表示完了とするのか?など、考えなければならないことはもう少しありますがここではもう少し表面的なハナシとして)

 

その速度を向上するための施策にはいろいろとあります。その全ては紹介しきれないので、本記事ではHTMLのタグ内で実施できる施策をいくつか紹介し、その内の1つの方法で実際にどのくらいの効果が出るのかを紹介したいと思います。

 

linkタグにおけるUX向上

HTMLのlinkタグには、Webアクセス時のUXを向上できる仕様が規定されています。

下記の3つです。

  • prerender
    指定したWebサイトをバックグラウンドで事前に取得(キャッシュ)します。
  • prefetch
    指定したWebサイトの指定したリソース(画像、cssJavaScriptなど)をバックグラウンドで事前にキャッシュします。
  • dns-prefetch
    指定したWebサイトのURLをバックグラウンドで事前にDNSアクセスでアドレス解決しておきます。

 書式はそれぞれ以下の通り。

 

検証方法

今回は、上記のうちのprerenderを使ったときの効果の検証を実施しましたので、その結果を紹介します。

 

検証の条件は以下。

  • AWS上に、90個の画像が配置されている(ファイルの多い)Webサイトを構築
  • 一つのトップページからプリレンダーあり/なしのそれぞれのページに遷移
  • リンクボタンクリックから全ての画像が表示されるまでの時間をNavigation timing APIを使ってms単位で取得

 

検証結果

上記を、3G / LTE / Wi-Fi(ADSL)の3種類のアクセスラインでそれぞれ20回ずつ計測し、平均値を取ってみました。(プリレンダー有無×3アクセスラインで6種類の平均値が出てきます)

単位はms(ミリセック:1/1000秒)です。

3G

LTE

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とネットワーク負荷/パケット利用量増のバランスを考えて使う必要があります。