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

テキストベースのリソースは、ネットワークの合計バイト数を最小限に抑えるために、圧縮して提供する必要があります。Lighthouse レポートの [最適化案] セクションには、圧縮されていないテキストベースのリソースがすべて表示されます。

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

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

Lighthouse では次のようなレスポンスが収集されます。

  • テキストベースのリソースタイプがある。
  • brgzipdeflate に設定された content-encoding ヘッダーは含めないでください。

Lighthouse ではそれぞれを GZIP で圧縮して、削減可能な費用を計算します。

レスポンスの元のサイズが 1.4 KiB 未満の場合、または圧縮削減の可能性が元のサイズの 10% 未満である場合、Lighthouse では結果でそのレスポンスにフラグが付けられません。

サーバーでテキスト圧縮を有効にする方法

この監査に合格するには、これらのレスポンスを処理したサーバーでテキスト圧縮を有効にします。

ブラウザはリソースをリクエストすると、Accept-Encoding HTTP リクエスト ヘッダーを使用して、サポートする圧縮アルゴリズムを示します。

Accept-Encoding: gzip, compress, br

ブラウザが Brotlibr)をサポートしている場合は、他の圧縮アルゴリズムよりもリソースのファイルサイズを縮小できるため、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 ヘッダーを確認します。

コンテンツ エンコード レスポンス ヘッダー
content-encoding レスポンス ヘッダー。

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

[コメント]: <>(以下のリストは web.dev のショートコードですが、どの言語にも英語から翻訳されていません。)1. Control+Shift+J(Mac では Command+Option+J)を押して DevTools を開きます。 2. [Network] タブをクリックします。 3. サイズの大きいリクエスト行を有効にします。サイズの大きいリクエスト行を使用するをご覧ください。4. 目的のレスポンスの [サイズ] 列を確認します。一番上の値は圧縮後のサイズです。一番下の値は解凍後のサイズです。

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

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

Joomla

Gzip のページ圧縮の設定を有効にします([システム] > [グローバル構成] > [サーバー])。

WordPress

ウェブサーバーの設定でテキスト圧縮を有効にします。

関連情報