WordPressウェブサイトの読み込み時間を改善する際に、ページのサイズを減らすことは非常に重要です。サイズ減少は、ウェブサイトが1秒未満で読み込まれるか遅々として進まないかの分かれ目になります。GZIP圧縮を有効にすることによりウェブページのサイズが減り、リソースをダウンロードする時間とクライアントのデータ使用量が低下し、レンダリングの開始時間が改善されます。

現代的なのブラウザーはすべてGZIPをサポートしており、すべてのHTTPリクエストに対して自動的にGZIP圧縮のネゴシエーションを実施します。 今日は、ウェブサーバー上のGZIP圧縮の確認手段と有効にする手段をご紹介します。

GZIP圧縮とは?

GZIPはファイルの圧縮と解凍に使用されるソフトウェアアプリケーションとその圧縮データのファイルフォーマットです。GZIP圧縮はサーバー側で有効にされるもので、HTML、スタイルシート、およびJavaScriptファイルのサイズをさらに縮小します。画像は異なる圧縮方法で処理されているため、画像には機能しません。圧縮により最大70%のサイズ削減が見られる場合もあります。WordPressなら、おそらく最もしやすい最適化の一つでしょう。

圧縮とは、ビットの数を減らして情報をエンコードするプロセスのことです。– Ilya Grigorik、Google

ウェブブラウザがウェブサイトにアクセスするときに、「content-encoding:gzip」レスポンスヘッダーが存在するかを確認することにより、ウェブサーバーでGZIPおが有効になっているかを確認します。ヘッダーが検出された場合には、ファイルの圧縮版が配達されます。検出されない場合には、非圧縮版が配達されます。GZIPを有効にしていない場合は、Google PageSpeed InsightsやGTmetrixなどのスピードテストツールで警告及びエラーが発生する場合があります。

Google PageSpeed InsightsのGZIP警告

ご覧のとおり、「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。」とGoogleが述べています。

Google PageSpeed Insightsの圧縮を有効にする警告

Google PageSpeed Insightsの圧縮を有効にする警告

GTmetrixのGZIP警告

GTmetrixも、GZIP圧縮を有効にすることにより静的リソースの転送サイズを減らすことを推奨しています。

GTmetrixの圧縮を有効にする警告

GTmetrixの圧縮を有効にする警告

GZIP圧縮が有効になっているか確認する手段について

GZIPは現在非常に一般的で、Kinstaのすべてのサーバーではデフォルトで有効になっています。GZIPのブラウザーのサポートについて心配する必要はありません。17年以上にわたってGZIPをサポートされてきたブラウザーさえあります。「content-encoding:gzip」HTTPレスポンスヘッダを処理できるブラウザーのリストは下記のとおりです。

ただし、当社以外のWordPressホスティング会社をご利用の方は、サーバー管理者がこの最適化を見逃しがちのため、GZIPが有効になっているかを是非ご確認ください。GZIP圧縮を確認できるしやすい方法がいくつかあります:

1.Check GZIP Compressionツール

ウェブサイトでGZIP圧縮が有効になっているかを確認する最も早い方法は、無料のa href=”https://checkgzipcompression.com/” target=”_blank” rel=”noopener”>Check GZIP Compressionツールです。対象ウェブサイトを入力し検索をクリックするだけです。GZIPでページを圧縮することにより節約されたパーセンテージが出るか、GZIPが有効になっていないことを知らせるエラーが出ます。 ご覧の通り、下記のテストでは66.9%の節約になりました。

Check GZIP compressionツール

Check GZIP compressionツール

そして、GZIPは静的アセットにも適用されることも忘れないでください。つまり、CDNからアセットを配達している方は、CDNサービスもGZIP圧縮を有効にしているかを確認する必要があります。CDNCDN、Cloudflare、KeyCDN、CloudFrontなど、現代的なCDNプロバイダのすべてはGZIP圧縮をサポートしています。これを試験できる最もしやすい方法は、CDN上にあるCSSまたはJavaScriptファイルのいずれかを本ツールに入力し確認することです。

Check GZIP compressionでCDNを確認する

Check GZIP compressionでCDNを確認する

2. GZIPコンテンツエンコーディングとHTTPレスポンスヘッダー

GZIPが有効になっているかを確認する2つ目の方法は、「content-encoding:gzip」というHTTPレスポンスヘッダーがウェブサイトで有効かを確認することです。これはブラウザーがサーバにリクエストを送信するときに探すものです。ChromeのDevtoolsを開き、「Network」パネルにある最初のレスポンスヘッダーを確認します。

「content-encoding:gzip」というHTTPレスポンスヘッダー

「content-encoding:gzip」というHTTPレスポンスヘッダー

また、「View large requests」(大規模なリクエストを表示)オプションをクリックすると、ページの圧縮前のサイズと圧縮後のサイズが表示されます。下記のとおり、圧縮前のページは51.6 KBで、GZIP圧縮後のページは17.7 KBです。

ChromeのDevtoolsで圧縮後のページサイズを確認する

ChromeのDevtoolsで圧縮後のページサイズを確認する

GZIP圧縮を有効にする確認する手段について

GZIP圧縮が有効になっていない場合には、ウェブサーバーで有効にする手段がいくつかあります。

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

最も簡単な手段はGZIPの有効化をサポートしているキャッシュプラグインを使用することです。たとえばWP Rocketは、mod_deflateモジュールを使用することによりGZIP圧縮ルールを自動的に.htaccessファイルに追加します。W3 Total CacheのパフォーマンスセクションにもGZIP圧縮を有効にするオプションがあります。一方、これらはいくらプラグインであっても、ウェブサーバ上のファイルを変更するパーミッションが必要です。キャッシングプラグインにパーミッションがない場合は、ホスティング会社に問い合わせるか、以下のコードを使用する必要があります。

ApacheでGZIPを有効にする

Gzip圧縮を有効にする二つ目の方法は、.htaccessファイルを編集することです。 ほとんどの共有ホストはApacheを使用しており、以下のコードが.htaccessファイルに追加できます。.htaccessファイルはWordPressウェブサイトのルートにあり、FTPを通してアクセスできます。

注:mod_filterがサーバー上に読み込まれているか確認してください。そうしないと、AddOutputFilterByTypeディレクティブが機能しなくなり、500エラーが発生する可能性があります。下記のコードに対する課題が発生した場合は、エラーログを確認してください。


  # 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 really old 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
}

必ず.htaccessファイルの現在の中身の下に追加してください。例えば:

ZIPコード

Apacheにおいての.htaccessのGZIPコードの例

NGINXでGZIPを有効にする

NGINXをご利用の場合には、単にnginx.confファイルに次を追加してください。

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

IISでGZIPを有効にする

IISをご利用の場合には、静的圧縮と動的圧縮の2種類の圧縮があります。 圧縮を有効にする手段については、Microsoftのガイドをご参照ください。


このチュートリアルが面白かった方なら、当社のサポートも大好きでしょう。Kinstaのすべてのホスティングプランには、ベテランのWordPress開発者とエンジニアによる24時間365日のサポートが付いています。フォーチュン500のお客様をサポートしているチームとチャットしませんか。当社のプランをご確認ください。