mod_deflateの設定方法(圧縮を有効)
Googleが提供しているGoogle Developersの『PageSpeed Insights』。
この『PageSpeed Insights』は、携帯端末および、デスクトップPCのブラウザでWebサイトを表示させる際のパフォーマンスを測定してくれます。具体的には次の2点の測定。
(1)スクロールせずに見える範囲のコンテンツの読み込み時間:
ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
(2)ページ全体の読み込み時間:
ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。
更にパフォーマンスを測定するだけではなく、改善提案もしてくれます。あなたのWebサイトも一度測定してみてください。
この『PageSpeed Insights』のパフォーマンス測定結果で、修正が必要な点としてよく改善提案される一つが、
『圧縮を有効にする』
です。これは、クライアントがサーバーからデーターを取得する前にサーバー上でデーターを圧縮させ、転送するデーター量を減らす方法です。
サーバー上でデーターを圧縮する時間のタイムロスは発生しますが、圧縮していないデーターをそのまま転送するよりもパフォーマンスがよくなります。特に海外レンタルサーバーのようにサーバーの設置場所が遠くにある場合は効果が期待できます。
本サイトは、海外レンタルサーバーではなく日本のレンタルサーバー(XServer)を利用していますが、PageSpeed Insightsでの測定結果は次のようになりました。
※図をクリックすると拡大できます。
デスクトップPCでの表示が100ポイント中68ポイント、モバイルでの表示が52ポイントとなっており、いくつか修正が必要と提案されています。『圧縮を有効にする』も改善提案されていますね。Googleはこれらのポイントが85ポイント以上になることを推奨しています。
それでは、本サイトを利用して改善提案されている『圧縮を有効にする』を修正した場合、パフォーマンスポイントがどの程度向上するか見ていきたいと思います。
圧縮を有効にする方法
Webサーバー上で圧縮を有効にする方法はいく通りかありますが、ここでは、
『mod_deflate』
を使った方法を紹介したいと思います。これは、HTTPサーバーがApacheを使用している場合に限りますが、多くのレンタルサーバーは、Apacheを使用しているので利用できる人は多いと思います。
圧縮を有効にする手順
ここでは、あえて海外レンタルサーバーではなく、日本で最も利用者の多いと思われるXServerを使っての手順を記載したいと思います。
使用サーバー:XServer
使用プラン:X10
※HostGatorで圧縮を有効にする場合の手順は、『』を参照ください。
※DreamHostで圧縮を有効にする場合の手順は、『』を参照ください。
※WebHostingPadで圧縮を有効にする場合の手順は、『』を参照ください。
まずは、.htaccessファイルをFTPで取得してください。XServerの場合、次のように「/ドメイン名/public_html/」ディレクトリ直下にあります。
/ドメイン名/public_html/.htaccess
無い場合は手動で作成してください。ただし、Windowsでファイルを作成する場合、先頭にドット「.」がつくファイル名は作成できないので、「htaccess」など一時的に仮のファイル名を付け、サーバーにアップした後、「.htaccess」に変更してください。
1.で取得した.htaccessファイルをテキストエディタで開きます。.htaccessファイルには既に何らかの記載があるかもしれませんが、消さないようにして下さい。
そして、次の内容を最下部に追記します。
古いブラウザは、圧縮されたデーターを復元できないので、古いバージョンのブラウザからデーター要求があった場合は、圧縮しないようにしています。
また、gifやjpg画像は既に元々から圧縮されており、更に圧縮してもさほどサイズは変わらないので圧縮しないようにしています。圧縮すると少々はサイズが小さくなり転送量を減らすことができますが、代わりにサーバー上での圧縮処理時間が無駄に増えてしまうので綜合的にはパフォーマンスが落ちてしまう可能性があります。
分からない方は、下記の内容をそのままコピペして頂いて結構です。コピペで動作することは確認済みです。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
2.で追記した.htaccessファイルをサーバーの元の場所へアップします。
.htaccessファイルをアップロードした後、再度PageSpeed Insightsで測定してみた。.htaccessファイルに追記した以外、条件は全く同じです。
※図をクリックすると拡大できます。
.htaccess追記前の結果と比較してもらうと分かると思いますが、『画像を圧縮する』という提案事項はデスクトップPCもモバイルも消えました。ポイントに関しても両方アップしています。
デスクトップPC
68ポイント ⇒ 78ポイント(+10ポイント)
モバイル
52ポイント ⇒ 59ポイント(+7ポイント)
体感的には大きくは変わらないかもしれませんが、PageSpeed Insightsでは明らかに良い結果になっています。この結果がGoogleの検索順位に影響があるのかは分かりませんが、少なくともGoogleの開発ツールでユーザビリティ的に良い方向に改善されているので、プラス材料になる可能性はあります。