炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress（Page Speed対応） - 圧縮を有効にする

パフォーマンスチューニング

難易度

★★★大変

概要

Webサーバがファイルを圧縮処理（gzip、deflate圧縮）をして送ることで、送信するデータ量が削減され、ファイルのダウンロード時間の短縮につながります。圧縮したファイルはブラウザが勝手に解凍して表示してくれます。最近のブラウザは、HTML、CSS/JavaScriptファイルのデータ圧縮をサポートしているので、圧縮を有効にすることで、劇的にファイルのダウンロード時間を縮めることができます。大きな効果が期待できるので必ず対応しましょう。

Apacheのバージョンによって.htaccessファイルでの書き方が変わってきます。まず、サーバーにログインし、# rpm -qa httpd を実行してApacheのバージョンを確認しましょう。Apacheのバージョンが2.1以降かどうかを調べてください。

Apacheが2.1以降だったら…

  1. httpd.confでmod_deflate・mod_filterモジュールをロードする
  2. 「.htaccessファイル」でgzip圧縮を有効にする

Apacheが2.1より前だったら…

ページ下部の「Apacheのバージョンが2.1より前の時の書き方」を参考にしてください。では、それぞれの手順について説明していきます。

1.httpd.confでmod_deflate・mod_filterモジュールをロードする

httpd.confを開き

  • mod_deflate.so
  • mod_filter.so

で検索してください。

コメントアウトされていたら、コメントアウトを解除して、モジュールをロードします。

[bash]# vi /etc/httpd/conf/httpd.conf

LoadModule deflate_module modules/mod_deflate.so LoadModule filter_module modules/mod_filter.so

/etc/init.d/httpd restart[/bash]

2.「.htaccessファイル」でgzip圧縮を有効にする

.htaccessファイルに以下を記述します。

gzip圧縮の設定

[plain]<IfModule mod_deflate.c> BrowserMatch ^Mozilla/4 gzip-only-text/html #1 BrowserMatch ^Mozilla/4.0[678] no-gzip #2 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html #3 FilterDeclare Compression CONTENT_SET #4 FilterProvider Compression DEFLATE resp=Content-Type $text/plain #5 FilterProvider Compression DEFLATE resp=Content-Type $text/html #5 FilterProvider Compression DEFLATE resp=Content-Type $text/xml #5 FilterProvider Compression DEFLATE resp=Content-Type $text/css #5 FilterProvider Compression DEFLATE resp=Content-Type $text/javascript #5 FilterProvider Compression DEFLATE resp=Content-Type $image/svg+xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/xhtml+xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/rdf+xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/rss+xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/atom+xml #5 FilterProvider Compression DEFLATE resp=Content-Type $application/javascript #5 FilterProvider Compression DEFLATE resp=Content-Type $application/x-javascript #5 FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-ttf #5 FilterProvider Compression DEFLATE resp=Content-Type $application/x-font-otf #5 FilterProvider Compression DEFLATE resp=Content-Type $font/truetype #5 FilterProvider Compression DEFLATE resp=Content-Type $font/opentype #5 FilterChain Compression #6 SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary #7 Header append Vary User-Agent env=!dont-vary #8 Header append Vary Accept-Encoding env=!dont-vary #9 </IfModule>[/plain]

これで設定は完了です。

あとは、gzip圧縮が正常に動作しているか、「確認方法」を参考に確認してみてください。

●各設定の説明について

.htaccessファイルに記述している内容は3つに分けられます

  • gzip圧縮をサポートしていないブラウザを除外する
  • どのファイルに圧縮を掛けるか
  • Proxyサーバーの対応

●gzip圧縮をサポートしていないブラウザを除外する（#1、#2、#3）

gzip圧縮をサポートしていないブラウザの設定です。ブラウザ毎にサポートしている範囲が異なるので、いくつかの条件に分け設定しています。まず始めに User-Agent文字列から Netscape Navigator 4.x であるかどうか「Mozilla/4」で調べます。これらのバージョンでは、 text/html 以外のタイプの圧縮を扱うことができません。 4.06, 4.07, 4.08 は htmlファイルの解凍にも問題を抱えているため、完全にdeflate フィルタをオフにします。Microsoft Internet Explorer も "Mozilla/4" と特定されますが、圧縮を扱うことができるので、User-Agent文字列に"MSIE"が含まれる場合は、「!no-gzip」「!gzip-only-text/html」で以前に設定した制限を解除します。

●どのファイルに圧縮を掛けるか（#4、#5、#6、#7）

  • 「FilterDeclare Compression CONTENT_SET」でスタート宣言
  • 「FilterProvider Compression DEFLATE」でどのファイルタイプに圧縮を有効にするか
  • 「FilterChain Compression」でFilterProvider Compression DEFLATEで指定した条件を適用

7のSetEnvIfNoCaseでリクエストが画像のときは、gzip圧縮を掛けないようにします。

画像やバイナリファイルに対してgzipは必要ありません。画像、ビデオ、PDFのようなバイナリファイルはすでに圧縮されているので、省かないとCPUを無駄に消費してしまったり、逆にサイズを大きくしてしまいます。画像の最適化に関してはこちらを参照してください。

また、AddOutputFilterByTypeがよく使用されていますが、Apache 2.1 以降で非推奨になり、代わりにmod_filterでフィルターをかけることが推奨されています。AddOutputFilterByTypeでは、場合により適用されないことがあるため、同等の機能を利用できるmod_filterモジュールを使用することが推奨されています。

●Proxyサーバーの対応（#8、#9）

Proxyサーバで適切なキャッシュ処理が行われるように、HTTPのVaryレスポンスヘッダを追加します。

htmlやCSSの書き方で非常に細かいところまで徹底すると、gzip圧縮をフル活用することができます。 ・可能な限り、CSSのプロパティと値は同じ順序にする（例:アルファベット順） ・HTML属性も同じ順序で記述する（例：アルファベット順）hrefは最も一般的なので最初に記述し残りはアルファベット順にする。例えば、Googleの検索結果ページにおいてHTML属性をアルファベット順に記述した場合、gzip後のサイズが1.5%削減できた。 ・大文字・小文字を統一する（例：できる限り小文字に統一する） ・HTML属性の引用符を統一する（例：常にシングル、ダブル、もしくは使わないといった選択にする） ・JavaScript/CSSを縮小化する。JavaScript/CSSの縮小化は、外部ファイル、HTML内に書かれたインラインコード両方で圧縮性を高める。

注意点

・gzip圧縮を有効にすると、特定の処理でエラーになったりするようなので、対応後は必ずサイトの動作確認を行いましょう。 ・SetOutputFilter DEFLATEを設定しているのを良く見かけますが、こちらを記述すると、全てのタイプに対して圧縮が有効になるようなので、AddOutputFilterByTypeやFilterProviderで指定したものは無視されるみたいです。 ・gzip化は、容量の大きなファイルには大きな効果が期待できますが、小さいファイル（150KB以下のファイル）は、圧縮・解凍の作業のほうが時間がかかってしまうため、小さなファイルをgzip化すれば逆にファイルサイズを大きくしてしまう。mod_gzipモジュールを使用することで、ファイルサイズの指定ができるそうですが、試したことはありません。

確認方法

gzipを設定した後に、ちゃんと反映されているかどうかのチェックは、Webサイト「GIDZipTest」で簡単に調べることができます。

http://www.gidnetwork.com/tools/gzip-test.php

「Web Page URL」にURLを記入し、「check」をクリック。「Web page compressed?」が「Yes」だったらgzip圧縮が有効になっています。

f:id:t-namikata:20160130133413p:plain

参考サイト

圧縮を有効にする（page speedの翻訳） link http://t32k.github.com/speed/payload/GzipCompression.html

Apache モジュール mod_deflate（gzip圧縮の説明） link http://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html

gzip圧縮でWebコンテンツを高速化（gzip圧縮の説明） link http://www.webcreator-net.com/tips_memo/server/20120525083004.html

Apache モジュール mod_setenvif（SetEnvIfNoCaseの説明） link http://httpd.apache.org/docs/2.0/ja/mod/mod_setenvif.html

HTTP圧縮を使用してWebページを取得するには？（gzipとdeflateの違いについて詳細に知りたい方） link http://www.atmarkit.co.jp/fdotnet/dotnettips/519httpcompress/httpcompress.html

mod_deflate設定で躓く之事（SetOutputFilter DEFLATEについての説明） link http://atmarkit.mine.nu/blog/?p=768

mod_gzip/Apache（mod_gzipの使い方の説明。ファイルサイズまで指定している） link http://tech.bayashi.net/svr/doc/apache/mod_gzip.html

●参考までにApacheのバージョンが2.1より前の時の書き方（※Apache 2.0.33以降で使用可能）

[plain]<IfModule mod_deflate.c> 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 SetEnvIfNoCase Request_URI _.utxt$ no-gzip

DeflateCompressionLevel 4

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>[/plain]