テキストベースのリソースは、ネットワークの合計バイト数を最小限に抑えるために、圧縮して提供する必要があります。Lighthouse レポートの [Opportunities] セクションには、圧縮されていないテキストベースのリソースがすべて一覧表示されます。
Lighthouse によるテキスト圧縮の処理方法
Lighthouse では、次のようなすべての回答が収集されます。
- テキストベースのリソースタイプがある。
br、gzip、deflateに設定されたcontent-encodingヘッダーを含めないでください。
Lighthouse では、各ファイルを GZIP で圧縮して削減可能な費用を計算します。
レスポンスの元のサイズが 1.4 KiB 未満の場合、または削減できる可能性のある圧縮量が元のサイズの 10% 未満の場合、Lighthouse では結果でそのレスポンスにフラグが付けられません。
サーバーでテキスト圧縮を有効にする
この監査に合格するには、これらのレスポンスを処理したサーバーでテキスト圧縮を有効にします。
ブラウザがリソースをリクエストすると、Accept-Encoding HTTP リクエスト ヘッダーを使用して、サポートする圧縮アルゴリズムが示されます。
Accept-Encoding: gzip, compress, br
ブラウザが Brotli（br）をサポートしている場合は、他の圧縮アルゴリズムよりもリソースのファイルサイズを小さくできるため、Brotli を使用する必要があります。how to enable Brotli compression in <X> を検索します。ここで、<X> はサーバーの名前です。2022 年 12 月現在、Brotli は iOS の Safari を除くすべての主要なブラウザでサポートされています。最新情報については、ブラウザの互換性をご覧ください。
Brotli のフォールバックとして GZIP を使用します。GZIP はすべての主要なブラウザでサポートされていますが、Brotli ほど効率的ではありません。例については、サーバー構成をご覧ください。
サーバーは、使用された圧縮アルゴリズムを示す Content-Encoding HTTP レスポンス ヘッダーを返す必要があります。
Content-Encoding: br
レスポンスの圧縮を確認する
サーバーがレスポンスを圧縮したかどうかを確認するには:
Control+Shift+J（Mac の場合は Command+Option+J）を押して DevTools を開きます。[Network] タブをクリックします。
- Ctrl+Shift+J キー（Mac では Command+Option+J キー）を押して DevTools を開きます。
- [Network] タブをクリックします。
- 目的のレスポンスの原因となったリクエストをクリックします。
- [Headers] タブをクリックします。
- [Response Headers] セクションの
content-encodingヘッダーを確認します。
content-encoding レスポンス ヘッダー。
レスポンスの圧縮サイズと圧縮解除サイズを比較するには:
- Ctrl+Shift+J キー（Mac では Command+Option+J キー）を押して DevTools を開きます。
- [Network] タブをクリックします。
- サイズの大きいリクエスト行を有効にします。サイズの大きいリクエスト行を使用するをご覧ください。
- [サイズ] 列で目的のレスポンスを確認します。上の値は圧縮後のサイズです。一番下の値は解凍後のサイズです。
ネットワーク ペイロードを最小化して圧縮するもご覧ください。
スタック固有のガイダンス
- Joomla: Gzip ページの圧縮設定を有効にします（[System] > [Global configuration] > [Server]）。
- WordPress: ウェブサーバーの構成でテキスト圧縮を有効にします。