DNSプリフェッチでWebサイトを高速化

このドキュメントの内容は、以下の通りです。

• はじめに
• DNS プリフェッチ
• ソースコード
• 無効にする

はじめに

Webサイトのパフォーマンスチューニングには、さまざまな手法があります。

Webサイトは、多くの場合、複数のドメインからデータが提供されます。
たとえば、Twitter, Google や Facbook などのソーシャルプラグインが挙げられます。
Googleからは、Web広告が提供されます。

外部コンテンツの増加に従って、Webサイトのパフォーマンスが劣化していきます。
今回は、DNS プリフェッチ(DNS prefetching)によってパフォーマンスを改善します。

DNS プリフェッチ

DNS プリフェッチは、Webサイトのドキュメントに含まれるアンカーや画像、CSS、JavaScriptが参照している外部リソースに対して、あらかじめドメインの名前解決を行います。

ブラウザの実装によってことなることですが、ページコンテンツの取得と平行してDNS名前解決が行われます。
DNSの名前解決は、必要な帯域幅は小さいものですが、名前解決は多少の時間を必要とします。モバイル環境では、名前解決の待ち時間が大きな影響を及ぼします。

ブラウザの設定やWebサーバのレスポンスヘッダで、DNSプリフェッチに関する設定を行うことができますが、この記事では割愛します。

ソースコード

Webサイトに下記のソースコードを追加することで、ブラウザにDNSプリフェッチを行わせることができます。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="http://b.hatena.ne.jp">
<link rel="dns-prefetch" href="http://d.hatena.ne.jp">
<link rel="dns-prefetch" href="http://www.facebook.com">
<link rel="dns-prefetch" href="http://twitter.com">

Firefoxのデフォルトでは、HTTPSは解決されないようです。

無効にする

無効にするには、下記の命令をWebサイトに書きます。

<meta http-equiv="x-dns-prefetch-control" content="on">

---