WordPressでHTTP/2を活用してパフォーマンスを改善する方法

はじめに

「サーバーがHTTP/2に対応しているか確認したい」「リソースの並列読み込みでサイトを高速化したい」——HTTP/2はHTTP/1.1と比べてリクエストの多重化・ヘッダー圧縮・Server Pushに対応しており、WordPressサイトの速度改善に有効です。

症状・原因

HTTP/1.1では1つのTCP接続で1リクエストしか処理できないため、CSSやJSファイルが多いWordPressサイトでは接続待ちが発生して表示速度が低下します。HTTP/2では1接続で複数リクエストを並列処理できるため、ファイル数が多くても速度低下しにくくなります。

解決手順

ステップ1：HTTP/2の対応状況を確認する

# curlでHTTP/2対応を確認
curl -I --http2 https://example.com 2>&1 | grep -i "HTTP/"
# → HTTP/2 200 が返ればHTTP/2対応

# または Chrome DevTools で確認
# F12 → Network タブ → Protocol列を右クリックして表示
# "h2" と表示されていればHTTP/2

# WP-CLIで現在の接続情報を確認
wp eval 'echo $_SERVER["SERVER_PROTOCOL"];'

【HTTP/2を使用するための前提条件】
✅ SSL（HTTPS）が必須 — HTTP/2はHTTPSでのみ動作
✅ サーバーがHTTP/2に対応（Apache 2.4.17+ / Nginx 1.9.5+）
✅ PHPのOpenSSLが有効

【主要ホスティングのHTTP/2対応状況】
- さくらのVPS/クラウド: Apache設定で有効化可能
- ConoHa WING: デフォルトでHTTP/2有効
- エックスサーバー: デフォルトでHTTP/2有効
- Cloudflare（CDN）: 自動でHTTP/2有効化

ステップ2：SSLを正しく設定してHTTP/2を有効化する

# Apache: HTTP/2を有効化（.htaccessまたはhttpd.conf）
# 前提: mod_http2が有効であること

<IfModule mod_http2.c>
    Protocols h2 h2c http/1.1
    H2Push on
</IfModule>

# HTTPSへのリダイレクト（必須）
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

# Nginx: HTTP/2を有効化
server {
    listen 443 ssl http2;  # http2を追加
    server_name example.com;

    ssl_certificate     /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    # TLS最適化
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
}

ステップ3：リソースヒントでリソース読み込みを最適化する

// functions.php: リソースヒントをwp_headで出力
add_action( 'wp_head', function() {
    // preconnect: 外部ドメインへの接続を事前確立
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
    echo '<link rel="preconnect" href="https://www.google-analytics.com">' . "\n";

    // preload: 現在のページで確実に使うリソースを優先読み込み
    $font_url = get_theme_file_uri( 'fonts/notosansjp-regular.woff2' );
    echo '<link rel="preload" href="' . esc_url( $font_url ) . '" as="font" type="font/woff2" crossorigin>' . "\n";

    $hero_image = get_theme_file_uri( 'images/hero.webp' );
    echo '<link rel="preload" href="' . esc_url( $hero_image ) . '" as="image">' . "\n";
}, 1 );

// WordPress 5.8以降: wp_resource_hints フィルターでリソースヒントを追加
add_filter( 'wp_resource_hints', function( $hints, $relation_type ) {
    if ( 'preconnect' === $relation_type ) {
        $hints[] = 'https://fonts.googleapis.com';
        $hints[] = [ 'href' => 'https://fonts.gstatic.com', 'crossorigin' => 'anonymous' ];
    }
    if ( 'dns-prefetch' === $relation_type ) {
        $hints[] = 'https://www.googletagmanager.com';
    }
    return $hints;
}, 10, 2 );

ステップ4：CDNでHTTP/2とエッジキャッシュを活用する

【Cloudflareの設定手順】

1. Cloudflareにサインアップしてドメインを追加
2. DNS設定をCloudflareのネームサーバーに変更
3. 「Speed」→「Optimization」でHTTP/2を確認（デフォルト有効）
4. 「Caching」→「Configuration」でキャッシュレベルを設定
5. 「SSL/TLS」でSSLモードを「Full (Strict)」に設定

【Cloudflareで自動的に有効になる機能】
✅ HTTP/2（h2）
✅ HTTP/3（QUIC）
✅ 自動HTTPS リダイレクト
✅ Brotli圧縮（GZIPより高効率）
✅ 静的ファイルのエッジキャッシュ

// Cloudflare使用時: WordPressにCloudflareのIPを信頼させる
// wp-config.phpに追加
if ( isset( $_SERVER['HTTP_CF_CONNECTING_IP'] ) ) {
    $_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_CF_CONNECTING_IP'];
}

// プロキシ経由のHTTPS判定を修正
if ( isset( $_SERVER['HTTP_X_FORWARDED_PROTO'] )
    && 'https' === $_SERVER['HTTP_X_FORWARDED_PROTO'] ) {
    $_SERVER['HTTPS'] = 'on';
}

ステップ5：HTTP/2の効果を計測する

# WebPageTest（webpagetest.org）で計測
# → Connection View でHTTP/2の多重化を視覚確認

# Chrome DevTools → Network → Timing で確認
# - TTFB（Time To First Byte）: サーバー応答時間
# - Content Download: 実際のダウンロード時間

# PageSpeed Insights の「リソースの読み込みの効率化」を確認
# → "レンダリングブロック リソースの除外" が改善されているか

# curl で応答時間を計測
curl -o /dev/null -s -w "
DNS:          %{time_namelookup}s
Connect:      %{time_connect}s
TLS:          %{time_appconnect}s
TTFB:         %{time_starttransfer}s
Total:        %{time_total}s
" https://example.com

注意事項

• HTTP/2は必ずHTTPS（SSL/TLS）が必要です。Let's Encryptなどで無料SSLを取得し、HTTPからHTTPSへの恒久リダイレクト（301）を設定してください。混在コンテンツ（Mixed Content）エラーにも注意が必要です。
• HTTP/2 Server Pushは現在ChromeなどのブラウザではサポートEndされつつあります（早期ヒントに移行中）。代わりにを使うことが推奨されています。
• CDN（Cloudflare等）を使う場合、WordPressの管理画面URLはオリジンサーバーを直接指定するか、Cloudflareの「開発モード」を活用してキャッシュの影響を受けないようにしてください。

まとめ

HTTP/2の活用は「SSL設定でHTTPS化→サーバーのHTTP/2有効化確認→preconnect/preloadでリソースヒント設定→CDN（Cloudflare等）でエッジキャッシュ→WebPageTestで効果測定」の流れで進めます。関連記事：WordPressのサイト速度を計測して改善する方法、WordPressのGZIP圧縮を有効化する方法。