YSlow for Firebugでサイトのパフォーマンスをチェックする

Yahoo!IncのYSlowが面白い！

Yahoo!IncのYahoo Developer Networkで、Firefox用のエクステンション
YSlowが公開された。これは、Firebugとセットで使う。
ステータスバーのところにYSlowのアイコンがあるので、そこで
「Run Once」を実行すると、開いているページのページの分析をしてくれる。
分析した結果、色々アドバイスをしてくれる。

たとえば、

• HTTPリクエストを減らしなさい
• DNSのルックアップをいくつしている
• リダイレクトを避けなさい
• 有効期限のヘッダーをつけなさい

http://developer.yahoo.com/yslow/

こういうのって、とっても面白い。がんばって、サイトのパフォーマンスを
上げたくなる。最近、色々つけてきて、重くなってきてるしね。


例えば、JavaScriptファイルが難読化も縮小もされていないと言われる。

10. Minify JS
The following JavaScript files do not appear to be obfuscated nor minified.
* [HTTP headers] (11.8K) http://paranoid.dip.jp/js/google/prettify.js

jsminで小さくしてやる。

薫% jsmin <prettify.js >min-prettify.js
薫% ls -l *.js
-rw-r--r--  1 kaworu  kaworu  21490  7 28 01:56 min-prettify.js
-rw-r--r--  1 kaworu  kaworu  44790  1 29 14:05 prettify.js

で、min-prettify.jsを読み込むようにする。
こうすると 10. Minify JSの指摘が出なくなる。

jsminをインストールする
jsminは、コメントや不必要なホワイトスペースをJavaScriptファイルから消すフィルターです。たいてい、ファイルサイズを半分に縮小します。その結果、ダウンロードのスピードが早くなります。

cd /usr/ports/devel/jsmin/
sudo make install clean

jsminの使い方
prettify.jsは入力元のファイルです。
min-prettify.jsは、出力先のファイルです。
min-prettify.jsのファイルサイズは、
prettify.jsの半分程度になっていることが解ります。

薫% jsmin <prettify.js >min-prettify.js
薫% ls -l *.js
-rw-r--r--  1 kaworu  kaworu  21490  7 28 01:56 min-prettify.js
-rw-r--r--  1 kaworu  kaworu  44790  1 29 14:05 prettify.js

関連
http://developer.yahoo.com/yslow/
http://developer.yahoo.net/blog/archives/performance/

サイトのパフォーマンスには、javascriptも関わってくる。
oreilly.co.jp -- Online Catalog: Ajax & Java
http://www.oreilly.co.jp/books/9784873113333/

---