テキストベースのリソースは圧縮して配信し、ネットワークの全体的な通信量を最小限に抑えてください。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 を開きます。
- [ネットワーク] タブをクリックします。
- 関心のあるレスポンスの原因となったリクエストをクリックします。
- [ヘッダー] タブをクリックします。
- [Response Headers] セクションの
content-encodingヘッダーを確認します。
content-encoding レスポンス ヘッダー。
圧縮前と圧縮後のレスポンスのサイズを比較するには:
- Ctrl+Shift+J キー（Mac では Command+Option+J キー）を押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- サイズの大きいリクエスト行を有効にします。大きいリクエスト行を使用するをご覧ください。
- 目的のレスポンスの [サイズ] 列を確認します。上の値は圧縮後のサイズです。下の値は圧縮解除後のサイズです。
ネットワーク ペイロードを圧縮して圧縮するもご覧ください。
スタック固有のガイダンス
- Drupal: テキストベースのリソースは圧縮（gzip、deflate、または brotli）して配信し、ネットワークの全体的な通信量を最小限に抑えてください。これをネイティブにサポートする CDN を使用するか、このオペレーションを実行するようにウェブサーバーを設定することを検討してください。詳しくはこちらをご覧ください。
- Joomla: [Gzip ページ圧縮] 設定を有効にします（[システム] > [グローバル設定] > [サーバー]）。
- WordPress: ウェブサーバーの設定でテキスト圧縮を有効にします。