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

テキストベースのリソースは圧縮して配信し、ネットワークの全体的な通信量を最小限に抑えてください。Lighthouse レポートの [最適化案] セクションには、圧縮されていないテキストベースのリソースがすべて表示されます。

Lighthouse の [Enable text compression] 監査のスクリーンショット

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 を使用する必要があります。Brotli は、他の圧縮アルゴリズムよりもリソースのファイルサイズを縮小できるためです。how to enable Brotli compression in <X> を検索します。ここで、<X> はサーバーの名前です。2022 年 12 月の時点で、iOS の Safari を除くすべての主要なブラウザで Brotli がサポートされています。最新情報については、ブラウザの互換性をご覧ください。

Brotli のフォールバックとして GZIP を使用します。GZIP はすべての主要なブラウザでサポートされていますが、Brotli よりも効率が劣ります。例については、サーバー構成をご覧ください。

サーバーは、使用した圧縮アルゴリズムを示す Content-Encoding HTTP レスポンス ヘッダーを返す必要があります。

Content-Encoding: br

レスポンスの圧縮を確認する

サーバーがレスポンスを圧縮したかどうかを確認するには:

Control+Shift+J（Mac の場合は Command+Option+J）を押して、デベロッパー ツールを開きます。[Network] タブをクリックします。

  1. Ctrl+Shift+J（Mac の場合は Command+Option+J）を押して、デベロッパー ツールを開きます。
  2. [ネットワーク] タブをクリックします。
  3. 目的のレスポンスを生成したリクエストをクリックします。
  4. [ヘッダー] タブをクリックします。
  5. [Response Headers] セクションで content-encoding ヘッダーを確認します。
content-encoding レスポンス ヘッダー
content-encoding レスポンス ヘッダー。

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

  1. Ctrl+Shift+J（Mac の場合は Command+Option+J）を押して、デベロッパー ツールを開きます。
  2. [ネットワーク] タブをクリックします。
  3. 多数のリクエスト行を有効にします。多数のリクエスト行を使用するをご覧ください。
  4. 目的のレスポンスの [Size] 列を確認します。上の値は圧縮後のサイズです。下の値は解凍後のサイズです。

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

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

  • Drupal: テキストベースのリソースは圧縮（gzip、deflate、または brotli）して配信し、ネットワークの全体的な通信量を最小限に抑えてください。これをネイティブでサポートしている CDN の使用を検討するか、この処理を行うようウェブサーバーを設定してください。詳しくはこちらをご覧ください。
  • Joomla: Gzip ページ圧縮の設定を有効にします（[システム] > [グローバル設定] > [サーバー]）。
  • WordPress: ウェブサーバーの設定でテキスト圧縮を有効にします。

リソース