WordPressサイトを高速化する最も簡単な方法は、すべての不要なリソースの削除です。そして、次に簡単な方法が、すべての必要なリソースの圧縮です。ウェブサーバーでのGZIP圧縮は、最もシンプルで効率的な高速化の一つです。

最新のブラウザは、デフォルトでGZIP圧縮をサポートしています。しかし、圧縮されたリソースをスムーズに正しくユーザーに提供するには、適切にサーバーを設定する必要があります。

この記事では、ウェブにおけるデータ圧縮の基本、GZIP圧縮とは何か、その様々な利点、そしてGZIP圧縮を使用した異なるサーバー設定における、WordPressサイトの高速化を学びます。

面白そうでしょう?早速始めましょう!

動画でも解説しています。

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

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

ウェブページの主要コンポーネント
ウェブページの主要コンポーネント

例えば、HTML、CSS、JavaScriptの縮小化(ミニファイ)は、ブラウザから送信されるデータ量を減らす簡単な方法です。ミニファイはソースコードの中から、コメントや空白などの不要な文字を削除してテキストを圧縮します。

以下の簡単なHTML文書の例では、3つのコンテンツタイプがあります。HTMLマークアップ、CSSスタイル、JavaScriptコードです。

各コンテンツタイプには固有の構文とセマンティクスがあり、HTML文書全体では357文字あります。

<html>
<head>
    <style>
    /* kinsta-banner is used on the homepage only */
    .kinsta-banner { font-size: 150% }
    .kinsta-banner { width: 75% }
</style>
</head>
<body>
    <!-- kinsta banner START -->
    <div>...</div>
    <!-- kinsta banner END -->
    <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>

ミニファイ後のHTML文書は、わずか141文字にまで減少し、文字数にして60.50%も削減できます。ミニファイした文書は、人間にとっては読みやすくありませんが、ブラウザにとっては関係なく、ユーザーには同じページが表示されます。

両方のバージョンを活用する方法として、オリジナルのドキュメントを「開発バージョン」として維持しながら、本番サイトでは公開前にすべてのコードをミニファイする方法があります。

ほとんどのWordPressパフォーマンスプラグインは、この処理を自動的に行います。

jQueryの通常版とミニファイ版でのファイルサイズの比較
jQueryの通常版とミニファイ版でのファイルサイズの比較

例えば、jQuery 3.5.1ライブラリのミニファイ版は、同じファイルの通常版の3分の1以下の大きさです。

このような圧縮技術は、画像、動画、フォントなどの他のコンテンツタイプも同様に最適化できます。コンテンツ固有の圧縮は、ウェブサイトのテキストベースアセットのサイズを最適化する最初のステップです。

しかし、ミニファイだけがデータ圧縮ではありません。高度な数学を用いたデータ圧縮アルゴリズムは、データサイズをさらに小さくします。

データ圧縮法の中で、もっとも有名な方法のひとつがGZIPです。GZIPは、効率的なデータ転送を可能にし、インターネットが世界的な通信メディアとして普及することに大きく貢献しました。

GZIP圧縮とは何か?

GZIPは、GNU Zipの略で、ウェブ上で最も人気のある可逆データ圧縮法です。サイトのHTMLページ、スタイルシート、スクリプトのサイズを圧縮できます。

GZIPは、データ圧縮アルゴリズムであると同時に、ファイルの拡張子(.gz)でもあり、ファイルの圧縮、解凍に使用されるソフトウェアでもあります。

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

GZIP圧縮はDEFLATEアルゴリズムに基づく
GZIP圧縮はDEFLATEアルゴリズムに基づく

GZIPコンプレッサは、生データのセットを受け取り、可逆圧縮します。生データはどのような種類のファイルでも構いませんが、GZIPは特にテキストベースのアセット(HTML、CSS、JavaScriptなど)に適しています。

次のセクションでは、GZIP圧縮の仕組みについて詳しく説明します。

GZIPのデータ圧縮方法

GZIP圧縮の概要
GZIP圧縮の概要

まず、GZIPコンプレッサは、生データに対してLZ77圧縮アルゴリズムを実行し、冗長性を取り除きます。このアルゴリズムは、あらかじめ定義された、生データの小さな断片「スライディングウィンドウ」の中で繰り返されるパターンを探します。

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

LZ77符号化アルゴリズムの図解
LZ77符号化アルゴリズムの図解

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

生データをLZ77アルゴリズムで圧縮した後、GZIPコンプレッサはハフマン符号化アルゴリズムを使用してさらに圧縮します。ハフマン符号化アルゴリズムでは、出現頻度の高い文字には最小のビット数を、出現頻度の低い文字には最大のビット数を割り当てます。

これはモールス信号で使用されている技術に似ています。モールス信号では、英語で出現頻度の高い文字が、最も短い並びになっています。

ここでハフマン符号化アルゴリズムの仕組みの理解のために、単語 BOOKKEEPERを考えます。この単語は10文字ですが、ユニークな文字は6文字しかありません。中には1文字、2文字、3文字の重複がうまく含まれています。

ほとんどのウェブサイトでは、文字や記号の表現にUTF-8文字コードを使用しています。英語のアルファベットを含むUTF-8のASCII文字は、1バイト(8ビット)を使用します。

単語「BOOKKEEPER」では多くの文字が重複している
単語「BOOKKEEPER」では多くの文字が重複している

10文字の 単語 BOOKKEEPER であれば、10バイト(80ビット)のメモリが必要です。また 「BOOKKEEPER」には B, P, R、 の文字が1つ、 OK、 の文字が2つ、 E の文字が3つ含まれています。

ハフマン符号化アルゴリズムは、この知識を利用して文字列を可逆的に圧縮します。これは、ユニークな文字をリーフ(葉)とする二分木の生成によって行われます。

頻度の低い文字(例:BPR)はツリーの下方に、頻度の高い文字(例:EOK)はツリーの上方に配置します。

ツリーの一番上のノードがルート(根)で、その値は文字列の総文字数と同じです。

単語「BOOKKEEPER」のハフマンツリー
単語「BOOKKEEPER」のハフマンツリー

ハフマンツリーを生成した後、左右に分岐する矢印にそれぞれ数字の01を付与します。そして、ルートからリーフへの経路をたどり、すべての01を結合して、文字のハフマン符号を生成します。

ハフマン符号はすべての文字のユニークなバイナリ符号
ハフマン符号はすべての文字のユニークなバイナリ符号

頻度の高い文字が、ビットサイズの小さなハフマン符号になっていることに注意してください。

注意:ハフマン符号化アルゴリズムでは、同じ頻度の文字に対して異なる順序付け戦略を用いることで、別のバイナリコードを生成できます。しかし、符号化された文字列の合計サイズは変わりません。

80ビットの単語を25ビット文字列にエンコード
80ビットの単語を25ビット文字列にエンコード

単語の保存に必要なメモリを68.75%削減しました。

0/1の規則を持つハフマンツリーを使用すると、語頭属性を満たすバイナリ符号が生成されます。ある文字のハフマン符号は他の符号文字の接頭部にならないことが保証されるため、ハフマンツリーを使用して符号化された文字列は、簡単に復号できます。これは、GZIPの解凍速度に大きな役割を果たします。

これまで見てきたように、GZIPコンプレッサは、ハフマン符号化アルゴリズムを使用して、LZ77アルゴリズムで生成されたタプルをさらに最適化します。結果、拡張子「.gz」の高圧縮ファイルが生成されます。

さらに詳しくGZIPの仕組みを知るには、こちらのビデオの概要をご覧ください。

GZIP圧縮の実力は?

通常、GZIPは小さなファイルで約70%の圧縮率ですが、大きなテキストベースのアセットでは90%に達する場合もあります。

人気のCSSおよびJavaScriptライブラリのGZIP圧縮率
人気のCSSおよびJavaScriptライブラリのGZIP圧縮率

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

注意:GZIPでは、どのような種類のファイルでも圧縮できますが、すでに他の方法で圧縮されているアセット(画像やビデオなど)は、さほど圧縮できません。場合によっては、ファイルサイズが大きくなる場合もあります。

圧縮アルゴリズムの評価では、単に圧縮率だけでなく、データの圧縮、解凍をいかに迅速かつ効率的に行うかも重要です。GZIPはほとんどのユースケースで優れています。

GZIPはストリーミングアルゴリズムを用いて高速に解凍するため、スピードが重要なウェブプロトコルに最適です。さらに、GZIPはデータの圧縮と解凍の両方に最小限のリソースしか使用しないため、サーバーとクライアントの両方にとって理想的なソリューションです。

Compression performance of brotli vs bzip2 vs GZIP vs xz (Source: OpenCPU)
圧縮性能:Brotli、bzip2、GZIP、xz(出典:OpenCPU)

上のグラフでは、Brotli、bzip2、GZIP、xzの各圧縮アルゴリズムの性能を比較しています。GZIPは、圧縮率で若干劣りますが、圧縮速度、解凍速度では他を圧倒しています。

この圧縮速度のグラフを見ると、GZIPはHTTPサーバーやウェブ上の他のデータストリームのリアルタイム圧縮に最適であると結論できます。こうしたウェブの発展に寄与する特長が評価され、IETFはGZIPを、HTTP/1.1の圧縮のための3つの標準フォーマットの1つとして承認しました。

注意:GZIPの圧縮ライブラリを抽象化したzlibは、多くの一般的なOS(Linux、macOS、iOS)や最新のゲーム機(PlayStation 4、Wii U、Xbox One)で使用されています。また、画像を圧縮する可逆PNGファイルフォーマットにも採用されています。

GZIP圧縮の6つの利点

GZIP圧縮の最も重要な利点を詳しく見てみましょう。

適正な圧縮率

前述したように、GZIPは競合する技術の中で最高の圧縮率ではありません。しかし、それほど劣っているわけでもありません。一般には、テキストベースのリソースサイズを70〜90%削減します。

超高速な圧縮と解凍

データの圧縮と解凍の速さでは、GZIPが他を圧倒します。HTTPサーバーやその他のデータストリームでの動的な圧縮に、非常に適しています。

超高速な圧縮と解凍

GZIPは、最小限のメモリしか使用しないため、メモリ容量が限られたサーバーやシステムにも適しています。安価なレンタルサーバーでもサポートされています。

最悪のケースでも、あまり大きくならない

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

一般には、リソースがすでに十分圧縮されている場合や、リソースが小さく、GZIP辞書を追加するオーバーヘッドが、圧縮による削減分を上回る場合に発生します。この現象は、エントロピー符号化と呼ばれる概念に起因します。GZIPはこの現象に対して非常に強い耐性を持ちます。

自由に使えてオープンソース

GZIPは元々、初期のUnixシステムで使用され、特許で保護された「compress」プログラムに代わる、自由でオープンソースのプログラムとして作成されました。そのため、特許は取得されておらず、誰でも自由に使用できます。

世界中の支持

W3Techsによると、GZIP圧縮は調査対象のすべてのウェブサイトの82%で使用されており、ウェブ上で最も広く使用されている圧縮アルゴリズムです。

GZIPは、ほとんどすべてのサーバーとクライアントでサポートされています。サイトの稼働にどのレンタルサーバーを使用していても、GZIPを有効化することで速度を向上できます。

ウェブサイトのスピードテストツールにおけるGZIPの警告

GZIPの有効化はミニファイに次ぐ、ウェブサイトで実装可能な、最もシンプルで効果的な速度最適化の1つです。

GZIPの有効化はまた、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とGoogle Lighthouseは、2つの別々のウェブサイトパフォーマンステストツールでした。2018年まで、両者は互いに独立して機能していましたが、GoogleがPageSpeed InsightsをアップグレードしてLighthouseを分析エンジンとして使用するようになりました。このため、現在ではPageSpeed InsightsとLighthouseは一体化した同じものです。

Google PageSpeed Insightsでの警告「テキスト圧縮を有効化してください」
Google PageSpeed Insightsでの警告「テキスト圧縮を有効化してください」

上のサイトの例では、テキストベースのリソースを圧縮することで、ページサイズを78%以上削減し、ページの読み込み時間を2.1短縮できます。

注意:PageSpeed Insightsは、サーバーからブラウザに返されるレスポンスヘッダーに依存します。このため、GZIP圧縮を有効にしていても、誤った警告が表示される場合があります。これは恐らく、中間プロキシサーバーやセキュリティソフトウェアを使用したサーバーで、スピードテストを実行しているためと考えられます。これらが外部サーバーからの圧縮ファイルのダウンロードを妨害している可能性があります。

GTmetrixにおけるGZIPの警告

GTmetrixも、ウェブサイトから圧縮したテキストベースのリソースがない場合に警告を表示します。また、Google PageSpeed Insightsと同じように、圧縮した場合の削減分を表示します。

GTmetrixでの警告「圧縮を有効化してください」
GTmetrixでの警告「圧縮を有効化してください」

注意GTmetrixは、スピードテストのアルゴリズムを更新し、古いPageSpeed InsightsとYSlowライブラリを、最新のGoogle Lighthouse指標で置き換えました。予想されるようにGTmetrixのGZIP圧縮の警告は、Lighthouseの表示と類似します。

Pingdom ToolsにおけるGZIPの警告

Pingdom Toolsは、もっと直接的に、ウェブサイトのコンポーネントをGZIPで圧縮するよう警告します。

Pingdom Toolsでの警告「GZIPでコンポーネントを圧縮してください」
Pingdom Toolsでの警告「GZIPでコンポーネントを圧縮してください」

説明欄ではまた、GZIPの重要性についての統計情報も示されます。

WebPageTestでのGZIPの警告

WebPageTestは、最適化の方法に圧縮可能なレスポンスがないことを検出すると、「パフォーマンスレビュー」タブに警告を表示します。

WebPageTestでの警告「GZIP圧縮を使用してください」
WebPageTestでの警告「GZIP圧縮を使用してください」

WebPageTestでは、警告の重要度を示すために点数を付けています。例えば、上の警告は100点中で23点と評価し、優先的に修正する必要があることを示します。

GZIP圧縮を確認する方法

HTTPヘッダー Accept-Encoding: gzip, deflate は、事実上すべての最新のブラウザでサポートされています。そのため、Kinstaを含むほとんどのレンタルサーバーでは、デフォルトでGZIP圧縮を有効化しています。

ウェブサーバーは、ブラウザから送られてきたこのヘッダーを見て、ブラウザがGZIPをサポートしていることを認識し、ヘッダー content-encoding: gzip を使用して、圧縮したHTTPレスポンスを返します。

しかし、その他のWordPressレンタルサーバーを利用している場合や、自分のウェブサイトが適切にGZIP圧縮したコンテンツを送信しているかどうかを確認したい場合は、GZIP圧縮の有無を確認してください。

以下に、GZIP圧縮を確認する簡単な方法をいくつかご紹介します。

1. オンラインGZIP圧縮テストツール

オンラインツールを使用して、ウェブサイトでのGZIP圧縮を簡単に確認できます。これには無料の「Check GZIP Compression」または「HTTP Compression Test」ツールをお勧めします。ウェブサイトのURLを入力して、「チェック」または「テスト」ボタンを押すだけで確認できます。

いずれも、GZIP圧縮が有効かどうか、またGZIP圧縮を有効にしたテストURLを提供して、節約できた(あるいは、節約できる)データ転送量について、簡単なレポートを表示します。

Check GZIP Compressionは、ウェブサイトのサーバータイプ、コンテンツタイプ、圧縮時間など、その他の関連情報も表示します。

Check GZIP CompressionツールでKinstaのホームページをテスト
Check GZIP CompressionツールでKinstaのホームページをテスト
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」エンジンを使用していることがわかります。WordPressサイトにKinstaを使用している場合は、GZIP圧縮がデフォルトで有効のため特に心配する必要はありません。

2. HTTPレスポンスヘッダー「content-encoding: gzip」

ウェブサイトがGZIP圧縮されたコンテンツを配信しているかどうかを確認する2つ目の方法は、HTTPレスポンスヘッダ content-encoding: gzip の確認です。

ChromeのデベロッパーツールやFirefoxのウェブ開発ツールを開き、「ネットワーク」セクションでレスポンスヘッダを探します。

すでに、Chromeデベロッパーツールの例は紹介しました。ここでは、Firefoxのウェブ開発ツールでの例を紹介します。

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

また、Chromeデベロッパーツールの設定パネルで「Use large request rows(大きなリクエスト行を使用)」オプションを有効にすると、ページの元のサイズと圧縮後のサイズの両方を確認できます。下図のように、オリジナルでは118KBのページが、GZIPで圧縮後はわずか22.9KBになりました。

Chromeデベロッパーツールでの圧縮前後のページサイズの表示
Chromeデベロッパーツールでの圧縮前後のページサイズの表示

3. ウェブページのスピードテストツール

これまで詳細に見てきたように、ほとんどのウェブサイトのスピードテストツールは、ウェブページの配信にGZIPのような圧縮技術を使用していない場合、警告を出力します。この記事にたどり着いた多くの読者は、まさにこのGZIPの警告を見て来たのでしょう。

様々なウェブページスピードテストツールでのGZIPの警告
様々なウェブページスピードテストツールでのGZIPの警告

PageSPeed Insights、GTmetrix、Pingdom Tools、WebPageTestなどのツールを使用して、WordPressサイトでのGZIP圧縮を確認できます。

GZIP圧縮を有効化する方法

ウェブサーバーでGZIP圧縮を有効にするには様々な方法がありますが、正しい方法は、ウェブサイトで使用しているウェブサーバーによって異なります。

重要:いつものように、サイトやサーバー設定ファイルを編集する前に、バックアップを取得してください。

WordPressプラグインを使用したGZIPの有効化

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

例えば、WordPressサイトをApacheウェブサーバーで運用している場合、W3 Total Cacheの「ブラウザキャッシュ」設定パネルには、GZIP圧縮を有効化するオプションがあります。

同様に、WP Rocketは、GZIP圧縮ルールを自動的に追加します。これらのプラグインは、.htaccessファイルにApacheの mod_deflate モジュールを追加することでGZIP圧縮を有効化します。

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

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

このような場合は、レンタルサーバーに問い合わせるか、以下のコードスニペットを使用して、ウェブサーバーの設定ファイルを手動で変更する必要があります。

注意:Kinstaは、パフォーマンス、信頼性、セキュリティのためにプラットフォームを最適化しました。これには、すべてのホスティングプランにおけるデフォルトでの、GZIP圧縮の有効化も含まれます。

なお、サードパーティ製のキャッシュプラグインは、Kinstaの内部パフォーマンス最適化と衝突する可能性があるため、ほとんどのキャッシュプラグインを許可していません。詳細については、Kinstaの禁止プラグインの完全なリストをご参照ください。

ApacheウェブサーバーでのGZIPの有効化

Netcraftによると、現在使用されているウェブサーバーの中で、Apacheは、最も多くのアクティブなサイトで使われています。また、WordPressの推奨する2つのウェブサーバのうちの1つです。

ApacheサーバーでGZIP圧縮を有効にするには、 mod_filtermod_deflate モジュールを使用して、正しいディレクティブで適切に設定する必要があります。モジュールはApacheに指示して、ネットワーク経由でクライアントに送信する前にサーバーの出力を圧縮します。

Apacheのサーバー設定を編集するには、アクセスレベルに応じて2つのオプションがあります。

  1. メインサーバー設定ファイル(通常はhttpd.conf)にアクセスできる場合は、これを使用してApacheを設定することをお勧めします。.htaccessファイルはApacheを遅くする可能性があります。
  2. ほとんどのWordPress共用レンタルサーバーでは、メインサーバー設定ファイルにアクセスできません。このため、.htaccessファイルを使用してApacheを設定する必要があります。

最初の方法はシステム管理者向けです。レンタルサーバーでメインのサーバー設定ファイルの編集が許可されることはほとんどありません。詳細な説明は、この記事の対象範囲外です。HTML5 Boilerplateプロジェクトで共有されているApache Server Configsのサンプルや、Apacheのドキュメントをご参照ください。

2番目の方法は、ほとんどのWordPressサイトの所有者にとって理想的です。多くの共用レンタルサーバーで、.htaccessファイルの編集が許可されるためです。

まず、SFTPやサーバーのオンラインファイルマネージャを使用して、WordPressサイトのルートディレクトリにある.htaccessファイルを探します。そして、以下のコードスニペットを追加します。

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

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  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  

  # Remove browser bugs (only needed for ancient browsers)
  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>
  # force compression for clients that mangle 'Accept-Encoding' request headers
  <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>

  # compress all output with one of the following file extensions
  <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>

  # define and map media types to their appropriate encoding type    
  # Using SVG format (Scalable Vector Graphics) is highly recommended to    
  # load logos, icons, text, and simple images. You can compress .SVG files
  # further using GZIP to create .SVGZ files. However, most browsers don’t
  # know that they need to decompress them first if they’re not served
  # without an appropriate ‘content-encoding’ HTTP response header. Thus,
  # these images wouldn’t show up in the browser. Hence, this module.

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

</IfModule>

ここで使用したすべてのディレクティブの詳細については、コードリポジトリにアクセスし、リンクされているすべてのリソースをご参照ください。

NginxウェブサーバーでのGZIPの有効化

Netcraftによると、Nginxはウェブ用のコンピュータで最も使用されているウェブサーバーです。現在の傾向が続けば、NginxはすぐにApacheを抜いて、アクティブなサイトで最も使用されているウェブサーバーになるでしょう。Kinstaでは、WordPressのパフォーマンスを最適化したホスティングソリューションにNginxを使用しています。

NginxウェブサーバーでGZIP圧縮を有効にするには、ngx_http_gzip_moduleで定義されたディレクティブを使用します。

まず、nginx.confファイルに以下のディレクティブを追加します。通常、このファイルはサーバーの /etc/nginx/nginx.conf にあります。

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
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;

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

# sets the 'number' and 'size' of buffers for GZIP compression
# default buffer size is 4K or 8K depending on the platform
gzip_buffers 16 8k;

nginx.confファイルを保存したら、忘れずにNginxをリロードしてください。

sudo service nginx reload

最後に、サーバーでのGZIP圧縮をテストする必要があります。すべての ngx_http_gzip_module ディレクティブの最新リストは、Nginxのドキュメントをご参照ください。

IISウェブサーバーでのGZIPの有効化

MicrosoftのInternet Information Services(IIS)は、現在使用されているウェブサーバーの中で3番目に普及しています。IISは主にWindowsを使用した企業環境に導入されており、特に企業独自のイントラネットやエクストラネットのサーバー構築に使用されています。

様々な互換性の問題から、WordPressサイトのサーバーにはほとんど使用されていません

しかし、もしIISでGZIP圧縮を有効にする必要が出た場合は、Microsoftのドキュメントをご参照ください。また、Stack Overflowのスレッドも参考になるかもしれません。

GZIP圧縮の代替

ウェブ上のデータ圧縮の世界は常に進歩しています。平均ページサイズが常に増え続けている中、ウェブ技術もこれに追いつき、ウェブ上でのデータ転送の効率をより高めようとしています。

時間軸で見たページサイズの増加(出典:HTTPArchive)
時間軸で見たページサイズの増加(出典:HTTPArchive)

ここ数年、新しい圧縮アルゴリズムが広く普及しています。「Brotli」です。Brotliは当初、WOFF2ウェブフォントの圧縮を主な目的としていましたが、その後、あらゆる種類のデータを圧縮できるように拡張されました。

BrotliはGZIPよりもデータの圧縮に優れますが、かなりの時間とリソースを必要とします。また解凍時間は同等ですが、それでもGZIPよりは若干遅くなります。

様々なブラウザのBrotilサポート
様々なブラウザのBrotilサポート

現在、ほとんどのブラウザがBrotliをサポートします。しかし、WordPressサイトでのBrotliの使用は、まだやや複雑で、Brotliをサポートするか、Brotliライブラリのインストールを許可するレンタルサーバーでWordPressを稼働する必要があります。ほとんどのマネージドWordPressサーバーでは、まだBrotliを完全にはサポートしていません。ただし、CloudflareKeyCDNなどのCDNを使用していれば、簡単にBrotliを有効化できます。

Brotliの静的アセットの圧縮は、大いに期待されています。Akamaiは、BrotliとGZIPを比較した詳細な記事を発表しました。Brotliの詳細については、そちらをご覧ください。

まとめ

最適化されたウェブは、誰にとっても素晴らしいものです。ユーザーは高速なウェブサイトを望み、サイトの所有者はサーバー代金の削減を望み、レンタルサーバーはサーバー上で達成される最適化を望みます。GZIPを始めとする圧縮技術は、ページロードの時間を短縮する最良の方法のひとつです。

WordPressサイトの所有者は、GZIP圧縮を使用することで瞬時に高速化できます。Kinstaでは、すべてのサーバーのデフォルトで、GZIP圧縮が有効です。その他のレンタルサーバーをお使いの場合は、この記事を参考にして、様々なウェブサーバーでのGZIP圧縮を有効にする、複数の方法を試してみてください。

すべてのウェブサイトでスピードは重要です。圧縮しましょう!

Salman Ravoof Kinsta

Salman Ravoof is a Technical Editor at Kinsta. He's 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.