.htaccess（gzip圧縮系）の設定方法
.htaccessファイルによるgzip圧縮は画像以外の構成ファイルを圧縮する事でWEBサイトの表示速度をアップさせる手法です。
設定すると表示速度は劇的に上がる場合があるし、表示速度が向上する事はSEO対策も有利に働きます。
mod_deflateが使えるサーバーであればサーバー側が圧縮をしてくれるが、使えない場合は自前で圧縮ファイルを用意する必要がある。
gzip圧縮とは？
gzip圧縮とはファイルサイズを小さくする圧縮方法の1つであり、gzipは「GNU zip」の略称です。
名前にzipが含まれていますが元々はUNIXというOSで独自に作られた圧縮プログラムです。
WEBサイトを構成しているhtml、JS、css、xmlなどを圧縮することで、データ量が軽くなりWEBサイトの表示速度を向上させる効果があります。
高いパフォーマンスと完璧な圧縮・復元
mod_deflateという圧縮方式は圧縮率が高く、パフォーマンスに明確な違いが現れます。
さらに圧縮しても情報の損失がないので、安全かつ完全に元に戻すことが可能です。
画像ファイルは圧縮対象に含まれない
gzip圧縮の際、画像ファイルは異なる圧縮方法で処理されているため、画像ファイルは対象外となります。
gzip圧縮のメリット
ページ表示速度が向上する
ファイルや画像などのサーバーから送信されるデータ量自体が減るので、その分ページの表示速度がアップするのですね。
ページのスピードが向上する事はSEO対策上有効であり、上位表示の要因の一つとなるとされています。
転送量が削減できる
レンタルサーバーでは基本的には転送データ量の上限が毎月決まっています。
gzip圧縮をすることで転送量が減るため、節約効果につながります。
gzip圧縮は推奨された手法です
Google PageSpeed Insights
gzip圧縮やdeflateを使用してリソースを圧縮することで、ネットワークで送信される通信量を減らす事ができます。とGoogleが推奨しています。
GTmetrix
gzip圧縮を有効にする事でデータの転送量を減らすことをGTmetrixも推奨しています。
ではこれから.htacessを使ったgzip圧縮方法について具体的に紹介をしていきましょう。
mod_deflateが使える場合と使えない場合とで.htaccessへの記述が変わってきます。
.htaccessでgzip圧縮する（mod_deflateが使える場合）
mod_deflateモジュールを利用できる場合は、サーバーが自動でgzip圧縮をしてくれます。
ただしアクセスする度にサーバー側が圧縮をおこなうため、サーバーへの処理負荷が掛かります。
この負荷を避けるためレンタルサーバーによってはこの機能を提供していない場合もあります。
ですので、いま利用中のレンタルサーバーがこのmod_deflateをサポートしているかを確認する必要があります。
mod_deflateが使えるかどうかの確認
mod_deflateモジュールが提供されているかどうかを調べるには、下記サイトで確認する事ができます。
http://www.whatsmyip.org/http-compression-test/
「Enter a URL to Test」の欄にWEBサイトのURLを入力して「Test」をクリックしましょう。
以下のように表示されれば、圧縮の機能がサポートされている事を意味しています。
mod_deflateを使った.htaccess記述
<IfModule mod_deflate.c> SetOutputFilter DEFLATE #圧縮しないファイル SetEnvIfNoCase Request_URI ¥.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary #圧縮するファイル AddOutputFilterByType deflate text/plain AddOutputFilterByType deflate text/html AddOutputFilterByType deflate text/xml AddOutputFilterByType deflate text/css AddOutputFilterByType deflate application/xml AddOutputFilterByType deflate application/xhtml+xml AddOutputFilterByType deflate application/rss+xml AddOutputFilterByType deflate application/javascript AddOutputFilterByType deflate application/x-javascript AddOutputFilterByType deflate application/x-httpd-php AddOutputFilterByType deflate application/x-font-ttf AddOutputFilterByType deflate application/x-font-woff AddOutputFilterByType deflate application/x-font-opentype </IfModule>
圧縮させないファイルの記述
GIF、JPG、PNG、ICOなどの画像ファイルについては、もともと圧縮の対象に入らないので除外をしています。
圧縮させるファイルの記述
htmlやCSS、JSやフォントファイルなどの各種ファイルを圧縮していきます。
上記の中に仮に自分が使用していない種類のファイル記述があっても、そのまま記述してて大丈夫です。
.htaccessでgzip圧縮する（mod_deflateが使えない場合）
mod_rewriteを使ったgzip圧縮
mod_deflateを利用したgzip圧縮は、上記の記述の通り内容も少なくて、WEBサイトへの実装が非常に簡単です。
ですがレンタルサーバーによっては、先ほども述べた通りサーバー負荷の観点からこのmod_deflateの利用を制限しているところもあります。
この場合mod_deflateの代わりに、日頃よりよく使っているmod_rewriteによるgzip圧縮をする事も出来ます。
サーバー負荷の軽減のために、このmod_rewriteを利用する方法も確認しておきましょう。
mod_rewriteによるgzip圧縮の注意点
mod_rewriteを利用したgzip圧縮は、全て「自前」でgzip圧縮をしたファイルを用意しなければなりません。
mod_rewriteではサーバーが自動でgzip圧縮ファイルを作らないので、.htaccessを記述しても機能しないのですね。
自前で作るという事は、毎回各gzip圧縮ファイルをこちら側で用意する必要がありますので、正直手間が掛かります。
ただしgzip圧縮ファイルを前もって用意する分、mod_deflateよりもサーバーへの負荷は少なくなるメリットはあります。
mod_rewriteを使った.htaccess記述
<IfModule mod_rewrite.c> RewriteEngine on #ブラウザからgzip圧縮リクエストがあるかを確認します RewriteCond %{HTTP:Accept-Encoding} gzip #要求されているファイルの拡張子を取得 RewriteCond %{REQUEST_URI} (¥.js|¥.css|¥.html)$ #ファイル名に「.gz」の拡張子ファイルがあるかを確認します。 RewriteCond %{REQUEST_FILENAME}¥.gz -s #リクエストされたファイルからgzip圧縮ファイルに置換します。 RewriteRule .* %{REQUEST_URI}.gz [L] </IfModule> #cssファイルの圧縮版への変更 <FilesMatch "¥.css¥.gz$"> ForceType text/css AddEncoding x-gzip .gz </FilesMatch> #jsファイルの圧縮版への変更 <FilesMatch "¥.js¥.gz$"> ForceType application/x-javascript AddEncoding x-gzip .gz </FilesMatch> #htmlファイルの圧縮版への変更 <FilesMatch "¥.html¥.gz$"> ForceType text/html AddEncoding x-gzip .gz </FilesMatch>
自分でgzip圧縮ファイルを作成する方法
gzipファイルの作り方
gzip圧縮するには、Windowsの場合は「7zip」や「Lhaplus」等の圧縮ファイルソフトを使うのがベースになりますね。
https://freesoft-100.com/pasokon/archive.html
下記のWEBサイトツールを利用してHTML、CSS、JSの各種ファイルを圧縮する事もできます。
Online JavaScript/CSS/HTML Compressor
gzipファイルの作り方
開いたページの「Input」の入力エリアにファイル内容をまるごとコピーして貼り付けるか、ファイル自体をドラッグ＆ドロップします。
該当するファイルタイプ（JS・CSS・HTML）のボタンをクリックして圧縮します。
同じ位置に表示された「gzip」の青いボタンをクリックすると、gzip圧縮されたファイル（拡張子が.gzのファイル）がダウンロードできます。
zipファイルと.gzの違い
よく皆さんがフォルダを圧縮するzipファイルと、ここでのgzip圧縮ファイルは違います。
zipファイルはWindowsの圧縮ファイルの形式であり、複数のファイルが入った一つのフォルダを圧縮するためのものですね。
それに対してgzip圧縮は、複数ファイルをまとめるのではなくWEBサーバー（Linuxなど）向けに単一のファイルを圧縮するための形式です。
・zip = アーカイブ＋圧縮ファイル
・.gz = gzip圧縮ファイル
・.tar = アーカイブファイル（アーカイバ）
ですのでzipファイルを用意するのではなく、.gzファイルを用意する必要があるのですね。
.htaccessでgzip圧縮する（mod_filterの利用する場合）
以下はmod_filterモジュールを利用してhtml、css、xml、JS、json等のファイルを圧縮する例です。
Apacheのバージョンが「2.4.4未満」と「2.4.4以降」とでFilterProvider構文の書き方が異なるので、IfVersionで分岐させて記述しています。
Apacheのバージョンが2.4.4未満の場合
<IfVersion < 2.4.4> <IfModule filter_module> FilterDeclare compress FilterProvider compress deflate resp=Content-Type $text/html FilterProvider compress deflate resp=Content-Type $text/css FilterProvider compress deflate resp=Content-Type $text/plain FilterProvider compress deflate resp=Content-Type $text/xml FilterProvider compress deflate resp=Content-Type $text/x-component FilterProvider compress deflate resp=Content-Type $application/javascript FilterProvider compress deflate resp=Content-Type $application/json FilterProvider compress deflate resp=Content-Type $application/xml FilterProvider compress deflate resp=Content-Type $application/xhtml+xml FilterProvider compress deflate resp=Content-Type $application/rss+xml FilterProvider compress deflate resp=Content-Type $application/atom+xml FilterProvider compress deflate resp=Content-Type $application/vnd.ms-fontobject FilterProvider compress deflate resp=Content-Type $image/svg+xml FilterProvider compress deflate resp=Content-Type $application/x-font-ttf FilterProvider compress deflate resp=Content-Type $font/opentype FilterChain compress FilterProtocol compress deflate change=yes;byteranges=no </IfModule> </IfVersion>
Apacheのバージョンが2.4.4以上の場合
<IfVersion >= 2.4.4> <IfModule filter_module> FilterDeclare compress FilterProvider compress deflate "%{Content_Type} = 'text/html'" FilterProvider compress deflate "%{Content_Type} = 'text/css'" FilterProvider compress deflate "%{Content_Type} = 'text/plain'" FilterProvider compress deflate "%{Content_Type} = 'text/xml'" FilterProvider compress deflate "%{Content_Type} = 'text/x-component'" FilterProvider compress deflate "%{Content_Type} = 'application/javascript'" FilterProvider compress deflate "%{Content_Type} = 'application/json'" FilterProvider compress deflate "%{Content_Type} = 'application/xml'" FilterProvider compress deflate "%{Content_Type} = 'application/xhtml+xml'" FilterProvider compress deflate "%{Content_Type} = 'application/rss+xml'" FilterProvider compress deflate "%{Content_Type} = 'application/atom+xml'" FilterProvider compress deflate "%{Content_Type} = 'application/vnd.ms-fontobject'" FilterProvider compress deflate "%{Content_Type} = 'image/svg+xml'" FilterProvider compress deflate "%{Content_Type} = 'image/x-icon'" FilterProvider compress deflate "%{Content_Type} = 'application/x-font-ttf'" FilterProvider compress deflate "%{Content_Type} = 'font/opentype'" FilterChain compress FilterProtocol compress deflate change=yes;byteranges=no </IfModule> </IfVersion>
gzip圧縮されているか確認する方法
WEBサイトでgzip圧縮が有効になっているかを確認する方法を3つ紹介します。
GIDNetwork
以下のWEBサイトで該当WEBサイトのURLを入力するだけで簡単に確認ができます。
http://www.gidnetwork.com/tools/gzip-test.php
GIDNetworkの画面
gzipコンテンツエンコーディングとHTTPレスポンスヘッダー
2つ目は、「content-encoding：gzip」というHTTPレスポンスヘッダーが有効になっているかを確認する方法です。
これはブラウザがサーバーにリクエストを送信するときにチェックされる部分です。
Google Chromeでの確認の仕方
Google Chromeブラウザを開いて、F12を押してディベロッパーツールを開きます。
次に「Network」パネルを開きます。「Name」「Status」「Type」「Initiator」等と横に並んでいるのがわかります。
ここで改めて確認したいWEBサイト（ページ）を開きます。するとデータが表示されますよね。
上記のように「Name」の一覧にある項目で今回開いたページURL（htmlファイル名）をクリックすると、右側に「Headers」「Review」「Response」「Timing」などが並びます。
「Headers」の欄のResponse Headersの項目内に「content-encoding：gzip」が表示されているのがわかります。
content-encoding：gzipが表示されています。
Check GZIP Compressionツール
一つは「Check GZIP Compression」という外部WEBサイトのツールを使う方法です。
対象のWEBサイトを入力して検索をクリックするだけです。
gzipでページを圧縮できていれば、節約されたパーセンテージが出ます。逆にgzipが有効になっていなければエラーが出るようになっています。
※今現在上記サイトは開く事ができないようです。
gzipによる表示速度UPの度合いを測る
私のサイトの場合表示させたときの速さが各段に変わりました。
体感以外でページの表示速度を数値化してくれるWEBサービスとしては、Googleの「PageSpeed Insghts」が有名ですよね。
PageSpeed Insghtsの結果
サーチコンソールのPageSpeed Insghtsの表示結果：まだまだですがそれでも上がりました。
GMetrixでもスピードを測定する事ができます。
URLを入力する事で速度を調査してくれる外部サイトです。
あわせて読みたい参考記事
Wordpressでgzipを有効にするプラグイン
ここまで、各ファイルを自動あるいは手動で圧縮をする方法を紹介してきました。
ではWordpressサイトでgzip圧縮を有効にするをする為にはどうすれば良いのでしょう。
最も簡単なのは、gzip圧縮ができるキャッシュ系のプラグインを使用することです。
gzip圧縮系プラグイン紹介
WP Fastest Cache
「WP Fastest Cache」は、gzip圧縮とブラウザキャッシュの高速化に抜群の効果を発揮するプラグインです。
赤枠のところにgzip圧縮する項目があります。
CSSやJSファイルを変更した場合は、隣の「キャッシュの削除」タブを開いてキャッシュを削除します。
WP Fastest Cacheが一番シンプルで効果が高いと思うプラグインですね。
WP Rocket
「WP Rocket」は、mod_deflateモジュールを使用することによりgzip圧縮ルールを自動的に.htaccessファイルに追加するプラグインです。
WP HTTP Compression
WEBサイトをgzip圧縮して、表示速度を高速化するプラグインです。有効化するだけで特に設定などはありません。
まとめ
以上.htaccessファイルに記述を加える事で、gzip圧縮を実現する方法をご紹介しました。
今のところmod_deflateが使えるレンタルサーバーの方が多いように感じます。であれば自分で.gzファイルを用意せずに済むので助かりますよね。
Wordpressのプラグインは特に設定をすることなくgzip圧縮やキャッシュ制御してくれるものが多くなったので大変使いやすいと思います。
まだこのgzip圧縮を取り入れていない運営者は、積極的に活用していきましょう。
