X-DNS-Prefetch-Control ヘッダーを設定して Web サイトのパフォーマンスを向上させる

X-DNS-Prefetch-Control ヘッダーの解説

X-DNS-Prefetch-Control ヘッダーは、ブラウザに DNS 先読み を実行するかどうかを指示する HTTP レスポンスヘッダーです。DNS 先読みとは、ユーザーがクリックする可能性のあるリンクや、ページ内で参照される画像、CSS、JavaScript などのリソースのドメイン名の解決を、事前に実行する機能です。

設定方法

このヘッダーは、Web サーバーの設定ファイルで設定できます。設定方法は、使用している Web サーバーによって異なりますが、一般的には以下の形式になります。

Header set X-DNS-Prefetch-Control <value>

<value> には、以下のいずれかを指定できます。

• on: DNS 先読みを有効にする

例

Header set X-DNS-Prefetch-Control on

この設定の場合、ブラウザはページ内のすべてのリンクとリソースの DNS 先読みを実行します。

メリット

DNS 先読みを有効にすると、ユーザーがリンクをクリックしたときや、ページが読み込まれるときの読み込み時間を短縮できます。これは、特にユーザーのインターネット接続速度が遅い場合に有効です。

デメリット

DNS 先読みを有効にすると、ユーザーのプライバシーが侵害される可能性があります。これは、ブラウザがページに記載されていないドメイン名の IP アドレスを事前に解決するためです。

注意事項

• すべてのブラウザが X-DNS-Prefetch-Control ヘッダーに対応しているわけではありません。
• DNS 先読みは、ユーザーのインターネット接続速度を遅くする可能性があります。

X-DNS-Prefetch-Control ヘッダーのサンプルコード

Nginx

location / {
  add_header X-DNS-Prefetch-Control on;
}

Apache

<IfModule mod_headers.c>
  Header set X-DNS-Prefetch-Control on
</IfModule>

Node.js (Express)

app.use(function(req, res, next) {
  res.setHeader('X-DNS-Prefetch-Control', 'on');
  next();
});

Python (Flask)

@app.route('/')
def index():
  return render_template('index.html', headers={'X-DNS-Prefetch-Control': 'on'})

PHP

<?php
header('X-DNS-Prefetch-Control: on');
?>

Ruby on Rails

# config/initializers/headers.rb

Rails.application.config.middleware.insert_before ActionDispatch::Static, Rack::Headers,
  'X-DNS-Prefetch-Control' => 'on'

Go (Gin)

router.Use(func(c *gin.Context) {
  c.Header('X-DNS-Prefetch-Control', 'on')
  c.Next()
})

Java (Spring Boot)

@Configuration
public class WebConfig {

  @Bean
  public WebMvcConfigurer webMvcConfigurer() {
    return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*");
      }

      @Override
      public void addHeaders(WebMvcConfigurer.HeadersBuilder builder) {
        builder.add("X-DNS-Prefetch-Control", "on");
      }
    };
  }
}

.htaccess

Header set X-DNS-Prefetch-Control on

注意事項

• 上記のコードはあくまでもサンプルであり、実際の使用環境に合わせて変更する必要があります。
• X-DNS-Prefetch-Control ヘッダーは、すべてのブラウザでサポートされているわけではありません。

X-DNS-Prefetch-Control ヘッダーを設定するその他の方法

ブラウザの設定

一部のブラウザでは、設定画面で DNS 先読みを有効または無効にすることができます。

• Firefox:
  • アドレスバーに about:config と入力します。
  • network.dns.disablePrefetch を検索します。
  • 値を false に設定します。
• Chrome:
  • アドレスバーに chrome://settings/privacy と入力します。
  • コンテンツのプリロード の下にある DNS のプリロード を有効にします。

HTTP/2 では、DNS 先読みがデフォルトで有効になっています。そのため、X-DNS-Prefetch-Control ヘッダーを設定する必要はありません。

CDN (Content Delivery Network) を使用している場合は、CDN の設定で DNS 先読みを有効にすることができます。

レコード

DNS レコードに prefetch 属性を設定することで、特定のドメイン名の DNS 先読みを指示できます。

example.com IN A 192.0.2.1
example.com IN PREFETCH 1

JavaScript を使用して、DNS 先読みをプログラム的に実行できます。

var dnsPrefetch = function(domain) {
  var link = document.createElement('link');
  link.rel = 'dns-prefetch';
  link.href = '//' + domain;
  document.head.appendChild(link);
};

dnsPrefetch('example.com');

これらの方法は、X-DNS-Prefetch-Control ヘッダーを設定する代替手段として使用できます。

注意事項

• 上記の方法を使用する場合は、各方法の注意事項を確認してください。