GZIP圧縮を有効にしてWordPressサイトを高速化する方法

公開: 2020-10-16

WordPressサイトを高速化する最も簡単な方法は、不要なリソースをすべて排除することです。それをスピードアップする2番目に簡単な方法は、必要なすべてのリソースを圧縮することです。 WebサーバーでGZIP圧縮を有効にすることは、それを実現するための最も簡単で効率的な方法の1つです。

最近のすべてのブラウザには、デフォルトでGZIP圧縮のサポートが含まれています。ただし、圧縮されたリソースを問題なくユーザーに提供するには、サーバーを適切に構成する必要があります。

この投稿では、Webでのデータ圧縮の基本、GZIP圧縮とは何か、そのさまざまな利点、およびさまざまなサーバー設定でWordPressサイトを高速化するためにそれを使用する方法について学習します。

興奮した？解凍しましょう！

ビデオ版を見たいですか？

#WordPressサイトを高速化する最も簡単な方法は、不要なリソースを取り除くことです。 2番目に簡単な方法：必要なすべてのリソースを圧縮します。 GZIP圧縮でこれをすばやく行う方法を学ぶクリックしてツイート

Webでのデータ圧縮の基本

Webでのデータ圧縮は、Webサイトによって送信されるデータのサイズを縮小するプロセスです。データタイプ（テキスト、画像、スタイルシート、スクリプト、フォント）に応じて、データの圧縮にはさまざまな方法があります。

ウェブページの主要コンポーネントのイラスト — Webページの主なコンポーネント

たとえば、HTML、CSS、およびJavaScriptの縮小は、ブラウザーによって送信されるデータの量を減らすための簡単な方法です。ここで、ミニファイアは、コメントや空白などの不要な文字をソースコードから削除することにより、テキストを圧縮します。

以下の単純なHTMLドキュメントの例では、HTMLマークアップ、CSSスタイル、およびJavaScriptコードの3つのコンテンツタイプがあります。

各コンテンツタイプには、固有の構文とセマンティクスがあります。全体として、この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のファイルサイズの比較 — 非圧縮vs縮小jQueryのファイルサイズ圧縮

例として、非圧縮バージョンのjQuery 3.5.1ライブラリは、同じファイルの縮小バージョンよりも3倍以上大きくなっています。

同様に、上記と同じ圧縮技術により、画像、ビデオ、フォントなどの他のコンテンツタイプを最適化できます。このようなコンテンツ固有の縮小は、Webサイトのテキストベースのアセットのサイズを最適化するための最初のステップです。

しかし、データ圧縮には単なる縮小以上のものがあります。高度な数学技術を使用して、データ圧縮アルゴリズムはデータのサイズをさらに減らすことができます。

このようなデータ圧縮方法の最も一般的な例の1つは、 GZIPです。それは効率的なデータ送信を可能にし、インターネットを実行可能なグローバル通信媒体にすることに大きく貢献しました。

GZIP圧縮とは何ですか？

GNU Zipの略であるGZIPは、Web上で最も人気のあるロスレスデータ圧縮方法です。これにより、サイトのHTMLページ、スタイルシート、およびスクリプトのサイズを縮小できます。

GZIPは、データ圧縮アルゴリズムであるだけでなく、ファイル拡張子（ .gz ）であり、ファイルの圧縮/解凍に使用されるソフトウェアでもあります。

これは、LZ77エンコーディングとハフマンコーディングアルゴリズムを組み合わせたDEFLATEアルゴリズムに基づいています。

GZIP圧縮がDEFLATEアルゴリズムに基づいている方法の図 — GZIP圧縮はDEFLATEアルゴリズムに基づいています

GZIPコンプレッサーは、生データのセットを取得し、それをロスレスで圧縮します。生データは任意のファイルタイプからのものである可能性がありますが、GZIPはテキストベースのアセット（HTML、CSS、JSなど）で最適に機能します。

次のセクションでは、GZIP圧縮がどのように機能するかについて詳しく説明します。

GZIPがデータを圧縮する方法

まず、GZIPコンプレッサーは生データに対してLZ77圧縮アルゴリズムを実行して、冗長性を排除します。このアルゴリズムは、事前定義されたスライディングウィンドウ（生データの小さなセクション）で繰り返されるパターンを見つけることによって機能します。

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

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

LZ77アルゴリズムで生データを圧縮した後、GZIPコンプレッサーはハフマンコーディングアルゴリズムを使用してさらに圧縮します。これは、最も頻繁に発生する文字に最小のビット数を割り当て、まれな文字に最大のビット数を割り当てることによって行われます。

この手法は、モールス信号で使用される手法に似ており、英語でより頻繁に出現する文字が最短のシーケンスになります。

ハフマン符号化アルゴリズムがどのように機能するかを理解するために、 BOOKKEEPERという単語を考えてみましょう。長さは10文字ですが、固有の文字は6文字だけです。この単語には、1文字、2文字、3文字がうまく組み合わされています。

ほとんどすべてのWebサイトは、文字と記号を表すためにUTF-8文字エンコードを使用しています。英語のアルファベットも含むUTF-8のすべてのASCII文字は、1バイト（8ビット）を使用します。

BOOKKEEPERのような10文字の文字列には、10バイト（80ビット）のメモリが必要です。文字B , P , Rの1つのインスタンス、文字OとKの2つのインスタンス、および文字Eの3つのインスタンスが含まれていることがわかります。

ハフマンコーディングアルゴリズムは、この知識を使用して文字列を可逆圧縮します。これは、すべての一意の文字を葉として持つ二分木を生成することによって行われます。

頻度が最も低い文字（ B 、 P 、 Rなど）はツリーの一番下に表示され、頻繁に表示される文字（ E 、 O 、 Kなど）は理想的には一番上に表示されます。

ツリーの最上位ノードはルートであり、その値は文字列内の文字の総数と同じです。

ハフマンツリーを生成した後、すべての左分岐矢印と右分岐矢印にそれぞれ0と1の番号が付けられます。次に、ルートからリーフへのパスをトレースし、すべての0と1を結合することにより、任意の文字のハフマンコードを生成できます。

頻度が最も高い文字には、ビットサイズが最小のハフマンコードが含まれていることがわかります。

注：ハフマンコーディングアルゴリズムは、同じ頻度の文字に対して異なる順序付け戦略を使用することにより、代替のバイナリコードを生成できます。ただし、エンコードされた文字列の合計サイズは同じままです。

これは、元の単語を保存するために必要なメモリを68.75％削減します。

0/1規則でハフマンツリーを使用すると、プレフィックスプロパティを満たすバイナリコードが生成されます。特定の文字のハフマンコードが他の文字のコードのプレフィックスではないことを保証し、ハフマンツリーを使用してエンコードされた文字列を簡単にデコードできるようにします。これは、GZIP解凍速度で主要な役割を果たします。

上記の単語と同様に、GZIPコンプレッサーはハフマンコーディングアルゴリズムを使用して、LZ77アルゴリズムによって生成されたタプルをさらに最適化します。これにより、拡張子が.gzの高度に圧縮されたファイルが作成されます。

GZIPの仕組みについて詳しく知りたい場合は、このビデオを参照して概要を確認してください。

GZIP圧縮はどれくらい良いですか？

通常、GZIPは小さなファイルでは約70％の圧縮率を達成しますが、大きなテキストベースのアセットでは最大90％に達する可能性があります。

さまざまなCSSおよびJSライブラリのGZIP圧縮率の比較 — いくつかの人気のあるCSSおよびJSライブラリのGZIP圧縮率

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

注： GZIPを使用して任意のファイルタイプを圧縮できますが、他の方法（画像、ビデオなど）で既に圧縮されているアセットの場合、節約にはなりません。場合によっては、ファイルサイズが大きくなることもあります。

圧縮アルゴリズムの強度は、圧縮率だけでなく、データをどれだけ迅速かつ効率的に圧縮および解凍できるかに依存します。これが、GZIPがほとんどのユースケースで優れている点です。

GZIPはストリーミングアルゴリズムを使用して迅速に解凍するため、速度が重要なWebプロトコルに最適です。さらに、GZIPは最小限のリソースを使用してデータの圧縮と解凍の両方を行うため、サーバーとクライアントの両方に理想的です。

brotli vs bzip2 vs GZIP vs xzの圧縮パフォーマンス（出典：OpenCPU）

上記のグラフは、 brotli 、 bzip2 、 gzip 、およびxz圧縮アルゴリズムの圧縮パフォーマンスを比較しています。 GZIPは、圧縮率テストでわずかな差で負けていますが、圧縮と解凍の速度については、競合他社を完全に打ち負かしています。

圧縮速度のグラフを見ると、GZIPはHTTPサーバーやWeb上の他のデータストリームでのリアルタイム圧縮に理想的であると結論付けることができます。 IETFは、Webの進歩におけるすべての利点を考慮して、GZIPをHTTP/1.1での圧縮の3つの標準形式の1つとして承認しました。

注： zlibと呼ばれるGZIPの圧縮ライブラリの抽象化は、多くの一般的なオペレーティングシステム（Linux、macOS、iOS）および最新のゲームコンソール（PlayStation 4、Wii U、Xbox One）で使用されています。また、画像を圧縮するためのロスレスPNGファイル形式でも使用されます。

6GZIP圧縮の利点

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

適切な圧縮率を実現

前に説明したように、GZIPは競合他社と比較して最高の圧縮率を備えていません。しかし、それも彼らからそれほど遠くはありません。通常、テキストベースのリソースのサイズを70〜90％削減するのに役立ちます。

超高速の圧縮と解凍

データの圧縮と解凍の速度については、GZIPが明らかに勝者です。 HTTPサーバーやその他のデータストリームでのオンザフライ圧縮には非常に望ましい方法です。

必要なメモリはごくわずか

GZIPは最小限のメモリフットプリントを残すため、メモリ容量が限られているサーバーやシステムに適しています。したがって、最も安価なWebホスティングプロバイダーでもサポートされていることがわかります。

最悪の場合でもあまり拡大しない

GZIPのようなロスレスデータ圧縮アルゴリズムには、それを超えるとデータを圧縮できないという厳しい制限があります。

通常、これは、リソースがすでに十分に圧縮されている場合、またはリソースが小さく、GZIPディクショナリを追加するオーバーヘッドが圧縮の節約よりも高い場合に発生します。この現象は、エントロピー符号化と呼ばれる概念に起因すると考えられます。 GZIPはこの効果に対して非常に耐性があります。

自由に使用でき、オープンソース

GZIPは主に、初期のUnixシステムで使用されていた特許取得済みの圧縮プログラムの無料のオープンソース代替品として作成されました。したがって、特許に煩わされることはなく、誰でも自由に使用できます。

ユニバーサルサポートをお楽しみください

W3Techsによると、GZIP圧縮は追跡するすべてのWebサイトの82％で使用されており、Web全体で最も広く使用されている圧縮アルゴリズムとなっています。

GZIPは、ほぼすべてのサーバーとクライアントでサポートされています。サイトをホストしているサーバーに関係なく、GZIPを有効にすることでサイトを高速化できます。

Webサイト速度テストツールのGZIP警告

縮小化の次に、GZIPを有効にすることは、Webサイトに実装できる最も単純で最も効果的な速度最適化の1つです。

これは、WordPressを最適化する最も簡単な方法の1つでもあります。それにもかかわらず、多くのWordPressサイトはまだそれを使用していません。

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

ブラウザがGZIP応答ヘッダーを検出しない場合、ブラウザは非圧縮ファイルをダウンロードします。ほとんどの場合、ページの読み込み速度の違いは数秒になる可能性があります。したがって、GZIPを有効にしていない場合は、Webサイトの速度テストツールに警告が表示されます。

Google PageSpeed Insights/LighthouseでのGZIP警告

ウェブサイトでテキスト圧縮が有効になっていない場合、GooglePageSpeedInsightsは警告をスローします。

注： Google PageSpeedInsightsとGoogleLighthouseは、2つの別個のウェブサイトパフォーマンステストツールでした。 Googleが分析エンジンとしてLighthouseを使用するようにPageSpeedInsightsをアップグレードした2018年まで、これらは互いに独立して機能していました。したがって、PageSpeedInsightsとLighthouseは同じものになりました。

GooglePageSpeedInsightsの「テキスト圧縮を有効にする」警告

上記のサンプルサイトでは、テキストベースのリソースを圧縮すると、ページの重みが78％以上削減され、ページの読み込み時間が2.1秒短縮されます。

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

GTmetrixでのGZIP警告

ウェブサイトが圧縮されたテキストベースのリソースを提供していない場合、GTmetrixは警告を表示します。 Google PageSpeed Insightsと同様に、達成できる潜在的な節約も表示されます。

注： GTmetrixは、速度テストアルゴリズムをアップグレードして、古いPageSpeedInsightsおよびYSlowライブラリを最新のGoogleLighthouseメトリックに置き換えています。そのGZIP圧縮警告は、Lighthouseによって示されるものと同様であると期待できます。

PingdomツールでのGZIP警告

Pingdom Toolsは、GZIPを使用してWebサイトコンポーネントを圧縮するための簡単な警告をスローします。

説明セクションでは、PingdomToolsはGZIPの重要性に関するいくつかの統計も提供します。かっこいい豆！

WebPageTestでのGZIP警告

WebPageTestは、圧縮可能な応答が最適化された方法で提供されていないことを検出すると、[パフォーマンスレビュー]タブに警告を表示します。

WebPageTestは、警告の重大度を示す段階的なスコアも提供します。たとえば、上記の警告を100点満点中23点と評価しています。これは、優先度として修正する必要があることを意味します。

GZIP圧縮が有効になっているかどうかを確認する方法

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

Webサーバーは、ブラウザーから送信されたこのヘッダーを確認すると、ブラウザーによるGZIPのサポートを認識し、 content-encoding: gzipヘッダーを使用して圧縮されたHTTP応答で応答します。

ただし、別のWordPressホスティングプロバイダーを使用している場合、またはWebサイトがGZIP圧縮コンテンツを適切に提供しているかどうかを確認したい場合は、常に有効になっているかどうかを確認してください。

以下は、GZIP圧縮をチェックするためのいくつかの簡単な方法です。

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

オンラインツールを使用するのが、WebサイトでGZIP圧縮が有効になっているかどうかを確認する最も簡単な方法です。無料のCheckGZIPCompressionまたはHTTPCompressionTestツールを使用することをお勧めします。 WebサイトのURLを入力し、[チェック]または[テスト]ボタンを押すだけです。

これらのオンラインツールはどちらも、GZIPが有効になっているかどうか、およびGZIP圧縮を有効にしてテストURLを提供することで保存した（または保存できる可能性のある）データ転送量に関する簡単なレポートを表示します。

最初のツールには、Webサイトのサーバーの種類、コンテンツの種類、圧縮時間など、その他の関連情報も表示されます。

CheckGZIP圧縮ツールを使用してKinstaのホームページをテストする — CheckGZIP圧縮ツールを使用したKinstaのホームページのテスト

GZIPの最適化は、Webページだけでなく、スタイルシート、スクリプト、フォントなどの静的なテキストベースのアセットも含まれていることに注意してください。 CDNを使用してこれらのアセットを提供している場合は、CDNがGZIP圧縮を有効にしてアセットも提供していることを確認する必要があります。

Cloudflare、Kinsta CDN、KeyCDN、CloudFrontなどの最新のCDNは、GZIP圧縮をサポートしています。アセットに直接リンクすることで、CDNが提供するアセットのGZIP圧縮をテストできます。

上記のレポートでは、KinstaCDNが従来のプルCDNであるKeyCDNエンジンを使用していることがわかります。 Kinstaを使用してWordPressサイトをホストしている場合は、GZIP圧縮がデフォルトで有効になっているため、心配する必要はありません。

2.「content-encoding：gzip」HTTP応答ヘッダー

WebサイトがGZIP圧縮コンテンツを配信するかどうかを確認する2番目の方法は、 content-encoding: gzip応答ヘッダーを確認することです。

答えのないレベル1以下のWordPressホスティングサポートにうんざりしていませんか？ワールドクラスのサポートチームをお試しください！私たちの計画をチェックしてください

ChromeDevToolsまたはFirefoxDeveloperToolsを開いて、[ネットワーク]セクションでこの応答ヘッダーを探すことができます。

ChromeDevToolsでどのように表示されるかはすでに説明しました。 Firefox開発ツールでの表示は次のとおりです。

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

Chrome DevTools設定パネルで[大きなリクエスト行を使用する]オプションを有効にして、ページの元のサイズと圧縮されたサイズの両方を表示することもできます。以下に示すように、元のページのサイズは、GZIPで圧縮した後、 118KBからわずか22.9KBに減少しました。

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

ほとんどのウェブサイト速度テストツールは、ウェブページを提供するためにGZIPのような圧縮を使用しないことを警告します。この記事にたどり着く多くの読者は、おそらくこれらのGZIP警告のために来ているでしょう。その多くは、すでに上で詳細に説明しました。

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

GZIP圧縮を有効にする方法

WebサーバーでGZIP圧縮を有効にしていない場合は、有効にする方法がたくさんあります。正確な方法は、Webサイトをホストするために使用しているWebサーバーによって異なります。

重要：いつものように、編集する前にサイトとサーバーの構成ファイルのバックアップを取ります。

WordPressプラグインでGZIPを有効にする

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

たとえば、Apache WebサーバーでWordPressサイトをホストしている場合、W3 Total Cacheには、ブラウザキャッシュ設定パネルでGZIP圧縮を有効にするオプションが含まれています。

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

WordPressプラグインには、Webサーバー上のファイルを変更するためのアクセス許可が必要です。適切な権限がない場合は、失敗するか、エラーが表示されます。

このような場合は、ホスティングプロバイダーに連絡するか、以下のコードスニペットを使用してWebサーバーの構成ファイルを手動で変更する必要があります。

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

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

ApacheWebサーバーでGZIPを有効にする

Netcraftによると、Apacheは、現在使用されている他のどのWebサーバーよりもアクティブなサイトにサービスを提供しています。これは、WordPressが推奨する2つのWebサーバーの1つでもあります。

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

アクセスレベルに基づいてApacheのサーバー構成を編集するには、次の2つのオプションがあります。

メインサーバー構成ファイル（通常はhttpd.confと呼ばれます）にアクセスできる場合は、 .htaccessファイルによってApacheの速度が低下する可能性があるため、これを使用してApacheを構成することをお勧めします。
メインサーバー構成ファイルにアクセスできない場合（通常、ほとんどのWordPress共有ホスティングプロバイダーの場合） 、.htaccessファイルを使用してApacheを構成する必要があります。

ホスティングプロバイダーがメインサーバー構成ファイルの編集を許可することはめったにないため、最初のオプションは厳密にシステム管理者向けです。この方法でそれを行う方法を説明することは、この記事の範囲外です。開始するには、HTML5Boilerplateプロジェクトで共有されているサンプルのApacheServerConfigとApacheのドキュメントを参照してください。

2番目のオプションは、多くの共有ホスティングプロバイダーが.htaccessファイルの編集を許可しているため、ほとんどのWordPressサイト所有者にとって理想的です。

開始するには、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圧縮が有効になっているかどうかを確認します。

これで、Webサーバーは上記のすべてのファイル拡張子の圧縮ファイルを提供するはずです。これは、前述のいずれかの方法を使用して確認できます。

クライアント側のプロキシとセキュリティソフトウェアが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>

ここで使用されているすべてのディレクティブの詳細については、コードリポジトリに移動し、そこにリンクされているすべてのリソースをたどることで確認できます。

NginxWebサーバーでGZIPを有効にする

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

ngx_http_gzip_moduleで定義されたディレクティブを使用して、NginxWebサーバーでGZIP圧縮を有効にできます。

まず、 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;

サイトで大きなJSファイルと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のドキュメントを参照してください。

IISWebサーバーでGZIPを有効にする

Microsoftのインターネットインフォメーションサービス（IIS）は、現在使用されているWebサーバーの中で3番目に人気があります。 IISは、特に企業固有のイントラネットサーバーとエクストラネットサーバーをセットアップするために、主にWindowsで実行されているエンタープライズ環境に展開されます。

さまざまな互換性の問題があるため、WordPressサイトをホストするために使用されることはめったにありません。

ただし、IISでGZIP圧縮を有効にする必要があるまれな状況のいずれかに遭遇した場合は、Microsoftのドキュメントを参照して開始できます。このStackOverflowスレッドも役立つ場合があります。

GZIP圧縮の代替

Webでのデータ圧縮の世界は常に進歩しています。平均ページ重量サイズが絶えず増加しているため、Webテクノロジーもそれに追いつき、Webを介したデータ転送をより効率的にしようとしています。

新しい圧縮アルゴリズムは、過去数年間で広く普及しています：Brotli。 WOFF2 Webフォントの圧縮は、もともとBrotliの主な焦点でしたが、その後、あらゆるタイプのデータの圧縮をサポートするように拡張されました。

BrotliはGZIPよりもデータを圧縮しますが、データを圧縮するにはかなり多くの時間とリソースが必要です。ただし、解凍時間はGZIPの解凍時間に匹敵しますが、それでも少し遅くなります。

今日、ほとんどのブラウザはBrotliをサポートしていますが、WordPressサイトでの使用はまだやや複雑です。 Brotliをサポートする、またはBrotliライブラリのインストールを許可するホスティングプロバイダーでサイトをホストする必要があります。ほとんどのマネージドWordPressホストはまだ完全にはサポートしていませんが、CloudflareやKeyCDNなどのCDNを使用している場合は、簡単に有効にできます。

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

Ready to speed up your site? ️ Enabling GZIP compression on your web server is one of the simplest and most efficient ways to achieve that. Learn how with this step-by-step walkthrough ️ Click to Tweet

概要

A well-optimized web is great for everyone. Users love snappier websites, website owners love the reduced hosting charges, and web hosts love the optimization achieved on their servers. Compression techniques like GZIP are one of the best ways to speed up page load times for your visitors.

WordPress site owners can speed up their sites instantly by enabling GZIP compression. Kinsta enables it by default on all its servers, but for others, this article covers multiple ways to enable GZIP compression on various web servers.

Speed is critical for any website. Just compress!