kei3.jp | head -n 10 diary

最近、Firebugを使うことが多くなり、パフォーマンスのチェックもしているので、YSlow for Firebugもインストールしてみました。

YSlow for Firebugは、パフォーマンスを改善する13項目に関してチェックし、AからFまでの判定をしてくれます。なかなか便利ではあるのですが、項目によっては簡単に対応できないモノもあります。

そんな中、Javascriptに関する「10. Minify JS」は、判定が良くない場合、直ぐにでも解決できる項目です。Javascriptのサイズを小さくするツールが、JSMIN(JavaScript Minifier)として公開されているので、それを利用すれば、直ぐにでも対応できます。変換してくれるウェブページもあります。

JSMIN, The JavaScript Minifier
>>関連リンク

JS Minifier
>>関連リンク

JSMINのソースをダウンロードしてきて使う場合は、Mac OS Xだとターミナルでソースのあるディレクトリーに移動し、

gcc jsmin.c -o jsmin

として、出来たjsminを/usr/local/bin/辺りにコピーします。使い方としては、

jsmin < base.js > base.mini.js

この様な感じです。実際に実行すると、サイズとしては7805バイトから4852バイトになりました。(base.jsはADDTのスクリプトです。)

試しに、オリジナル(C言語版)とJavaScript版のJS Minifierの出力結果を比べてみました。ADDTのbase.jsを使った限りでは全く同じ出力結果でした。

一般的に公開されているJavaScriptのライブラリーはそのソースに著作権表示や使い方など、コメントが多く含まれている場合も多いので、ソースをテキストエディタなどで開いてみて、無駄が多そうな場合は、JSMINを通すと大幅にダイエットできます。

ソースの可読性が悪くなりメンテナンスが必要な場合は、修正が難しくなりますが、公開用はJSMINを通しておいた方がファイルが小さくなりますし、オリジナルスクリプトの場合、少しだけ流用も防げるかも。所詮テキストなので、流用しようとする人はどの様になっていても盗んでいくとは思いますが・・・。

それから、順番が逆になりましたが、JavaScript云々以前に、HTMLの書き方の問題に関してもチェック項目があるので、その部分の判定が良くない場合は、まず最初に修正すべきですね。それはCSSとJavaScriptの書いている位置です。昔はそれほど五月蠅く言われませんでしたが、ヘッダーの中のCSSとJavaScriptを書く位置は重要です。charsetの位置は昔から言われてきたので、間違える人も少ないと思いますが、コレも重要。CSSとJavaScriptで言えば、CSSが先でJavaScriptが後です。

実はこの順番、状況によっては非常に悩ましいことになります。Dreamweaverでテンプレートを使っていて、尚かつサーバービヘイビアにCSSやJavaScriptが含まれる場合、勝手に動かしたりするとサーバービヘイビアのパネルで「!」マークが付いたりします。これはソースが勝手に書き換えられて事を示すのですが、こうなってしまうと、次にサーバービヘイビアを挿入した場合などに、更にソースが崩れ、最後にはそのページ自体がエラーで動かないページになってしまいます。その辺を理解して作業すればよいのですが、慣れるまでは苦労します。こういう事がおきることを理解していれば、問題ないのですが・・・。

以上の点は、ウェブページのコンテンツを制作する上で対応できる部分です。中には物理的に無理だったり。サーバーを管理してないと対応できない部分もあったりして全てをA判定にすることは難しいです。とは言え、出来ることもやってないのは不味いので、YSlowはチェックツールとして役に立つのではないかと思います。


YSlow for Firebugに関しては以下の記事とか、解説を翻訳してくださっている方があるので、その辺を参考にすると良いと思います。

秋元@サイボウズラボ・プログラマー・ブログ: YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン
>>関連リンク

Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス
>>関連リンク