JavaScriptやcssをgzip圧縮・転送

11.開発日記 html

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


ようは


1.htmlのソースはいじらない（本来の.jsを指定したまま）
2.本来の.jsのファイルと同じディレクトリに圧縮したファイル（.js.gz）をアップロード
3..jsのファイルと同じディレクトリに.htaccessを置いて、mod_rewriteを使う指定。
　Accept-Encodingにgzipを含むかどうかで.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 Compressor（Yahoo! User Interface Libraryが提供するJavaScript圧縮ツール）を、オンラインで使える以下のサイトで、JavaScriptを圧縮（しなくてもいいし、他のツールでもいいけど）。
94.0KB→56.3KB


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



次に、圧縮したファイルを適当なアーカイバでgzipに圧縮。
56.3KB→16.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も同じパターンでできますね。
cssもOnline 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の実行スピードの問題なのかしら。


はずしちゃおっかな