テキスト圧縮を有効にする

テキストベースのリソースは圧縮して提供し、ネットワーク全体を最小限に抑える あります。Lighthouse レポートの [Opportunities] セクションには、テキストベースのすべてのアセットが 非圧縮リソース:

Lighthouse のテキスト圧縮の有効化の監査のスクリーンショット

Lighthouse によるテキスト圧縮の処理方法

Lighthouse では、次のようなすべての回答が収集されます。

  • テキストベースのリソースタイプがある。
  • content-encoding ヘッダーを brgzip、または 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] タブをクリックします。

  1. Ctrl+Shift+J キー(Mac では Command+Option+J キー)を押して DevTools を開きます。
  2. [ネットワーク] タブをクリックします。
  3. 目的のレスポンスの原因となったリクエストをクリックします。
  4. [Headers] タブをクリックします。
  5. [Response Headers] セクションの content-encoding ヘッダーを確認します。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> content-encoding: レスポンス ヘッダー <ph type="x-smartling-placeholder">
</ph> content-encoding レスポンス ヘッダー。

レスポンスの圧縮サイズと圧縮解除サイズを比較するには:

  1. Ctrl+Shift+J キー(Mac では Command+Option+J キー)を押して DevTools を開きます。
  2. [ネットワーク] タブをクリックします。
  3. 大きなリクエスト行を有効にする。 サイズの大きいリクエスト行を使用するをご覧ください。
  4. [サイズ] 列で目的のレスポンスを確認します。「 トップの値は圧縮後のサイズです一番下の値は、 指定します。

ネットワーク ペイロードを最小化して圧縮するもご覧ください。

スタック固有のガイダンス

  • Joomla: Gzip ページの圧縮設定を有効にします([System] > [Global configuration] > [Server])。
  • WordPress: ウェブサーバーの構成でテキスト圧縮を有効にします。

リソース