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

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

# Lighthouseがテキストの圧縮を取り扱う方法

Lighthouseは、次に該当するすべてのレスポンスを収集します。

• テキストベースのリソースタイプを持っている。
• br 、gzip 、またはdeflateに設定されていないcontent-encodingヘッダーが含まれていない。

次に、LighthouseはGZIPを使ってこれらを圧縮し、削減を見込めるデータ量を算出します。

レスポンスの元のサイズが1.4KiB未満の場合、または圧縮により削減を見込めるデータ量が元のサイズの10％未満の場合、Lighthouseは結果の中でそのレスポンスをフラグしません。

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

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

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

Accept-Encoding: gzip, compress, br

ブラウザがBrotli (br) をサポートしている場合は、Brotliを使用することをおすすめします。他の圧縮アルゴリズムよりもリソースのファイルサイズを多く削減できます。how to enable Brotli compression in <X> (<X> で Brotli を使った圧縮を有効にする方法)を検索してください (<X>にはサーバーの名前が入ります)。2020年6月の時点で、Brotliは、Internet Explorer、デスクトップ版 Safari、iOS 版 Safariを除くすべての主要なブラウザーでサポートされています。最新情報は、Browser compatibility (ブラウザの互換性) を参照してください。

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

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

Content-Encoding: br

# レスポンスがChrome DevToolsで圧縮されたかどうかを確認する

サーバーがレスポンスを圧縮したかどうかを確認するには、以下のことを行います。

1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
2. Click the Network tab.
3. 関心のあるレスポンスを引き起こしたリクエストをクリックします。
4. Headers] (ヘッダー) タブをクリックします。
5. [Response Headers] (レスポンスヘッダー) セクションのcontent-encodingヘッダーを確認します。

レスポンスの圧縮されたときのサイズと圧縮解除されたときのサイズを比較するには、以下のことを行います。

1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
2. Click the Network tab.
3. 大きなリクエスト行を有効にします。Use large request rows (大きなリクエスト行を使用する)を参照してください。
4. 関心のあるレスポンスの[Size]列を見てください。一番上の値は圧縮されたサイズで、一番下の値は圧縮解除されたサイズです。

Minify and compress network payloads (ネットワークペイロードの縮小と圧縮) も参照してください。

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

# Joomla

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

# WordPress

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

# リソース

• Enable text compression (テキストの圧縮を有効にする) 監査のソースコード