ページの表示速度を高速化するgzip圧縮について解説

今回の内容はページの高速化に関する最適化手法です。ページの表示速度を向上させることで、ユーザはストレスなくWebページを閲覧することができます。数ある手法のなかから本記事ではgzip圧縮という方法を利用し、ファイルサイズを削減することで通信量を節約します。表示速度の改善はSEO対策としても最適なのでぜひお試しください。

gzipとは？

概要

早速ですが、gzipとは圧縮フォーマットのひとつです。みなさんもZipファイルに圧縮、解凍したことはあるでしょうか。それと同じ原理です。これを利用するとWebサーバが自動的にファイルをgzipに圧縮し、ブラウザが解凍して処理を進めてくれるようになります。したがって圧縮処理を行うとファイルサイズが削減するので結果的に通信が早くなります。

難しいことはしていませんが、処理の流れをイラストにしてみました。雰囲気をつかんでいただけると思います。

ブラウザがWebサーバーにアクセスする
WebサーバーはHTMLを圧縮しgzip形式に変換する
Webサーバーはgzip形式をブラウザに返却する
ブラウザはgzipを解凍する
ブラウザがHTMLを表示する

ほとんどの場合はテキスト形式のファイル（HTMLやCSSなど）がgzipで圧縮されます。画像などのサイズが大きいファイルは別通信で取得することが多いため、おそらく問題にはなりませんが、gzip圧縮することでファイルサイズが大きくなる場合もあります。

どの程度効果があるのか？

これはサイトによって効果は異なりますが、本サイトで実際に計測したところ、ファイルサイズが54KB から 10KB まで削減され、82.1%のファイルサイズ削減効果をもたらしました。この結果ブラウザへの表示速度の改善効果が見込めます。微々たるサイズだと感じるかもしれませんが、Webサイトの速度はチリツモなので、この小さな変化が大きな表示速度の差を生みます。

デメリットは？

テキスト形式のファイルを圧縮するという観点では2022年時点ではほとんどありません。Webサイトをgzip圧縮して配信することは基本的には高速なサイトではほぼ間違いなく実施しています。圧縮や解凍のときにサーバやブラウザに負荷が追加でかかりますが、これは全く気にするレベルではないです。また意外かもしれませんが、gzip圧縮をすることでファイルサイズが大きくなる場合があります。このケースはWebで取り扱うHTMLやCSSなどのテキスト系については非常にレアで、画像などをのぞき基本的には問題ありません。気になる方はファイルサイズと表示速度の両方の面から有効時と無効時で計測してみることをオススメします。

サイトが対応しているか確認方法

環境によっては最初からgzip圧縮が有効になっていたという場合も存在します。そのためまずはgzip対応しているかどうかの確認する方法を二通りで説明します。

GZIP Test を利用する方法

Gzip Test というツールを利用する方法です。URLを入力するだけで対応済みか分かる専用のチェッカーなので一番オススメです。

「Wow! It's GZIP Enabled」という文字が表示されれば成功しています。

ブラウザの検証ツールを利用する方法

詳しい向けの説明にはなりますが、要はレスポンスの内容がgzip圧縮されているということなので、ブラウザの検証コンソールから確認することができます。Networkタブを開いて初回リクエストを確認します。レスポンスヘッダに Content-Encoding: gzip が含まれていれば成功しています。

gzip圧縮の設定を有効にする by WordPress

WordPres によるgzip圧縮の設定方法の一つをご紹介します。本サイトで推奨するW3 Total Cache というプラグインでご紹介します。

プラグインを入れた前提になりますが、パフォーマンスタブ > 一般設定 よりブラウザーキャッシュを有効化します。そしてブラウザーキャッシュのタブに移動し、HTTP(gzip)圧縮を有効化にチェックを入れるとよいです。ちなみにプラグインを入れればデフォルトでONになっているため、一から設定する必要はありませんが、念のため確認しておきましょう。