DNSプリフェッチでウェブページの読み込み速度をスピードアップ

[対象: 上級]

この記事では、「DNSプリフェッチ」という仕組みを利用してウェブページの表示速度を高速化する方法を解説します。

DNSプリフェッチとは

上級者向けの記事なのでDNSが何かの説明は省きます。

DNSプリフェッチを利用すると、外部ドメイン名（ホスト名）の名前解決（DNSルックアップ）を事前に強制できます。
ユーザー（ブラウザ）がそのドメインにアクセスする前にすでに名前解決が完了しているので、読み込み時間の短縮を図ることができるのです。

DNSの名前解決にかかる時間は平均して200ミリ秒とわずかですが、モバイル回線では無視できる長さではないかもしれません。
またときとして1秒以上かかることもあり、遅延による表示速度の低下の防止に役立てられます。

DNSプリフェッチは、ページの読み込みと同時に実行されまたCPUやネットワークへの負荷が低いため、そのほかの処理を遅らせてしまう心配もほとんどありません。

なお名前解決した情報はOSにキャッシュされるので、DNSプリフェッチはまだアクセスしていない（キャッシュが残っていない）ドメイン名への通信に対して有効です。

DNSプリフェッチは、たとえば次のような状況で特に役立ちそうです。

• 外部ドメインへの参照リンクがたくさんある −− まとめ記事なんかが該当しそうです。ソーシャルメディアのボタンをいくつもを設置している時も効果がありそうです。
• リダイレクトしている −− クリックの計測など何らかの理由でいったん内部のリンクにアクセスさせてから対象の外部ドメインへリダイレクトすることがあります。このとき、リダイレクト先のドメイン名の名前解決をプリフェッチしておくことができます。

そのほかにも使用ケースは考えられるでしょう。

2つ目の例でわかるように、DNSプリフェッチはそのドメイン名のURLがリンク（aタグ）として存在している必要はありません。
任意のドメイン名の名前解決を強制できます。

DNSプリフェッチの設定方法

特定のホスト名に対するDNSプリフェッチを実装する方法を説明します。

「link rel=”dns-prefetch”」を使います。
具体的にはheadセクションに次のコードを挿入します。

<link rel="dns-prefetch" href="http://www.example.com/" />
「www.example.com」はプリフェッチさせたいドメイン名（正確にはホスト名）と置き換える。

「http:」を省略することができます。
言い換えると、「//」から始められます。

<link rel="dns-prefetch" href="//www.example.com/" />

必要な分だけheadセクションに挿入しておきます。

なお、HTTPSページのDNSプリフェッチはできません。

また、ChromeとFirefox、OperaはDNSプリフェッチをサポートしています。
Internet Explorerも10以降であればサポートしているようです。

以前に紹介した事前レンダリングと同様に、劇的なスピードアップをDNSプリフェッチによって実現できるわけではないしどの環境でも役立つわけではありません。
それでも利用できる状況が見つかれば、ユーザーエクスペリエンス向上のために採用してみましょう。

DNSプリフェッチに関するより詳しい情報はこちらが参考になります。

• DNS Prefetching – The Chromium Projects
• DNS プリフェッチの制御 | MDN
• ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得 | ゆっくりと…

P.S.
ちなみに僕がDNSプリフェッチを知ったきっかけはGoogleのヘルプページです。
ソースコードに見慣れないタグが入っていたのを見つけて調べました（普通はソースなんて見ない？w）。
Googleはウェブの高速化を推奨しているだけあって、自分たちでもさまざまな技術を利用していますね。