Hatena::ブログ(Diary)

Schuzak’s Blog

2010/4/22 Webサイトの.htaccessをいじってGZIP圧縮を使う

現サーバーは少々不親切な仕様で、否応無しに.htaccessの書き方を覚えることになる。

その流れでこの前エラーページを作ってみたが、せっかく使える環境なのだから今度は前々からGoogleに言われていたGZIP圧縮を使ってみた。

Googleからは圧縮以外にJavaScriptのファイルを一つにまとめるよう推奨されていたが、この際IE専用のコードを全部削除し、.htmlに書き込んであったものも全部外部ファイルで一纏めにしGZIP圧縮。

元々1Kにも満たないのでほとんど意味ないけど.cssも圧縮。

ついでに大きめだったりほとんど変更の無い .htmlや、.txt、favicon.ico も圧縮。

はっきり体感でわかるほど軽快になった。

よかったよかった。


.htaccessに追加した該当部分は以下の通り。こうしておけばどのブラウザでもきちんと動く。Safariだけ挙動が違って手間取ったが、おかげできちんとした書き方を覚えられた。

圧縮した.gzを元ファイルと同じディレクトリに置いておけば対応しているブラウザでのアクセスには自動的に圧縮したファイルを返し、ユーザーにファイルの違いを意識させることもない。

Header append Vary: Accept-Encoding

AddEncoding x-gzip .gz

RewriteEngine on
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule ^.* %{REQUEST_URI}.gz

<FilesMatch "\.txt\.gz$">
	ForceType   text/plain
</FilesMatch>

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

<FilesMatch "\.(xml|rdf)\.gz$">
	ForceType   text/xml
</FilesMatch>

<FilesMatch "\.css\.gz$">
	ForceType   text/css
</FilesMatch>

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

<FilesMatch "\.ico\.gz$">
	ForceType   image/x-icon
</FilesMatch>

追記:

※前述のとおり、このコードにSafariで機能させるために何かを追加する必要はない。

RewriteCond %{REQUEST_FILENAME} !.gz$ は必要ない。Webサイトのパフォーマンス維持向上の観点から無駄は極力排すべき。


ほかにも色々使い道があるようなので、もっと調べてみよう。