テキストベースのリソースは圧縮して提供し、ネットワーク全体を最小限に抑える あります。Lighthouse レポートの [Opportunities] セクションには、テキストベースのすべてのアセットが 非圧縮リソース:
Lighthouse によるテキスト圧縮の処理方法
Lighthouse では、次のようなすべての回答が収集されます。
- テキストベースのリソースタイプがある。
content-encodingヘッダーをbr、gzip、またはdeflate。
そして Lighthouse では、各レコードが GZIP を使用して、 削減できます
レスポンスの元のサイズが 1.4 KiB 未満の場合、または 削減できる可能性のある圧縮量が元のサイズの 10% 未満である場合、 Lighthouse では、結果でそのレスポンスにフラグが付けられません。
サーバーでテキスト圧縮を有効にする
以下の目的のために、これらのレスポンスを提供したサーバーでテキスト圧縮を有効にします。 この監査に合格する必要があります
ブラウザがリソースをリクエストすると、
Accept-Encoding
サポートする圧縮アルゴリズムを示す HTTP リクエスト ヘッダー。
Accept-Encoding: gzip, compress, br
ブラウザが Brotli をサポートしている場合
（br）。Brotli を使用すると、リソースのファイルサイズを 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 を開きます。
- [ネットワーク] タブをクリックします。
- 目的のレスポンスの原因となったリクエストをクリックします。
- [Headers] タブをクリックします。
- [Response Headers] セクションの
content-encodingヘッダーを確認します。
<ph type="x-smartling-placeholder">content-encoding レスポンス ヘッダー。
レスポンスの圧縮サイズと圧縮解除サイズを比較するには:
- Ctrl+Shift+J キー（Mac では Command+Option+J キー）を押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- 大きなリクエスト行を有効にする。 サイズの大きいリクエスト行を使用するをご覧ください。
- [サイズ] 列で目的のレスポンスを確認します。「 トップの値は圧縮後のサイズです一番下の値は、 指定します。
ネットワーク ペイロードを最小化して圧縮するもご覧ください。
スタック固有のガイダンス
- Joomla: Gzip ページの圧縮設定を有効にします（[System] > [Global configuration] > [Server]）。
- WordPress: ウェブサーバーの構成でテキスト圧縮を有効にします。