WordPressサイトを高速化する最も簡単な方法は、ずばり不要なリソースをすべて削除すること。そして、必要なリソースは圧縮することです。ウェブサーバーでGZIP圧縮を有効にすれば、これを効率的に実行できます。

最近のブラウザは、デフォルトでGZIP圧縮をサポートしていますが、圧縮したリソースを提供するには、適切なサーバーでの設定が必要になります。

そこで今回は、ウェブにおけるデータ圧縮の基本、GZIP圧縮の概要とメリット、そしてさまざまなサーバー構成でGZIP圧縮を使用し、WordPressサイトを高速化する方法を詳しくご紹介していきます。

GZIP圧縮を有効にする方法について動画での解説もご用意しています

ウェブにおけるデータ圧縮の基本

データ圧縮とは、ウェブサイトから送信されるデータのサイズを縮小することを意味します。データの種類(テキスト、画像、スタイルシート、スクリプト、フォント)に応じて、圧縮方法は様々です。

ウェブページの主な構成要素
ウェブページの主な構成要素

例えば、HTML、CSS、JavaScriptを圧縮することで、ブラウザから送信されるデータ量を簡単に減らすことができます。ソースコードからコメントや空白などの不要な文字を削除することで、テキストを圧縮します。

以下のシンプルなHTML文書は、HTMLマークアップ、CSSスタイル、JavaScriptコードの3つで構成されています。

それぞれの要素には、固有の構文とセマンティクスがあり、全体の文字数は357文字です。

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    
    <div>...</div>
    
    <script>
    kinstaScripts(); // random scripts used on the page
    </script>
</body>
</html>

上記のコードは読みやすく、よくまとまっていますが、ブラウザにコメントや完璧にインデントされたタグは必要ありません。文書を圧縮すれば、以下のように不要な部分をすべて取り除くことができます。

<html><head><style>.kinsta-banner{font-size:150%;width:75%}</style></head><body><div>...</div><script>kinstaScripts();</script></body></html>

この文書は圧縮後、わずか141文字に。これは60.50%の削減を意味します。読みづらくはなりますが、ブラウザに対しては特に影響はなく、訪問者には同じページが表示されます。

両方のバージョンを活用するには、元のドキュメントを「開発版」として保管しつつ、すべてのコードを圧縮してから本番環境で公開すればOKです。

WordPressのパフォーマンスプラグインでは、大抵この処理は自動化されます。

非圧縮jQueryと圧縮jQueryのファイルサイズの違い
非圧縮jQueryと圧縮jQueryのファイルサイズの違い

上の例では、jQuery 3.5.1ライブラリの非圧縮版は、同じファイルの圧縮版よりも3倍以上大きいことがわかります。

この圧縮テクニックを利用すれば、画像、動画、フォントなど、他の種類のコンテンツも最適化できます。このようなコンテンツサイズの圧縮は、テキストベースのアセットを最適化する第一歩です。

このような明らかな利点を考慮し、Kinstaでは専用コントロールパネル「MyKinsta」コード圧縮機能を導入しています。CSSとJavaScriptファイルの自動圧縮を設定でき、手間をかけることなくサイトを高速化できます。

このような単なる圧縮だけだけでなく、高度な数学技術を使用したデータ圧縮アルゴリズムによって、データサイズをさらに縮小することも可能です。

この圧縮方法の中でも特に一般的なのがGZIPです。GZIPは効率的にデータ転送し、インターネットをグローバルな通信媒体として機能させることに大きく貢献しています。

GZIP圧縮とは

GZIPは「GNU Zip」の略で、ウェブ上で最も普及している可逆データ圧縮方式です。サイトのHTMLページ、スタイルシート、スクリプトのサイズを縮小することができます。

データ圧縮アルゴリズムであるだけでなく、ファイル拡張子(.gz)、そしてファイル圧縮・解凍用ソフトウェアでもあります。

GZIPは、LZ77ハフマン符号化を組み合わせたDEFLATEアルゴリズムに基づいています。

GZIP圧縮はDEFLATEアルゴリズムに基づいている
GZIP圧縮はDEFLATEアルゴリズムに基づいている

GZIP圧縮は、受け取った一連の生データを可逆圧縮(ロスレス圧縮とも)します。どのようなファイルタイプの生データにも対応しますが、テキストベースのアセット(HTML、CSS、JSなど)と特に相性が良いです。

GZIP圧縮の仕組みについて、もう少し掘り下げてみましょう。

GZIP圧縮の仕組み

GZIP圧縮のおおまかな仕組み
GZIP圧縮のおおまかな仕組み

まずはじめに、GZIP圧縮は、生データに対してLZ77圧縮アルゴリズムを使用して、冗長性を取り除きます。このアルゴリズムは、事前に定義されたスライディングウィンドウ(生データの小さなセクション)内で繰り返されるパターンを見つけることで機能します。

その後、繰り返しの文字列をすべてタプルに置き換えて生データを圧縮します。

LZ77アルゴリズムの例
LZ77アルゴリズムの例

上の例では、スライディングウィンドウサイズは13文字(13バイト)ですが、GZIP圧縮では最大32KB(32,768バイト)のスライディングウィンドウサイズを使用できます。このサイズは、LZ77のパフォーマンスにおいて重要な役割を果たします。

LZ77で圧縮した生データは、ハフマン符号化でさらに圧縮されます。これは、頻度の高い文字には最小のビット数を割り当て、頻度の低い文字には最大のビット数を割り当てるアルゴリズムです。

この技術はモールス信号で使用されるようなもので、英語では頻度の高い文字が最も短いシーケンスとなります。

ハフマン符号化アルゴリズムを理解するために、BOOKKEEPERという単語を見てみます。この単語は10文字で構成されていますが、文字の種類は6種類です(B、O、K、E、P、R)。

ほぼすべてのウェブサイトでは、文字や記号を表現するためにUTF-8文字を使用しています。英語のアルファベットも含むUTF-8では、ASCII文字は1文字1バイト(8ビット)です。

同じ文字の繰り返しが見られる単語「BOOKKEEPER」
同じ文字の繰り返しが見られる単語「BOOKKEEPER」

BOOKKEEPERのような10文字の文字列には通常、10バイト(80ビット)のメモリが必要です。この単語にはご覧の通り、B, P, Rが1つ、OKが2つ、Eが3つ含まれています。

ハフマン符号化はこれを利用して、すべての一意な文字を「葉」とする「ハフマン木」を生成して、文字列を可逆圧縮します。

出現頻度の低い文字(この例ではBPR)はハフマン木の一番下に位置し、出現頻度の高い文字(この例ではEOK)は一番上に位置するのが理想的になります。

木の一番上のノードがルートとなり、その値は文字列の総文字数に等しくなります。

単語「BOOKKEEPER」のハフマン木
単語「BOOKKEEPER」のハフマン木

ハフマン木を作成した後は、すべての左分岐矢印と右分岐矢印にそれぞれ0と1の数値を割り当てます。ルートから葉へのパスをたどり、すべての0と1を結合することで、任意の文字のハフマン符号を生成できます。

ハフマン符号はすべての文字に対して一意なバイナリ符号
ハフマン符号はすべての文字に対して一意なバイナリ符号

使用頻度が最も高い文字は、ビットサイズが最小のハフマン符号を持っていることがわかります。

補足)ハフマン符号化は、同じ頻度の文字に対して異なる順序付けを行い、別のバイナリコードを生成することができますが、符号化された文字列の合計サイズは変わりません。

An 80 bits word encoded as a 25 bits string
25ビットの文字列として符号化された80ビットの単語

このアルゴリズムより、元の単語を格納するのに必要なメモリを68.75%削減することができます。

0/1の規則でハフマン木を使用すると、接頭辞特性を満たすバイナリコードが生成されます。これにより、特定の文字のハフマン符号が他の文字の符号の接頭辞になることを回避し、ハフマン木を使用して符号化された文字列を簡単にデコードできるように。これによって、GZIPを素早く解凍することができます。

上記の単語と同様に、GZIP圧縮はハフマン符号化を使用して、LZ77によって生成されたタプルをさらに最適化します。この結果、拡張子が.gzの高圧縮ファイルが生成されます。

GZIP圧縮の詳しい仕組みはこちらの動画をご覧ください。

GZIP圧縮の効果

通常、GZIPは小さなファイルで70%ほどの圧縮率が期待できますが、より大きなテキストベースのアセットでは、90%近く圧縮することもできます。

一般的なCSSとJSライブラリのGZIP圧縮率
一般的なCSSとJSライブラリのGZIP圧縮率

この表から、圧縮されたファイルをGZIPで圧縮すると、サイズがさらに小さくなることがわかります。

注意)GZIP圧縮はすべてのファイルタイプに対応していますが、すでに他の方法で圧縮されたアセット(画像や動画など)に適用しても意味がなく、ファイルサイズがかえって大きくなってしまうこともあります。

圧縮アルゴリズムの性能は、その圧縮率だけでなく、いかに素早く効率的にデータを圧縮・解凍できるかにかかっており、GZIPが優れているのはこの点です。

GZIPはストリーミングで素早く解凍できるため、速度が重要なウェブプロトコルに適しています。また、データの圧縮と解凍のいずれにも最小限のリソースしか必要とせず、サーバーにもクライアントにも利点があります。

Brotli、bzip2、GZIP、xz圧縮の性能比較(出典: OpenCPU)
Brotli、bzip2、GZIP、xz圧縮の性能比較(出典: OpenCPU)

上のグラフは、Brotlibzip2GZIPxz圧縮の性能を比較したものです(左から圧縮比、圧縮時間、解凍時間)。GZIPは圧縮と解凍の速度で他の圧縮方法を圧倒しています。

中央の圧縮時間(Compression Time)のグラフを見ると、GZIPはHTTPサーバーやウェブ上の他のデータ配信におけるリアルタイム圧縮に理想的であることがわかります。ウェブの進歩に貢献することを考慮し、IETFはGZIPをHTTP/1.1における圧縮の3つの標準フォーマットの1つとして批准しています。

補足)GZIPの圧縮ライブラリを抽象化したzlibは、一般的なオペレーティングシステム(Linux、macOS、iOS)や最新のゲーム機(PlayStation 4、Wii U、Xbox One)で採用されており、画像を圧縮するためのロスレスPNGファイル形式にも使用されています。

GZIP圧縮の6つのメリット

続いて、GZIP圧縮のメリットをご紹介します。

適切な圧縮率

前述したように、GZIPは他のアルゴリズムと比べて際立つ圧縮率を実現するというわけではありませんが、引けを取るわけでもありません。通常テキストベースのリソースであれば、サイズを70~90%縮小することができます。

超高速圧縮・解凍

データ圧縮と解凍の速度に関しては、GZIPの右に出るものなし。HTTPサーバーやその他のデータ配信におけるオンザフライ処理に理想的です。

消費メモリが最小限

最小限のメモリしか消費しないため、メモリ容量が限られているサーバーやシステムに適しています。この特徴によって、格安サーバーでもサポートされています。

圧縮できない場合も大きく拡張することはない

GZIPのような可逆圧縮アルゴリズムには、データを圧縮できない厳しい制限があります。

これは、リソースがすでに十分に圧縮されている場合、またはリソースが小さく、圧縮のオーバーヘッドが上回る場合に起こるのが通例で、エントロピー符号と呼ばれる概念に起因します。GZIPはこの効果に非常に耐性があります。

オープンソースで自由に利用可能

GZIPは基本的に、初期のUnixシステムで使用されていた特許取得済みのcompressプログラムに代わる無料のオープンソースとして作成されています。そのため特許に縛られることなく、誰でも自由に利用できます。

世界中で広くサポートされている

W3Techsの調べでは、追跡しているすべてのウェブサイトの82%で使用されており、ウェブ全体で最も広く使用されている圧縮アルゴリズムです。

このため、GZIPはほぼすべてのサーバーとクライアントでサポートされており、どのホスティングでサイトを運営しても、GZIPを有効にしてサイトを高速化できます。

サイト速度測定ツールのGZIPに関する推奨事項

GZIPを有効にすることは、単なる圧縮の次にサイトに導入できる最も簡単かつ効果的な速度最適化の1つ。

また、WordPressサイトを最適化する簡単な方法でもあります。それにもかかわらず、多くのWordPressサイトではGZIPが使用されていないのが現状です。

ウェブサイトにアクセスすると、ブラウザはcontent-encoding: gzipヘッダーの有無でウェブサーバーがGZIPを有効にしているかどうかを確認します。ヘッダーが存在すれば、圧縮されたファイルを取得し、解凍して、より小さなファイルを自動的に提供します。

Chromeのデベロッパーツールに表示される「content-encoding: gzip」ヘッダー
Chromeのデベロッパーツールに表示される「content-encoding: gzip」ヘッダー

GZIPレスポンスヘッダーを検出できない場合、ブラウザは圧縮されていないファイルをダウンロードします。ページの表示速度には、これで数秒も差が出るため、GZIPを有効にしていない場合、サイトの速度測定ツールで圧縮に関する推奨メッセージが表示されます。

Google PageSpeed Insights(Lighthouse)でのGZIPに関する推奨事項

Google PageSpeed Insightsは、サイト上で任意のテキスト圧縮が有効になっていない場合に推奨事項を表示します。

注意)Google PageSpeed InsightsとLighthouseは、2018年にGoogleがPageSpeed Insightsをアップグレードして、分析エンジンとしてLighthouseを使用するまで、それぞれ別のツールとして動作していましたが、現在は同じツールです。

Google PageSpeed Insightsの「テキスト圧縮の有効化」メッセージ
Google PageSpeed Insightsの「テキスト圧縮の有効化」メッセージ

上のスクリーンショットの例では、テキストベースのリソースを圧縮することで、ページサイズを78%以上削減し、ページ読み込み時間を2.1秒も短縮できることがわかります。

注意)PageSpeed Insightsは、サーバーからブラウザに返されるレスポンスヘッダーに依存するため、GZIP圧縮を有効にしていても誤ってこの推奨事項が表示されることがあります。これは、中間プロキシサーバーやセキュリティソフトウェアを使用しているマシン上でテストを行っているからかもしれません。これらは、外部サーバーからの圧縮ファイルのダウンロードを妨害することがあります。

GTmetrixでのGZIPに関する推奨事項

GTmetrixでは、サイトが圧縮されたテキストベースのリソースを提供していない場合、推奨メッセージが表示されます。Google PageSpeed Insights同様、削減可能なリソース量も表示されます。

GTmetrixのGZIP圧縮を推奨する推奨事項
GTmetrixのGZIP圧縮を推奨する推奨事項

注意GTmetrixはスピードテストアルゴリズムをアップグレードし、古いPageSpeed InsightsとYSlowライブラリを最新のLighthouseメトリクスに置き換えています。そのため、Lighthouseで表示される推奨事項と似たものになります。

PingdomでのGZIPに関する推奨事項

Pingdomでは、ウェブサイトの要素をGZIP圧縮を推奨するわかりやすい推奨メッセージが表示されます。

PingdomのGZIP圧縮を推奨する推奨事項
PingdomのGZIP圧縮を推奨する推奨事項

Pingdomでは、GZIPの重要性に関する有益な統計も表示されます。

WebPageTestでのGZIPに関する推奨事項

WebPageTestでは、圧縮可能なレスポンスが最適化されていないことを検出すると、パフォーマンスレビュータブに推奨メッセージが表示されます。

WebPageTestのGZIP圧縮を推奨する推奨事項
WebPageTestのGZIP圧縮を推奨する推奨事項

この推奨事項がどの程度重要であるかを示すスコアも表示されます。例えば、上のスクリーンショットの例では、100点満点中23点と評価されており、すぐにGZIP圧縮の有効化が必要であることを意味します。

GZIP圧縮が有効化どうかを確認する方法

Accept-Encoding: gzip, deflateヘッダーは、事実上すべてのモダンブラウザでサポートされています。そのため、ほとんどのホスティング会社では、GZIP圧縮(またはBrotli圧縮)をデフォルトでサポートしています。

ウェブサーバーは、ブラウザから送信されたこのヘッダーを検出すると、ブラウザがGZIPをサポートしていることを認識し、content-encoding: gzipヘッダーで応答します。

GZIP圧縮などをサポートしていないホスティングを利用している場合、または自分のサイトがGZIP圧縮されたコンテンツを適切に配信しているかどうかがわからない場合は、以下のツールを使用して確認できます。

1. GZIP圧縮テストツール

サイト上でGZIP圧縮が有効になっているかどうかを確認するには、オンラインツールを使用するのが最も簡単な方法です。無料のCheck GZIP Compression、またはHTTP Compression Testがお勧めです。サイトのURLを入力し、「Test URL」または「CHECK」をクリックするだけでOKです。

どちらのツールでも、GZIPが有効かどうかの確認に加えて、GZIP圧縮を有効にしてテストURLを提供することで削減できた(または削減できる可能性のある)データ転送量に関する簡単なレポートを取得できます。

Check GZIP Compressionでは、サイトのサーバータイプ、コンテンツタイプ、圧縮時間など、その他の関連情報が表示されます。

Check GZIP CompressionでKinstaサイトをテスト
Check GZIP CompressionでKinstaサイトをテスト

補足)2021年11月5日より、KinstaはすべてのHTTPSリクエストに対してCloudflare経由のBrotli圧縮を適用しています。リクエストのcontent-encoding: brヘッダーを確認して、Brotli圧縮をテストできます。

HTTP Compression TestでKinstaサイトをテスト
HTTP Compression TestでKinstaサイトをテスト

GZIP圧縮を使った最適化は、ウェブページだけでなく、スタイルシート、スクリプト、フォントなどの静的なテキストベースのアセットも含まれます。これらのアセットの配信にCDNを使用している場合は、CDNでもGZIP圧縮が有効になっているかどうかを確認してください。

Cloudflare、Kinsta CDN、KeyCDN、CloudFrontなど、最新のCDNサービスのほとんどでGZIP圧縮をサポートしています。アセットに直接アクセスすることで、CDN提供のアセットにGZIP圧縮が適用されているかを確認できます。

CDNがホストするアセットのGZIP圧縮テスト
CDNがホストするアセットのGZIP圧縮テスト

上のレポートでは、Kinsta CDNが従来のプル型CDNであるKeyCDNエンジンを使用していることがわかります。

注意)Kinstaでは、お客様のサイトの安全を確保し高速化するために、CloudflareのCDNに移行しました。詳細はこちらをご覧ください。

Kinstaでサイトをホストしている場合、デフォルトでGZIP圧縮より高速なBrotli圧縮が有効になっているため、GZIP圧縮について心配する必要はありません。

2. content-encoding: gzipヘッダー

content-encoding: gzipヘッダーで、GZIP圧縮されたコンテンツを配信しているかどうかを確認することもできます。

このレスポンスヘッダーは、Chromeのデベロッパーツール、またはFirefoxの開発者ツールを開いて、「ネットワーク」タブで確認可能です。

Chromeでの見え方は先ほどご紹介しましたが、Firefoxの開発者ツールでは、以下のように表示されます。

Firefoxの開発者ツールの「content-encoding: gzip」ヘッダー
Firefoxの開発者ツールの「content-encoding: gzip」ヘッダー

Chromeのデベロッパーツールで以下の「Use large request rows」(大きなリクエスト行を使う)を選択すると、ページの元のサイズと圧縮後のサイズの両方を見ることができます。以下のようにGZIP圧縮を使用すると、元のページのサイズは118KBからわずか22.9KBに縮小しました。

Chromeのデベロッパーツールで圧縮と非圧縮のページサイズを見る
Chromeのデベロッパーツールで圧縮と非圧縮のページサイズを見る

3. ページ速度テストツール

ウェブページの配信にGZIPなどの圧縮アルゴリズムを適用していない場合、ほとんどのページ速度テストツールでも推奨事項が表示されます。

ページ速度テストツールのGZIP圧縮を推奨する推奨事項
ページ速度テストツールのGZIP圧縮を推奨する推奨事項

PageSPeed Insights、GTmetrix、Pingdom Tools、WebPageTestなどのツールを使用して、WordPressサイトでGZIP圧縮が有効になっているかどうかをチェックできます。

GZIP圧縮を有効にする方法

ウェブサーバーでGZIP圧縮を有効にする方法は多数あります。具体的な方法については、サイトをホスティングしているウェブサーバーによって異なります。

重要)例によって、サーバーの設定ファイルを編集する前に必ずサイトをバックアップしましょう。

1. WordPressプラグインでGZIP圧縮を有効にする

WordPressサイトでGZIP圧縮を有効にする最も簡単な方法は、キャッシュまたはパフォーマンス最適化プラグインを使用すること。

例えば、ApacheでWordPressサイトを運用している場合、W3 Total Cacheの「Browser Cache」画面でGZIP圧縮を有効にすることがでいます。

WP RocketはGZIP圧縮ルールを自動追加してくれます。どちらのプラグインもApacheのmod_deflateモジュールが.htaccessファイルに追加されることでGZIP圧縮が有効になります。

W3 Total CacheでGZIP圧縮を有効化
W3 Total CacheでGZIP圧縮を有効化

WordPressプラグインには、ウェブサーバー上のファイルを変更する権限が必要です。適切な権限が付与されていない場合、失敗するかエラーが表示されます。

この場合はホスティング会社に連絡するか、以下でご紹介するコードを使ってウェブサーバーの設定ファイルを自分で変更してください。

補足)Kinstaのプラットフォームは、高性能、信頼性、およびセキュリティの面で最適化されており、GZIP圧縮もデフォルトで有効になっています。

Kinstaでは、内部パフォーマンス最適化と競合する恐れがあるため、サードパーティのキャッシュプラグインのほとんどの使用が禁止されています。詳細はこちらをご覧ください。

2. ApacheでGZIP圧縮を有効にする

Netcraftによると、Apacheは現在使用されているウェブサーバーの中で最も使用されており、WordPressが公式に推奨するウェブサーバーの1つでもあります。

ApacheでGZIP圧縮を有効にするには、mod_filterモジュールと mod_deflateモジュールを使用して、正しいディレクティブで適切に設定しなければなりません。このディレクティブは、ネットワーク経由でクライアントに送信する前に、サーバー出力を圧縮するようにApacheに指示する役割を担います。

アクセス権限に応じて、Apacheのサーバー設定を編集する方法は以下の2通りあります。

  1. .htaccessファイルはApacheの速度に影響を与える可能性があるため、メインのサーバー設定ファイル (通常はhttpd.conf)にアクセスできる場合はこれで設定を行う。
  2. メインのサーバー設定ファイルにアクセスできない場合、.htaccessファイルを編集する(ほとんどのWordPress向け共用サーバーはこれに該当)。

ホスティング会社がメインのサーバー設定ファイルの編集を許可することはほとんどないため、1つ目の選択肢は基本的にシステム管理者向けです。具体的な手順等については、HTML5 Boilerplateプロジェクトで共有されているApacheサーバーの設定ファイル例Apacheのドキュメントを参照してください。

多くの共用サーバーで.htaccessファイルの編集は許可されているため、WordPressサイト所有者向けに2つ目の方法を詳しくご紹介します。

まずは、SFTPまたはホストのオンラインファイルマネージャーを使用して、WordPressサイトのルートディレクトリにある.htaccessファイルを見つけましょう。見つけたら、以下を貼り付けてください。

重要mod_filterモジュールがサーバー上で有効になっていることを確認してください。ほとんどの場合は有効になっていますが、有効になっていない場合、AddOutputFilterByTypeディレクティブは動作せず、500エラーが発生する可能性があります。以下のコードスニペットを貼り付けた後に問題が生じた際には、サーバーのエラーログを確認してください。

<IfModule mod_deflate.c>
  # HTML、CSS、JavaScript、テキスト、XML、フォントを圧縮する
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  #ブラウザのバグを取り除く(古いブラウザのみ)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

.htaccessファイルの既存のディレクティブの後に上記のコードを貼り付けたら、ファイルを保存し、サーバーでGZIP圧縮が有効になっているか確認します。

GZIP圧縮を有効にした後のApacheの.htaccessファイル
GZIP圧縮を有効にした後のApacheの.htaccessファイル

これで、ウェブサーバーは上記のすべてのファイル拡張子の圧縮版を提供するようになります(前述の方法で確認可能)。

クライアント側のプロキシやセキュリティソフトウェアがGZIP圧縮を妨害しないようにするには、上記のコードを以下に置き換えてください。

<IfModule mod_deflate.c>
  # Accept-Encodingリクエストヘッダーを乱用するクライアントを強制的に圧縮する
  <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
  </IfModule>

  # 以下のファイル拡張子のいずれかですべての出力を圧縮する
  <IfModule mod_filter.c>
    AddOutputFilterByType DEFLATE "application/atom+xml" 
                                  "application/javascript" 
                                  "application/json" 
                                  "application/ld+json" 
                                  "application/manifest+json" 
                                  "application/rdf+xml" 
                                  "application/rss+xml" 
                                  "application/schema+json" 
                                  "application/geo+json" 
                                  "application/vnd.ms-fontobject" 
                                  "application/wasm" 
                                  "application/x-font-ttf" 
                                  "application/x-javascript" 
                                  "application/x-web-app-manifest+json" 
                                  "application/xhtml+xml" 
                                  "application/xml" 
                                  "font/eot" 
                                  "font/opentype" 
                                  "font/otf" 
                                  "font/ttf" 
                                  "image/bmp" 
                                  "image/svg+xml" 
                                  "image/vnd.microsoft.icon" 
                                  "text/cache-manifest" 
                                  "text/calendar" 
                                  "text/css" 
                                  "text/html" 
                                  "text/javascript" 
                                  "text/plain" 
                                  "text/markdown" 
                                  "text/vcard" 
                                  "text/vnd.rim.location.xloc" 
                                  "text/vtt" 
                                  "text/x-component" 
                                  "text/x-cross-domain-policy" 
                                  "text/xml"
  </IfModule>

  # メディアタイプを定義し、適切なエンコーディングタイプにマッピングしてください。
  # ロゴ、アイコン、テキスト、シンプルな画像を読み込むには
  # SVG(Scalable Vector Graphics)を使用することを強くお勧めします。圧縮可能です。
  # さらにGZIPを使って、SVGファイルから.SVGZファイルを作成します。
  # しかしほとんどのブラウザは、適切なcontent-encodingヘッダーが付与されていなければ
  # 最初に解凍する必要があることが把握できず、この画像がブラウザに表示されず、
  # このモジュールになります。

  <IfModule mod_mime.c>
    AddType image/svg+xml svg svgz
    AddEncoding gzip svgz
  </IfModule>

</IfModule>

ここで使用されているすべてのディレクティブについては、コードリポジトリで確認可能です。リンクされているすべてのリソースをたどってください。

3. NginxでGZIP圧縮を有効にする

Netcraftによれば、Nginxはウェブ上のコンピュータで最も使用されているウェブサーバーです。このままいくと、近い将来Apacheよりも広く普及することが予想されます。KinstaはNginxを使用し、パフォーマンスに最適化されたホスティングソリューションを提供しています。

ngx_http_gzip_moduleで定義されているディレクティブを使うことで、NginxでGZIP圧縮を有効にできます。

手始めに、以下に示すディレクティブをnginx.confファイルに貼り付けます。通常、このファイルはサーバーの/etc/nginx/nginx.confの場所に格納されています。

# GZIP圧縮を有効にする
gzip on; 

# 圧縮率(1〜9)
# CPU使用率とファイルサイズのバランスが良いのは6
gzip_comp_level 6;

# 効果的に圧縮するためのファイルサイズの最小制限(バイト単位)
gzip_min_length 256;

# プロキシ経由で接続するクライアントのデータを圧縮する
gzip_proxied any;

# プロキシがアセットの通常版とGZIP版の両方をキャッシュするように指示する
gzip_vary on;

# GZIPをサポートしていない古いブラウザでGZIP圧縮を無効にする
gzip_disable "msie6";

# 以下のファイル拡張子または MIMEタイプでラベル付けされた出力を圧縮する
# text/html MIME-typeはデフォルトで有効になっているため、含める必要はない
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

サイトで大きなJSファイルやCSSファイルを提供している場合は、nginx.confファイルに以下のディレクティブを追加することで、圧縮に使用するバッファサイズを増やすことができます。

# GZIP圧縮用のバッファの「数」と「サイズ」を設定する
# デフォルトのバッファサイズは4Kまたは8K(プラットフォームによる)
gzip_buffers 16 8k;

nginx.confファイルを保存したら、忘れずにNginxを再読み込みしてください。

sudo service nginx reload

最後に、サーバーでGZIP圧縮が有効になっているかどうかをテストします。最新のngx_http_gzip_moduleディレクティブ一覧は、Nginxの公式ドキュメントを参照してください。

4. IISでGZIP圧縮を有効にする

MicrosoftのInternet Information Services(IIS)は、現在3番目に広く使用されているウェブサーバーです。Windows上で動作する企業環境で、特に企業固有のイントラネットやエクストラネットサーバーを構築するために導入されるのが一般的です。

様々な互換性の問題があるため、WordPressサイトの運営に使用されることはほとんどありません

しかし、IISでGZIP圧縮を有効にする必要があるような稀な状況にある場合は、Microsoftの公式ドキュメントをご覧ください。また、Stack Overflowのスレッドも役立つかもしれません。

GZIPに代わる圧縮アルゴリズム

ウェブにおけるデータ圧縮は常に進歩しています。平均ページサイズは増え続けており、データ転送の効率化を図るため、ウェブ技術も日々改善されています。

平均ページサイズの推移(出典: HTTPArchive)
平均ページサイズの推移(出典: HTTPArchive)

Brotliは、ここ数年で広く普及し始めている圧縮アルゴリズムです。WOFF2ウェブフォントの圧縮が主な目的でしたが、その後あらゆるタイプのデータ圧縮をサポートするようになりました。

BrotliはGZIPよりも高い圧縮率を実現しますが、圧縮にかなりの時間とリソースが必要です。解凍速度はGZIPに匹敵しますが、それでも若干遅れをとります。

Brotliはさまざまなブラウザでサポートされている
Brotliはさまざまなブラウザでサポートされている

現在、ほとんどのブラウザでBrotliがサポートされていますが、WordPressサイトでの使用方法はまだ少し複雑で、Brotliに対応している、またはBrotliライブラリのインストールが可能なホスティングサービスを利用する必要があります。多くのマネージドWordPressホスティングで、まだ完全にサポートされていませんが、CloudflareKeyCDNのようなCDNを使用すれば、有効化できます。

まとめ

最適化されたサイトは訪問者に好印象を与えます。訪問者は快適なブラウジング、サイト所有者はホスティング費用の削減、そしてホスティング会社はサーバーレベルでの最適化を望むもの。GZIPのような圧縮技術は、ページを高速配信するのに最も効果的な手法の1つです。

GZIP圧縮を有効にすることで、WordPressサイトは即座に高速化します。Kinstaのホスティングサービスでは、デフォルトでGZIP圧縮が有効になっています。Kinsta以外をご利用の方はこの記事を参考に、お使いのウェブサーバーでGZIP圧縮を有効にしてみてください。

ウェブサイトにとってスピードは命。アセットを効果的に圧縮して配信しましょう。

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.