テキストベースのリソースは、ネットワークの合計バイト数を最小限に抑えるために、圧縮して提供する必要があります。Lighthouse レポートの [最適化案] セクションには、圧縮されていないテキストベースのリソースがすべて表示されます。
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
レスポンスが圧縮されていたかどうかを Chrome DevTools で確認する
サーバーがレスポンスを圧縮したかどうかを確認するには:
Control+Shift+J
(Mac では Command+Option+J
)を押して DevTools を開きます。
[Network] タブをクリックします。
[コメント]: <>(以下のリストは web.dev のショートコードですが、どの言語にも英語から翻訳されていません。)1. Control+Shift+J
(Mac では Command+Option+J
)を押して DevTools を開きます。
2. [Network] タブをクリックします。
3. 目的のレスポンスの原因となったリクエストをクリックします。4. [Headers] タブをクリックします。
5. レスポンス ヘッダーの content-encoding
ヘッダーを確認します。
レスポンスの圧縮されたサイズと解凍後のサイズを比較するには:
[コメント]: <>(以下のリストは web.dev のショートコードですが、どの言語にも英語から翻訳されていません。)1. Control+Shift+J
(Mac では Command+Option+J
)を押して DevTools を開きます。
2. [Network] タブをクリックします。
3. サイズの大きいリクエスト行を有効にします。サイズの大きいリクエスト行を使用するをご覧ください。4. 目的のレスポンスの [サイズ] 列を確認します。一番上の値は圧縮後のサイズです。一番下の値は解凍後のサイズです。
ネットワーク ペイロードを最小化して圧縮するもご覧ください。
スタック固有のガイダンス
Joomla
Gzip のページ圧縮の設定を有効にします([システム] > [グローバル構成] > [サーバー])。
WordPress
ウェブサーバーの設定でテキスト圧縮を有効にします。