少ない手間でそのWebページに適した手法で表示高速化ができるResource Hintsがすごい｜コラム

Resource Hintsがすごい

普段ユーザがインターネットを使って様々な検索や買い物をする際に、気にすることはいろいろあります。お目当ての情報が載っているか、欲しい商品があるか、綺麗なデザインか、etc……

しかし、それ以前にユーザに対しもっと影響力のある要素があります。それがWebページの表示速度です。

たとえお目当てのWebページに辿り着いたとしても、そのページが実際に表示されるまでに10秒もかかっていたら、どんなに良いデザインでも優れたコンテンツでもユーザは遅い、重いと感じてしまい、印象は悪くなってしまいます。

そこで、今回はWebページの表示速度を改善することが出来る手法について紹介したいと思います。表示速度高速化の技術は多岐にわたりますが、今回私が紹介するのは、Resource Hints API（以下、Resource Hints）についてです。

Resource Hints とは

Resource Hintsとは、dns-prefetch、preconnect、prefetch、prerenderの4つの要素から構成されます。それぞれが持つ機能に違いはありますが、共通していることは、リソースを事前に読み込んでおくことでページ遷移時のパフォーマンスを向上させるという点です。詳しくは後述しますが、これら4つの機能はリンクタグ<link>で使用されます。

prefetch、prerenderは、リンクタグを入れたページの高速化につながるのではなく、そのページから遷移するページの表示高速化に役立ちます。それを活かした用途の例としては、以下のようなものがあります。

ユーザのマイページに遷移することが予想されるログインページで使用し、マイページで使われるリソースを事前に取得しておく
フォームページなどにおいて、最終確認画面で必要なリソースを事前に取得しておく

以上を念頭においた上で、Resource Hintsについて掘り下げていきます。

今回は細かい機能ではなく、どういった理由で早くなるのか、どういった観点で使い分ければいいのかなどを説明していきたいと思います。実際にページを検証する例も紹介するので、ぜひこれを機に調べられるようになってもらえたらと思います。

dns-prefetch

外部サイトからリソースを取得する際は、DNSルックアップというドメイン名からIPアドレスを調べる作業が発生しています。これを予め行っておくことで遷移時の処理をできるだけ省略しようという機能です。PCではほとんどのブラウザでサポートされています。スマートフォンではサポートされていない場合があります。※2018年8月16日現在
ブラウザサポート状況はこちら

preconnect

DNSルックアップに加えて、connect(TCPハンドシェイク、TLSネゴシエーション等)まで事前に処理します。IE11以外のブラウザではサポートされています。※2018年8月16日現在
ブラウザサポート状況はこちら

prefetch

予めリソースをダウンロードしてキャッシュに格納します。前2つは通信の確立を行っていましたが、こちらは画像やCSSのようなリソースを取得します。as属性で取得するリソースに応じてコンテキストを指定することができ、それによってブラウザは最適なプロセスでリソースを取得します。リソースのサイズが大きかったり、ネットワーク速度が遅かったりする場合ブラウザはprefetchを行いません。Safari以外のブラウザではサポートされています。※2018年8月16日現在
ブラウザサポート状況はこちら

prerender

prefetchと違い、指定リンク先のページをダウンロード、DOM構築、JavaScriptの実行などまで行います。
イメージとしては、不可視のタブでページを先に開いているような感覚です。このときCSSの適用やJavaScriptの実行も行われるため、アクセス前なのに解析ビーコンが反応したり、CSSのアニメーションが動いてしまい、遷移したときには終わった状態になってしまう可能性があります。その場合は Page Visibility API などで対策する必要があります。
※Google Analyticsはprerenderでは反応しません

リソースのサイズが大きかったり、ネットワーク速度が遅かったりする場合はprefetch同様、ブラウザはprerenderを行いません。また、他と違いprerenderは一つしか指定できません。ChromeとIE11でサポートされています。スマートフォンではChromeが対応しています。※2018年8月16日現在
ブラウザサポート状況はこちら

prerenderは比較的身近で、例えばGoogleでなにか検索したとき、検索結果のトップ1つ目はprerenderされています。
Chromeのメニューから「その他のツール」→「タスクマネージャ」で確認ができます。

また、これは前述のprefetchにも同様のことが言えますが、大きなファイルを事前取得するため効果が大きい分、もしユーザがそのページに移動しなかった場合その通信は無駄になってしまい、ユーザに必要のない通信をさせてしまうことに繋がるため、注意が必要です。

prerender

リソース取得にかかっている時間を調べる

さて、ここまで紹介してきましたが、どのように使用すればいいのかがわからないと思います。
そこで、ページを検証しながら実際に通信のどの部分をターゲットとして、高速化を狙っていくのかを考えていきたいと思います。

リソースの取得がどのタイミングで行われていて、どれだけ時間がかかっているのかはChrome Developer Toolsでも確認できますが、数回アクセスしてデータを複数出すことで実際の挙動に近い計測が可能であったり、Chrome Developer Toolsでは表示されないことがあるブロックされているリソースも確認することができるwebpagetestなどで確認します。

細かい見方は省略します。webpagetestについて、詳しくはこちらが参考になりますので読んでみてください。

今回はDetailsタブのウォーターフォールとDomainsタブを確認します。
ウォーターフォールでリソースの取得に時間がかかっているものを確認します。

取得に時間のかかるリソースとして真っ先に思いつくのは画像やJavaScriptファイルですが、それらすべてを事前に取得しておくというのはあまりおすすめできません。

理由としては

画像やJavaScriptなどのリソースはprefetchを使うことになるが、Safariがサポート外になる
画像リソースなどを取得しておくということはそれなりに大きい通信をバックグラウンドで走らせることになる
もしそのページにユーザが遷移しなかった場合、その通信が無駄になる

等が挙げられます。

つまり、サポート範囲が広く、それほど大容量の通信でもないものの中で、改善することで表示高速化に大きく起因するものをターゲットにするべきです。

そういった観点で見ると、下図のようにTwitterやGoogleなどのドメインでDNSルックアップに時間が取られている事がわかります。

webpagetestで見たネットワークウォーターフォール

https://www.webpagetest.org/

これらは多くの場合ソーシャルボタンによるもので、FacebookのいいねボタンやGoogleの＋1ボタンはそれ単体で複数のドメインと通信していることが多いです。

そのため、ソーシャルボタンを多く設置している場合はDNSルックアップだけでかなりの時間を使用していることになります。
更に今回で言えばその次の段階のTLSネゴシエーションにも時間がかかっているため、preconnectも有効であることがわかります。

時間がかかっているリソースをどこから取得しているのか調べる

ここまでの調査で、dns-prefetch,preconnectを用いれば速度改善が見込めそうだというところまでわかりました。
それでは実際にどのドメインに対して事前取得を行えばいいのかというのを、webpagetestのDomainsタブで確認します。

webpagetestで見る通信しているドメイン

https://www.webpagetest.org/

ここでどのドメインにどれだけのリクエストがあるのかを確認できます。左はリクエスト数で、そのドメインに対してどれだけのリクエストがあるかを示しています。右は大きさで、ドメインに対するリクエストの合計データ量が示されています。Google,Twitter,Facebookはやはり上位にいることがわかります。その他にも効果がありそうなドメインをいくつか抽出し、最後はそれらに対してResource Hintsの記述を行えば完了となります。

クライアント側の状況（メモリやCPU、ネットワーク使用状況）によって実行が決定されるので、必ずしもリソースの先読みが行われるとは限りません。

ただその効果は十分実用的であり、一つ一つのリソース先読みで短縮できるのは良いときで0.5s~1.0s程度ですが、その数が増えれば増えるほどその効果は大きくなります。実際に大手のサイトにアクセスした際にSNSボタンだけしばらく表示されず遅れて表示されていたり、ソーシャル関係のツールがページの大部分を占めているのに読み込みに時間がかかるせいでデザイン性を損ねている場合などあると思いますが、そういう場面では抜群の効果を示すと考えられます。（対象ページのDNSルックアップやconnectなどにどれだけ時間がかかっているかに左右されます）

例：dns-prefetchの設定
<head>
<!– DNS プリフェッチの設定 –>
<link rel=”dns-prefetch” href=”//apis.google.com”>/
<link rel=”dns-prefetch” href=”//platform.twitter.com”>/
<link rel=”dns-prefetch” href=”//connect.facebook.net”>/
<link rel=”dns-prefetch” href=”//www.facebook.com”>/
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>
</head>

ちなみに、方法としてはheadタグにdns-prefetchを羅列していく方法でもいいですが、リンクタグさえ挿入できればいいので、JavaScriptでまとめて挿入することも出来ます。
参考：http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/