2026年5月20日

WordPressでHTTP/2を有効にする方法

SEO・パフォーマンス

はじめに

HTTP/2は1つの接続で複数のリソースを並行転送（多重化）できるプロトコルです。HTTP/1.1では1リクエストずつ処理していたのに対し、HTTP/2では複数のCSS・JS・画像を同時に転送でき、ページの読み込みを高速化します。HTTPS（SSL/TLS）が前提条件です。

症状・原因

PageSpeed Insightsで「HTTP/2を使用する」を推奨されている
リソース読み込みがキューに積み重なっている（Waterfallグラフで確認）
サーバーがHTTP/1.1のままになっている
SSLが設定されていないためHTTP/2が使えない

解決手順

ステップ1：現在のプロトコルを確認する

# curlでHTTPバージョンを確認
curl -I --http2 https://example.com/ 2>&1 | grep -i "HTTP/"
# HTTP/2 200  ← HTTP/2有効
# HTTP/1.1 200 OK ← HTTP/1.1のまま

# または verbose モードで詳細確認
curl -v --http2 https://example.com/ 2>&1 | grep -E "HTTP|protocol"

# OpenSSLでALPNプロトコルを確認
openssl s_client -connect example.com:443 -alpn h2 2>&1 | grep "ALPN"
# ALPN protocol: h2  ← HTTP/2対応

ステップ2：NginxでHTTP/2を有効化する

# /etc/nginx/sites-available/your-site.conf

server {
    listen 443 ssl http2;           # http2 を追加
    listen [::]:443 ssl http2;      # IPv6対応
    server_name example.com www.example.com;

    # SSL証明書（Let's Encryptの場合）
    ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    # TLS設定（HTTP/2はTLS1.2以上が必要）
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    # HSTS（一度HTTPSに接続したブラウザはHTTPSのみ使用）
    add_header Strict-Transport-Security "max-age=63072000" always;

    root /var/www/html;
    index index.php;
}

# HTTPをHTTPSにリダイレクト
server {
    listen 80;
    listen [::]:80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

ステップ3：ApacheでHTTP/2を有効化する

# HTTP/2モジュールを有効化（Ubuntu/Debian）
sudo a2enmod http2
sudo a2enmod ssl
sudo systemctl restart apache2

# /etc/apache2/sites-available/your-site.conf

<VirtualHost *:443>
    ServerName example.com
    Protocols h2 h2c http/1.1   # HTTP/2を優先

    SSLEngine on
    SSLCertificateFile    /etc/letsencrypt/live/example.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem

    # TLS設定
    SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1
    SSLCipherSuite ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256

    DocumentRoot /var/www/html
</VirtualHost>

ステップ4：Let’s EncryptでSSLを取得する

# Certbotのインストール（Ubuntu）
sudo apt install certbot python3-certbot-nginx

# SSL証明書の取得と自動設定（Nginx）
sudo certbot --nginx -d example.com -d www.example.com

# 手動取得（standalone）
sudo certbot certonly --standalone -d example.com

# 自動更新のテスト
sudo certbot renew --dry-run

# 自動更新はcrontabで設定済み（certbotが自動追加）
# 0 0,12 * * * certbot renew --quiet

ステップ5：WordPressでHTTP/2 Preloadを活用する

// functions.php

// Link: preloadヘッダーでリソースをプッシュ
function mytheme_add_preload_headers(): void {
    if (headers_sent()) {
        return;
    }

    $template_uri = get_template_directory_uri();

    // CSSをpreload
    header(
        'Link: <' . $template_uri . '/assets/css/style.min.css>; rel=preload; as=style',
        false
    );

    // メインJSをpreload
    header(
        'Link: <' . $template_uri . '/assets/js/main.min.js>; rel=preload; as=script',
        false
    );

    // ヒーロー画像をpreload（LCP対象）
    header(
        'Link: <' . $template_uri . '/assets/images/hero.webp>; rel=preload; as=image',
        false
    );
}
add_action('send_headers', 'mytheme_add_preload_headers');

// wp_head でもpreloadタグを出力（HTTP/2 Server Push非対応サーバー向け）
function mytheme_add_preload_tags(): void {
    $uri = get_template_directory_uri();
    echo '<link rel="preload" href="' . esc_url($uri . '/assets/css/style.min.css') . '" as="style">' . "\n";
    echo '<link rel="preload" href="' . esc_url($uri . '/assets/js/main.min.js') . '" as="script">' . "\n";
}
add_action('wp_head', 'mytheme_add_preload_tags', 1);

注意事項

HTTP/2はHTTPSが必須です。HTTP（非SSL）ではHTTP/2は使えません
Nginx 1.9.5以降、Apache 2.4.17以降でHTTP/2がサポートされています。バージョンが古い場合はアップデートが必要です
共有レンタルサーバーの場合、サーバー設定の変更はできません。コントロールパネルにSSL/HTTP/2の設定がある場合はそちらから有効化してください

まとめ

HTTP/2を有効にするにはSSL証明書（Let's Encrypt）の取得が先決です。NginxはListenディレクティブに http2 を追加するだけで有効になります。Apacheは Protocols h2 h2c http/1.1 を設定します。curl -I --http2 で HTTP/2 200 が返ればHTTP/2は正常に動作しています。Link: preload ヘッダーでリソースの優先読み込みも活用しましょう。

Post Views: 34