【ページスピード高速化】gzip圧縮方法について徹底解説

UI/UX, 制作
2022-2-2
更新日: 2024-4-12
rin.inamura

「自社サイトのページスピードを向上させたい」と頭を悩ませているご担当者様へ。
gzip圧縮を適用すれば、ページの表示スピードを向上させることができ、UX・SEO的な観点から非常に効果的です。
本記事では具体的な方法やメリットデメリットについて徹底解説します。

>>UIUX改善でCVR2倍に？UIUXを改善したい方はまずは無料Web診断！

1 gzip圧縮とは
2 gzip圧縮のメリット・デメリット
- 2.1 メリット
- 2.2 デメリット
3 gzipの圧縮方法
- 3.1 利用可否の確認
- 3.2 設定の記述
4 gzip圧縮の注意点
- 4.1 gzip化に適さないファイルを省く
- 4.2 .htaccessファイルを編集前にバックアップを取っておく
5 gzip圧縮が適用されているか確認する
6 まとめ

gzip圧縮とは

gzip圧縮とは、ファイル圧縮方法の一つで、テキストファイルをサーバー上で自動的に圧縮して配信することが可能になります。

gzip圧縮を適用することで、Webページのサーバーとユーザーが使用しているPCで通信しているデータサイズを小さくすることができます。

試しにGoogleが提供するページスピードインサイトで自社サイトのページスピードを計測してみましょう。

下記のような「テキスト圧縮の有効化」というメッセージが出てきた方はgzip圧縮の適用の余地があります。

具体的な計測方法についてはこちらのブログ記事参考：「ページスピードに関するSEO対策について初心者・上級者向けに徹底解説」をごらんください。

gzip圧縮のメリット・デメリット

ここまでgzip圧縮の概要を説明しました。では、gzip圧縮にどのようなメリット・デメリットがあるのか、それぞれご紹介します。

メリット

最も大きなメリットとしてはページの表示速度が上がることでしょう。
ページの表示速度の向上は、UX・SEOの双方に大きなメリットがあります。

Googleの2018年に行われたアルゴリズムアップデートでは、ページスピードが遅いサイトは評価が下がるとされ、SEOにとってマイナスに働くことが発表されました。

また、Googleの調査では「ページの表示に3秒以上費やした場合、離脱率が著しく高くなる」という報告もされています。
参考：「【Google】新アルゴリズム「スピードアップデート」がついに開始！ページスピードがより重要に。」

以上のことから、ページスピードはSEOにとって非常に重要な要素となっている事がわかります。

デメリット

gzip圧縮のデメリット基本的にはデメリットはないです。

強いてあげるとすれば、サーバーに圧縮の負担がかかるため、時間やがかかることです。

しかし、先述の通りデメリットはないので、適用することを推奨します。

gzipの圧縮方法

ここまででgzip圧縮の基本的な内容をご理解いただけたかと思います。ここからは具体的なgzip圧縮の方法について解説いたします。

利用可否の確認

まずは、gzip圧縮が利用できるかを確認しましょう。
近年のサーバーでは基本的には利用可能ですが、稀に利用できない場合があります。

最も簡単な方法は「HTTP Compression Test」です。
URL Compression Testの箇所に検証したいWebサイトのURLを入力し、「Test」をクリックしてみましょう。

利用可能な場合、「[URL] is Compressed」のようなメッセージが返ってくるかと思います。

また、すでにgzip圧縮が設定されているかをChrome dev tools（検証ツール）で確認することができます。
手順は以下の通りです。

1.chrome dev toolsを立ち上げる: 確認したいWEBページの右クリックメニューから「検証」を選択、もしくは「F12」キーを押す事でも起動できます。
2.「Network」タブを開き、ページをリロードする: chrome dev tools内上部の「Network」タブを開き、ページを一度リロードします。
3.リスト内のWEBサイトURLやフォルダ名をクリックする: リロード後に並ぶリスト内で、URLやフォルダ名の行をクリックします。CSSやJavaScriptファイルを選択すると良いでしょう。
4.Response Headersを見る: クリック後に右側の「Headers」タブのResponse Headersという項目を見ましょう。
その中に「Content-Encoding」という項目があります。こちらに「gzip」と記載されていれば、すでにgzip圧縮が設定されていることになります。

こちらの表記がない場合はgzipの設定がされていない事になるため、次の設定の記述に進みましょう。

設定の記述

では実際にgzip圧縮の設定をおこないましょう。

サーバーの種類によっては後述の設定が効かない場合があります。本記事では「Apache」と呼ばれるサーバーの設定ファイルを紹介します。

基本的にはサーバー上の「.htaccess」ファイルに追加の記述をすることになります。その設定方法には主に2通りあります。

1.mod_deflate モジュールを利用する

mod_deflateモジュールは、クライアント側からのアクセスを検知次第、サーバがファイルを自動で圧縮するモジュールです。

設定方法は.htaccess内に下記の記述をします。

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

Header append Vary User-Agent env=!dont-vary

2.mod_rewriteモジュールを利用

mod_rewrite モジュールはクライアントからアクセスされたURLを gzip形式のURLに書き換えることで、gzip圧縮することができます。ただし、mod_deflate モジュールと異なり、gzipファイルをユーザ側で用意する必要があります。

設定方法は.htaccess内に下記の記述をします。

RewriteEngine on

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_URI} (\.js|\.css|\.html)$
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .* %{REQUEST_URI}.gz [L]

<FilesMatch "\.html?\.gz$">
  ForceType text/html
</FilesMatch>
<FilesMatch "\.css\.gz$">
  ForceType text/css
</FilesMatch>
<FilesMatch "\.js\.gz$">
  ForceType text/javascript
</FilesMatch>

参考：「gzip圧縮によるパフォーマンス改善」