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

2024-04-02

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 先読みを有効にする
  • off: 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 ヘッダーを設定する代替手段として使用できます。

注意事項

  • 上記の方法を使用する場合は、各方法の注意事項を確認してください。
  • X-DNS-Prefetch-Control ヘッダーは、すべてのブラウザでサポートされているわけではありません。



X-Frame-Options ヘッダーの代替手段:CSP、JavaScript、メタタグなど

X-Frame-Options ヘッダーは、Web ページが別のページ(フレーム)内に表示されるのを制限する HTTP ヘッダーです。これは、悪意のあるサイトによる「クリックジャッキング」攻撃を防ぐために使用されます。クリックジャッキングとは、ユーザーの意図しない操作を誘発する攻撃です。攻撃者は、透明なフレームやiframeを使用して、ユーザーに見える場所に偽のボタンやリンクを重ねて表示します。ユーザーが本物のボタンやリンクをクリックしたと誤認して、意図せず個人情報を入力したり、不正な操作を実行してしまう可能性があります。




Feature-Policy: sync-xhr を使用する際の注意点

Feature-Policy: sync-xhr は、同期 XHR という特定の機能を制御します。同期 XHR は、JavaScript コードが応答を待機しながらサーバーと通信できる機能です。これは、一部の古い Web サイトやアプリケーションで必要とされますが、パフォーマンスやセキュリティの問題を引き起こす可能性もあります。


HSTS ヘッダーを設定するその他の方法:Cloudflare、Web アプリケーションフレームワーク

仕組みサーバーは HSTS ヘッダーをレスポンスに含めます。ブラウザは HSTS ヘッダーを受け取ると、一定期間 (max-age) はそのサイトへのアクセスを HTTPS 接続のみ許可します。期間内であれば、ブラウザは URL が HTTP であっても自動的に HTTPS に変換してアクセスします。


Feature-Policy: usb ヘッダーのサンプルコード

Feature-Policy: usb は、Webページが USB デバイスにアクセスすることを許可するか制御する HTTP ヘッダーです。これは、ユーザーのプライバシーとセキュリティを保護するために使用されます。設定方法Feature-Policy: usb ヘッダーは、以下の形式で設定できます。


Acceptヘッダーの代替方法:Content-Negotiation、クエリパラメータ、HTTPメソッド

Accept ヘッダーは、カンマ区切りのメディアタイプリストで構成されます。各メディアタイプは、次の形式で指定されます。例えば、次の Accept ヘッダーは、HTML、JSON、XML のいずれかを処理できることを示します。サーバーはこのリストを順番に処理し、クライアントが処理できる最初のメディアタイプを選択します。


Sec-CH-UA-Model ヘッダーの活用:ユーザーエクスペリエンスの向上

ユーザーエージェント文字列よりも詳細な情報を提供ブラウザベンダーとモデル名バージョン情報プラットフォーム情報ブランド情報 (一部のブラウザでは非公開)ユーザーのブラウザをより正確に特定より適切なコンテンツと機能を提供パフォーマンスの向上プライバシーの保護 (一部のブラウザではブランド情報が非公開)