JavaScriptやcssをgzip圧縮・転送

prototype.jsが大きい!ということで、gzip圧縮して使うことにします。
以前やったんですけど、すっかり忘れてしまっていたのでメモ


ようは


1.htmlのソースはいじらない(本来の.jsを指定したまま)
2.本来の.jsのファイルと同じディレクトリに圧縮したファイル(.js.gz)をアップロード
3..jsのファイルと同じディレクトリに.htaccessを置いて、mod_rewriteを使う指定。
 Accept-Encodinggzipを含むかどうかで.jsと.js.gzを振り分け


ですね。


昔のメモをもとに、以下の記事を順番に読むとすっきり思い出せました。


▽世界の片隅で.jgzと言ってみる(こぶたのラッパ)
 http://smil.exblog.jp/4650470/


prototype.jsを10KBにする方法の続き(亜細亜ノ蛾 - Weblog
 http://asiamoth.com/mt/archives/2006-11/19_2357.php


▽mod_mimeは黒魔術のような気がする(たまには呪文をとなえてみるか:仕事版)
 http://cast-a-spell.at.webry.info/200610/article_4.html


▽.jgz と .js.gz と Apache の設定(ユンサンの)
 http://blog.l-xs.com/yungsang/2006/11/jgz_jsgz_apache.html



圧縮するファイルはprototype.js 1.5.1.1です。
他のライブラリから呼び出す都合上、最新版でも同じ動作するかわからないので古いの使ってます。


まず、YUI CompressorYahoo! User Interface Libraryが提供するJavaScript圧縮ツール)を、オンラインで使える以下のサイトで、JavaScriptを圧縮(しなくてもいいし、他のツールでもいいけど)。
94.0KB56.3KB


▽Online JavaScript/CSS Compression Using YUI Compressor
 http://refresh-sf.com/yui/



次に、圧縮したファイルを適当なアーカイバgzipに圧縮。
56.3KB16.1KB


これを.jsと同じディレクトリにアップロード。


最後に.htaccessに以下の行を追加

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

ForceType text/javascript
AddEncoding x-gzip .gz


たったこれだけ。
不安だったらLive HTTP headersを使って確認すれば、Content-Lengthのサイズから.js.gzを返しているのがわかります。


cssも同じパターンでできますね。
cssOnline JavaScript/CSS Compression Using YUI Compressorで圧縮できるのが嬉しいですね。どうせ小さくするなら思いきって(^_^)


ただJavaScriptに比べてCSSは書き加えることも多いから、元の.cssファイルを修正したのに.css.gzを修正するのを忘れると、あれ?結果が反映されないゾと頭を抱えることになりますから、注意>自分(笑)


これらの工夫で少しはページを見た際に、軽く感じてもらえるといいですね。
……クライアント側で、ファイルを展開する方が負荷が高かったりすると頭かかえますが。



なおmod_rewriteを使わない場合。


▽ブラウザのリクエストに応じて、予め圧縮しておいたのか生のか選んでjsやcssを配信する方法 〜Apache 2.2編〜
 ((ひ)メモ)
 http://d.hatena.ne.jp/hirose31/20090709/1247119714



他にはこの記事も参考になりました。
JavaScriptを書けないので、タイミングを調整するのは私には難しいですが、いつか試みてみたいものです。


JavaScriptの動作を軽くするための工夫
 (技術者視点のユーザビリティ考第30回/ITpro)
 http://itpro.nikkeibp.co.jp/article/COLUMN/20080109/290747/?ST=webdesign&P=1




一番の問題は、自分のサーバ上のJavaScriptじゃなくてAmazon.co.jpの「プロダクトクラウドウィジェット」なんですけどね。
「プロダクトクラウドウィジェット」、見た目軽そうでお気に入りなのに、Live HTTP headersで見てたら、転送されてくるJavaScriptのサイズの大きいこと!(圧縮ぐらいしてよ!<してるかも?)


Firefox3.5だと、「ws.amazon.jpからデータを転送しています」と表示されて一瞬止まるんですよねぇ。
Google Chromeだとそれほどでもないので、JavaScriptの実行スピードの問題なのかしら。


はずしちゃおっかな