WordPressでBrotli圧縮を有効化してHTML・CSS・JavaScriptを軽量化する方法

Brotli（ブロトリ）圧縮は、HTML・CSS・JavaScript などのテキストを gzip より小さく圧縮して送る方式で、WordPress 本体ではなく Web サーバーや CDN の設定で有効にします。この記事では、自分のサイトですでに Brotli が使われているかの確認方法から、CDN・Nginx・Apache それぞれでの有効化、設定後の確かめ方と注意点までを説明します。

Brotliで何が軽くなるのか

Web サーバーは、ブラウザから「この圧縮方式なら受け取れる」という申告（リクエストヘッダーの Accept-Encoding）を受け取り、対応していれば圧縮したデータを返します。返したデータの圧縮方式は、レスポンスヘッダーの Content-Encoding に書かれ、gzip なら gzip、Brotli なら br になります。

Brotli が効果を持つのは、テキスト形式のファイルです。

• HTML（WordPress が生成するページ本体）
• CSS・JavaScript（テーマ・プラグイン・ブロックのファイル）
• JSON（REST API の応答）、XML（サイトマップ・RSS）、SVG 画像、Web フォントのうち圧縮されていない形式

一方、JPEG・PNG・WebP・AVIF などの画像、動画、WOFF2 フォントは、ファイル自体がすでに圧縮されているため、Brotli をかけてもほとんど小さくなりません。圧縮処理の負荷だけが増えるので、対象から外します。

主要なブラウザは Brotli に対応していますが、ブラウザが Brotli を受け取るのは HTTPS の通信に限られます。サイトが常時 SSL 化されていることが前提です。また、Brotli に対応していない古い環境のために、gzip の設定は残しておきます。

ステップ1：すでに有効になっていないか確認する

最近のレンタルサーバーや CDN では、何も設定しなくても Brotli が有効になっていることがあります。設定に手を付ける前に、まず現状を確認します。ターミナルで次のコマンドを実行します（example.com は自分のサイトに置き換えてください）。

# ページ本体（HTML）の圧縮方式を確認
curl -s -o /dev/null -D - -H 'Accept-Encoding: br, gzip' https://example.com/ | grep -i -E '^(content-encoding|vary)'

# CSS ファイルの圧縮方式を確認
curl -s -o /dev/null -D - -H 'Accept-Encoding: br, gzip' https://example.com/wp-includes/css/dist/block-library/style.min.css | grep -i '^content-encoding'

content-encoding: br と表示されれば、Brotli はすでに有効です。gzip なら gzip のみ、何も表示されなければ圧縮されていません。HTML と CSS で結果が違うことがあるので、両方を確認します。

ブラウザで確認する場合は、Chrome のデベロッパーツールの「Network」タブでページを再読み込みし、ファイルを選んで「Headers」のレスポンスヘッダーに content-encoding があるかを見ます。PageSpeed Insights で圧縮に関する指摘が出ているかどうかも手がかりになります。

ステップ2：どこで有効にするかを決める

Brotli は「ブラウザに最後に応答する場所」で圧縮されていれば効果があります。構成によって、設定する場所は次のように変わります。

• CDN を経由している場合：CDN が圧縮を担当することが多く、オリジンサーバーの設定に関係なく、ブラウザには Brotli で届くことがあります。たとえば Cloudflare では、Brotli は標準で有効な扱いになっています（2026年10月現在）。CDN の管理画面で圧縮の設定を確認します。
• 共用のレンタルサーバーの場合：サーバー側の機能として提供されているかどうかで決まります。管理画面やマニュアルに設定項目がなければ、利用者側で有効にすることは難しいため、提供会社のサポート情報を確認します。
• VPS・専用サーバーの場合：Nginx や Apache の設定で自分で有効にします（ステップ3・4）。

なお、WordPress のプラグインで Brotli を「有効にする」ものは、実際には .htaccess などのサーバー設定を書き換えているか、CDN の機能を操作しているだけです。サーバーに Brotli のモジュールがなければ、プラグインでは有効になりません。

ステップ3：Nginxで有効にする

Nginx の標準のビルドには Brotli は含まれていないため、ngx_brotli モジュールを追加します。ディストリビューションによっては追加モジュールがパッケージとして提供されているので、まずそれを探し、なければモジュールを Nginx のバージョンに合わせてビルドします。

設定を変える前に、現在の設定ファイルをバックアップしてください。モジュールを動的に読み込む場合は、nginx.conf の先頭で読み込み、http ブロックに設定を加えます。パッケージで入れた場合は、modules-enabled などで自動的に読み込まれることもあるため、load_module の二重指定に注意します。

# nginx.conf の先頭（動的モジュールとして読み込む場合）
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    # リクエストのたびに圧縮する設定
    brotli on;
    brotli_comp_level 5;
    brotli_types text/plain text/css text/xml application/javascript application/json application/xml application/rss+xml image/svg+xml;

    # 事前に作った .br ファイルがあればそれを返す
    brotli_static on;

    # gzip は Brotli 非対応の環境向けに残しておく
    gzip on;
}

HTML（text/html）は指定しなくても圧縮の対象になります。設定したら文法を確認してから再読み込みします。

sudo nginx -t && sudo systemctl reload nginx

brotli_comp_level は 0〜11 で指定でき、数字を大きくするほど小さくなりますが、CPU の負荷が増えます。リクエストのたびに圧縮する用途では 4〜6 程度が一般的で、11 のような高い値は事前に圧縮しておく静的ファイル向けです。

ステップ4：Apacheで有効にする

Apache 2.4 系には mod_brotli が用意されています。Debian・Ubuntu 系では、次のようにモジュールを有効にします。

sudo a2enmod brotli
sudo apachectl configtest && sudo systemctl reload apache2

圧縮の対象は、サーバーの設定ファイルか .htaccess で指定します。.htaccess に書く場合は、WordPress が管理する # BEGIN WordPress から # END WordPress の間ではなく、その外側に書いてください。間に書くと、パーマリンク設定の保存時に消えることがあります。

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css text/xml application/javascript application/json application/xml application/rss+xml image/svg+xml
</IfModule>

<IfModule> で囲んでおくと、モジュールがない環境でもエラーにならずに無視されます。圧縮の強さは BrotliCompressionQuality で調整できます。gzip 用の mod_deflate と併用した場合の優先順の扱いは、Apache の公式ドキュメントの mod_brotli の項目で確認してください。

ステップ5：設定後に確かめる

ステップ1と同じ curl コマンドで、HTML と CSS・JavaScript が content-encoding: br で返ってくることを確認します。あわせて、次の点も見ておきます。

1. **Vary: Accept-Encoding が付いているか**：これがないと、途中のキャッシュが Brotli で圧縮したデータを、非対応の環境にも返してしまうおそれがあります。
2. 表示が崩れていないか：文字化けや真っ白な画面になる場合は、PHP 側の zlib.output_compression や別のプラグインで圧縮されたものを、サーバーがもう一度圧縮している可能性があります。圧縮はサーバーか CDN の一か所に寄せます。
3. サーバーの負荷：アクセスの多いサイトでは、設定後しばらく CPU の使用率を見て、高すぎるようなら圧縮レベルを下げます。

効果の大きさは、curl に -w '%{size_download}\n' を付けて受信したバイト数を gzip 指定時と比べるとわかります。ページの表示速度の改善は利用者の体験のための取り組みで、検索順位を上げることを約束するものではありません。

まとめ

• Brotli はテキストのファイルを gzip より小さく圧縮する方式で、WordPress ではなくサーバーや CDN の設定で有効にします。画像や動画は対象外にします。
• 設定の前に、curl やデベロッパーツールで content-encoding を確認し、すでに有効でないかを見ます。
• CDN 経由なら CDN の設定、共用サーバーなら提供会社の機能、VPS なら Nginx の ngx_brotli か Apache の mod_brotli で有効にします。
• 圧縮レベルは動的な応答なら中程度にし、gzip も残しておきます。
• 設定ファイルはバックアップしてから変更し、設定後は Vary ヘッダー・表示崩れ・サーバー負荷を確認してください。

• Nginxでgzip圧縮を設定する方法
• Apacheのmod_deflateでテキストを圧縮する方法