DNSプリフェッチで読み込み速度が上がるか試してみた

ブラウザの機能として、先に特定のドメインの名前解決を行うことで読み込みを速くするする、と言う DNS prefetchという機能をちょっと試してみました。

dns-prefetch
サイトで必要なドメインを探す
実装してみる
試した結果
まとめ

dns-prefetch

外部スクリプトを読み込もうとすると、まずそのスクリプトのドメインを探して見つける名前解決(DNSルックアップ)と言う作業が行われます。

これが実際に読み込む前にちょっと時間がかかる作業で、色々なドメインから読み込もうとすると結構な時間になります。

これをページを読み込む最初のほうで名前解決だけやってしまって、実際にスクリプトを読み込む時にはこの部分をスキップしてダイレクトにアクセス出来るようにする、と言うのが DNS prefetchの機能です。

名前解決自体は非同期に出来るので、特に順序どおりに読み込まないといけない様なスクリプトがたくさんある場合、名前解決だけを先に同時にしてしまえば速く読み込める事になります。

サイトで必要なドメインを探す

必要なドメインとして、自分まとめて読み込んでる様なものをは見たら分かりますが、自分で入れたものでも色々な所に埋め込まれてるものとか、さらにスクリプトの中から他のドメインを呼んでる様な場合には結構リストを作るのが大変です。

ただ、世の中にはそんなものを解決してくれる便利なツールがいくらでもあって、 dns-prefetch Online Code Generator とかを使うと自分のサイトで使ってる物のリストをHTMLの形式で作ってくれます。

<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//www.google.com" />
...

みたいな感じ。

実装してみる

これをなるべく速い段階で読み込んでおくべきなので、 <head>の中の文字コード指定のすぐしたとかに書きます。

<head>
  <meta charset="utf-8">
  <link rel="dns-prefetch" href="//www.google-analytics.com" />
  <link rel="dns-prefetch" href="//ajax.googleapis.com" />
  <link rel="dns-prefetch" href="//www.google.com" />
    ...