サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す

サイトの表示が遅いので、表示スピードを高速化する試行錯誤したり、他に方法はないかと調べていたら「Resource Hints(リソースヒント)」というのにたどり着きました。

Resource Hintsとは

  • DNS-Prefetch ... DNSルックアップで名前解決を事前に行う
  • Preconnect ... DNSルックアップと同時に事前接続をしておく
  • Prefetch ... JSやCSSを先読みして取得(Preloadというのもある)
  • Prerender ... 次に表示しそうなページを事前にレンダリングしておく

というものらしく以下のように<head>~</head>の間に書いておき、ページにアクセスがあったらページの表示と同時にAdSenseとかZenbackとか外部サイトの情報を事前に取得しておき、表示するときは予め取得しているので表示がサクッと済むというもののようです。

これを使えば速くなる?

実際に使ってみて結論から言うと、効果は大なり小なりありました。特にPrefetchFont-Aewsomeのフォントや、jQuery.jsAdSenseZenbackなどを使っている場合、あらかじめ使用する静的なJSやCSSがわかっている場合に限られますが、ページのHTMLを読み込んでいる間にそれらを事前に読み込むので、GTmetrixWarerfallChromeNetworkタブでダウンロードの流れを見ると、同時並行でダウンロードしているのがわかります。

Resource Hints 使用前

GTmetrixWarerfall

Resource Hints 使用後

GTmetrixWarerfall

DNS-PrefetchPreconnectDNSルックアップConnecting事前に終わらせることができるので、指定したコンテンツの読み込み時間は0msにすることができました。

Resource Hintsに関する参考ページ