gzip圧縮の設定方法【.htaccessの書き方】

gzip圧縮の設定方法
更新日:2021年2月18日

gzip圧縮とは?

gzip圧縮とは、gzipというデータ圧縮フォーマットを使用してファイルのデータを圧縮することです。

Webサーバーとブラウザが通信する際の機能として使えることと、データの圧縮によって転送量を減らせることから、サイトを高速化する方法のひとつとして使用されています。

gzip圧縮の利点

gzip圧縮はテキストファイルの圧縮に優れており、主にHTML・CSS・JavaScriptファイルやフォントファイルの圧縮に使用されます。

デメリットとしては、ブラウザにファイルを送信する度にデータ圧縮をするため、圧縮するデータ量が多くなるとサーバーCPUにも閲覧者のCPUにも負担がかかることです。
そのため、すべてのファイルを圧縮するのではなく、圧縮するべきファイルをきちんと選んで指定する必要があります。

gzip圧縮するファイルについて

gzip圧縮するファイルとして最も適しているのは、HTML・CSS・JavaScriptなどのテキストファイル全般で、他にはICOなどの画像ファイルやTTFなどのフォントファイルにも圧縮が有効です。
少し特殊な例では、SVGのようなテキストで構成された画像ファイル(ベクター画像)もgzip圧縮することができます。

反対にgzip圧縮するべきでないファイルは、JPEGやPNGなどの画像ファイル、WOFFなどのフォントファイル、MP3など音声ファイル、MP4などの動画ファイルで、これらのファイルはすでに圧縮されているため、gzip圧縮してもCPUを消費するだけで意味がありません。

gzip圧縮するべきファイル例
  • 「.html」「.css」「.js」などのテキストファイル
  • 「.ttf」「.otf」「.eot」などのフォントファイル
  • 「.ico」「.svg」などの画像ファイル
gzip圧縮するべきでないファイル例
  • 「.jpg」「.png」「.gif」などの画像ファイル
  • 「.woff」「.woff2」などのフォントファイル
  • 「.mp3」「.aac」などの音声ファイル
  • 「.mp4」「.avi」などの動画ファイル

.htaccessでgzip圧縮の設定をする方法

.htaccessとは、Webサーバーの挙動を設定できるファイルのことで、ApacheというWebサーバーを採用しているレンタルサーバーで使用することができます。

.htaccessでgzip圧縮の設定をする方法はいくつかありますが、設定がわかりやすい「mod_deflate」の使用をおすすめします。
mod_deflateを使用したgzip圧縮は、gzip圧縮するファイルをひとつずつ指定する設定か、指定したファイル以外をすべてgzip圧縮する設定のどちらかで設定をします。

参考:Apache モジュール mod_deflate

※.htaccessはWebサーバーの挙動にかかわる重要なファイルなので、必ずバックアップをとるようにし、記入間違いのないように注意してください。

※.htaccessのルールとして、最後の行を必ず改行(空白の行)にしてください。

※メモ帳で.htaccessの編集をすると「.htaccess.txt」というファイルになってしまうので、FTPソフトでレンタルサーバーにアップロードした後、FTPソフト上で「.txt」の部分を削除してください。

gzip圧縮するファイルをひとつずつ指定する設定

gzip圧縮するファイルをひとつずつ指定する設定は、余計なファイルの圧縮がされず、ファイルの指定も簡単で確実な方法です。

AddOutputFilterByType DEFLATE」に圧縮するファイルをひとつずつ指定していくだけですが、ファイルのMIMEタイプで指定するということに注意してください。
MIMEタイプがわからない場合は、拡張子をWikipediaで検索すると記載されています。

参考:MIMEタイプとは?【.htaccessで追加する方法】

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/vnd.microsoft.icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
<IfModule mod_deflate.c>
mod_deflate機能が使用可能であれば、タグで囲った設定が実行されるという意味です。
AddOutputFilterByType DEFLATE
圧縮するファイルをMIMEタイプで指定します。
Header append Vary Accept-Encoding env=!dont-vary
プロキシサーバーが間違ったコンテンツを配信しないようにする設定です。
gzip圧縮を解凍出来ないブラウザに対応するためのものです。

指定したファイル以外すべてgzip圧縮する設定

指定したファイル以外すべてgzip圧縮する設定は、余計なファイルまで圧縮してしまうことがあるため、あまりおすすめできる方法ではありません。

設定としては簡単で、まずすべてのファイルを圧縮するという設定をした後に、「SetEnvIfNoCase Request_URI」で除外するファイルを指定します。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:jpg|jpeg|gif|png|woff|woff2)$ no-gzip dont-vary

Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
<IfModule mod_deflate.c>
mod_deflate機能が使用可能であれば、タグで囲った設定が実行されるという意味です。
SetOutputFilter DEFLATE
すべてのファイルを圧縮するという設定です。
SetEnvIfNoCase Request_URI
圧縮から除外するファイルを拡張子で指定します。
()内に拡張子を記述し、区切りにはバーティカルバー(半角パイプ)を使用します。
先頭の「?:」は、グループ化するけどキャプチャはしないという正規表現の記述です。
Header append Vary Accept-Encoding env=!dont-vary
プロキシサーバーが間違ったコンテンツを配信しないようにする設定です。
gzip圧縮を解凍出来ないブラウザに対応するためのものです。

gzip圧縮の確認方法

.htaccessで設定したgzip圧縮が正しく動作しているかは、ブラウザの検証ツールで確認することができます。
Google Chromeの場合は以下の手順で確認できます。

  1. 調べたいページでキーボードの「F12」を押す
  2. 「Network」をクリック
  3. 再読み込みをする
  4. 調べたいファイルをクリック
  5. content-encoding: gzip」があるか確認する
gzip圧縮の確認をする

gzip圧縮の注意点

gzip圧縮の設定は、しっかり確認しながら行えば難しくありませんが、正しく設定しないと余計な圧縮がされて、サイトの高速化どころかむしろ遅くなってしまう可能性もあります。

繰り返しになる部分もありますが、gzip圧縮の注意点をまとめておきます。

  • gzip圧縮するファイルを正しく選んで指定し、余計なファイルが圧縮されないようにしてください。
  • .htaccessファイルは編集する前に必ずパックアップを取り、編集後はサイトの表示や動作に問題がないか確認してください。
  • ブラウザ検証ツールで、指定したファイルがちゃんとgzip圧縮されてるか、指定していないファイルがgzip圧縮されていないかを確認してください。

サイト高速化についての関連ページ

gzip圧縮以外のサイト高速化については、下記のページもご参考ください。

ブラウザキャッシュの設定方法【.htaccessの書き方】

totopアイコン