【事例付き】X-DNS-Prefetch-Control ヘッダーで Web サイトのパフォーマンスを改善した方法

X-DNS-Prefetch-Control は、HTTP レスポンスヘッダーの一つで、ブラウザが DNS プリフェッチ を実行するかどうかを制御します。DNS プリフェッチとは、ブラウザがユーザーがクリックする可能性のあるリンクや、Web ページで参照されるリソース (画像、CSS、JavaScript など) のドメイン名解決を事前に実行する機能です。

このヘッダーを使用すると、Web サイトのパフォーマンスを向上させ、ページの読み込み時間を短縮することができます。これは、ブラウザがユーザーが次にアクセスする可能性のあるページに必要なリソースの DNS ルックアップを事前に実行することで実現します。

構文

X-DNS-Prefetch-Control ヘッダーの構文は次のとおりです。

X-DNS-Prefetch-Control: [directive]

許可されるディレクティブは次のとおりです。

off
DNS プリフェッチを無効にします。
on
DNS プリフェッチを有効にします。これはデフォルトの動作です。

例

次の例は、DNS プリフェッチを有効にする X-DNS-Prefetch-Control ヘッダーを示しています。

X-DNS-Prefetch-Control: on

次の例は、特定のドメインに対する DNS プリフェッチを無効にする meta 要素を示しています。

<meta http-equiv="X-DNS-Prefetch-Control" content="no-prefetch, example.com">

使用方法

X-DNS-Prefetch-Control ヘッダーは、Web サーバーの設定で設定できます。また、meta 要素を使用して個々のページで設定することもできます。

利点

X-DNS-Prefetch-Control ヘッダーを使用する利点は次のとおりです。

ユーザーエクスペリエンスの向上
ページの読み込み時間が短縮されることで、ユーザーエクスペリエンスが向上します。
パフォーマンスの向上
特に、多くの外部リソースを必要とする Web サイトの場合、パフォーマンスが向上します。
ページの読み込み時間の短縮
ブラウザが事前に DNS ルックアップを実行することで、ユーザーが次にアクセスする可能性のあるページの読み込み時間を短縮できます。

注意点

X-DNS-Prefetch-Control ヘッダーを使用する際には、次の点に注意する必要があります。

プライバシーへの影響
このヘッダーは、ユーザーがアクセスした Web サイトに関する情報をサーバーに送信するため、プライバシーへの影響が懸念されています。
悪用される可能性がある
このヘッダーは、悪意のある Web サイトによってユーザーを追跡するために悪用される可能性があります。
すべてのブラウザが対応しているわけではない
一部の古いブラウザは、このヘッダーをサポートしていない場合があります。

サーバー側で DNS プリフェッチを有効にする

次のコードは、Apache Web サーバーの .htaccess ファイルで DNS プリフェッチを有効にする方法を示しています。

Header always set X-DNS-Prefetch-Control: on

特定のドメインに対する DNS プリフェッチを無効にする

次のコードは、特定のドメイン (example.com) に対する DNS プリフェッチを無効にする meta 要素を示しています。

<meta http-equiv="X-DNS-Prefetch-Control" content="no-prefetch, example.com">

JavaScriptを使用して動的に DNS プリフェッチを制御する

次のコードは、JavaScriptを使用して動的に DNS プリフェッチを制御する方法を示しています。

const prefetch = (url) => {
  if (!url) return;
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = url;
  document.head.appendChild(link);
};

// 特定のドメインへのリンクをクリックしたときに DNS プリフェッチを実行する
const links = document.querySelectorAll('a[href*="example.com"]');
links.forEach((link) => {
  link.addEventListener('click', () => {
    prefetch(link.href);
  });
});

このコードは、example.com ドメインへのリンクがクリックされたときに、そのドメインに対する DNS プリフェッチを実行します。

このヘッダーを使用する前に、その利点と欠点を比較検討することが重要です。
X-DNS-Prefetch-Control ヘッダーをすべての状況で使用できるわけではないことに注意してください。
上記のコード例はほんの一例であり、ニーズに合わせて調整する必要があります。

X-DNS-Prefetch-Control ヘッダーは、ブラウザが DNS プリフェッチを実行するかどうかを制御するために使用されます。しかし、このヘッダーにはいくつかの欠点があり、すべての状況で使用できるわけではありません。

X-DNS-Prefetch-Control の代替方法として、以下の方法が考えられます。

ブラウザの設定
一部のブラウザでは、DNS プリフェッチを完全に無効にする設定を提供しています。これは、プライバシーが懸念される場合に役立ちます。
HTTP/2 のサーバープッシュ
HTTP/2 では、サーバーがブラウザにリソースをプッシュして、DNS ルックアップを事前に行うことができます。これは、X-DNS-Prefetch-Control ヘッダーよりも効率的な方法ですが、HTTP/2 をサポートするブラウザとサーバーが必要となります。
Link rel="dns-prefetch" 属性
この属性を使用して、個々のリンクの DNS プリフェッチを指定できます。この方法は、よりきめ細かな制御が必要な場合に役立ちます。

各代替手段の詳細

Link rel="dns-prefetch" 属性

<link> 要素の rel 属性に dns-prefetch を指定することで、個々のリンクの DNS プリフェッチを指定できます。

<link rel="dns-prefetch" href="https://www-example-com.cdn.ampproject.org/c/s/www.example.com">

この例では、example.com ドメインに対する DNS プリフェッチが実行されます。

この方法は、X-DNS-Prefetch-Control ヘッダーよりもきめ細かな制御を提供します。これは、特定のページで必要なリソースのみをプリフェッチしたい場合に役立ちます。

HTTP/2 のサーバープッシュ

HTTP/2 では、サーバーが PUSH_PROMISES フレームを使用してブラウザにリソースをプッシュできます。これにより、ブラウザはリソースを要求する前に DNS ルックアップを実行できます。

サーバープッシュは、X-DNS-Prefetch-Control ヘッダーよりも効率的な方法ですが、HTTP/2 をサポートするブラウザとサーバーが必要となります。

一部のブラウザでは、DNS プリフェッチを完全に無効にする設定を提供しています。これは、プライバシーが懸念される場合に役立ちます。

Chrome
chrome://flags/#enable-async-dns ページに移動し、Async DNS フラグを Disabled に設定します。
Firefox
about:config ページに移動し、network.dns.disablePrefetch 設定を true に設定します。

どの代替手段を選択すべきか

どの代替手段を選択するかは、ニーズによって異なります。

プライバシーが懸念される場合は、ブラウザの設定で DNS プリフェッチを無効にします。
**効率的な方法が必要な場合は、HTTP/2 のサーバープッシュを使用します (ただし、HTTP/2 をサポートするブラウザとサーバーが必要となります)。
**きめ細かな制御が必要な場合は、Link rel="dns-prefetch" 属性を使用します。