rcmdnk's blog

Prefetch Input Queue

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

Sponsored Links

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>の中の文字コード指定のすぐしたとかに書きます。

1
2
3
4
5
6
<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" />
    ...

試した結果

WebPagetest で見てみると

という感じになってます。 中のFirst Viewの方で、各列の一番左の濃い緑のDNS Looupが、 各行で設定前は全て次のオレンジ色のInitial Connectionと繋がってますが、 設定後はところどころ濃い緑だけが離れて先に行われてるのがわかると思います。

ただ、全体の読み込み時間としては4.1秒から5.0秒へ伸びてしまっています。 上にある評価もFirst Byte TimeがAからDへ。。。 (Compress Imagesが何故かDからCになってますがこの辺は単に ランダムに呼ばれる物がたまたま重かったり軽かったりしただけかもしれません。)

PageSpeedInsightでもちょっと悪くなる感じ(モバイルが80から77へ)でした。

まとめ

やってみた感じでは適当にやるだけでは劇的に速くなることは無いし、 むしろ遅くなってしまうと言う感じ。

多分、今のブラウザは賢くなってるので余計な事はしない方が良い、ということだと思います。

DNS prefetchな話も、探してみるとここ3,4年前の話が殆どで 1、 最近のものは余り見かけなかったのでそういうものなのかもしれません。

最近、

HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log

と言った話もあって、 rel="preload"で スクリプトとかそのものをprefetechしてしまう様な機能が追加される、 という話もありました。

こういうのも色々と沢山読み込んでる所で 上手く使えば速くなるのかもしれませんが、 ブログ程度なら余計な事をせずにまず要らない物を外す、と言った事のほうが大事だな、と思った今日このごろです。

Sponsored Links
Sponsored Links