eyemovic inc.

Culture blog会社の活動・働き方

2011.01.11

minify

最近、嫁にいろいろと minify されて compress されたおかげで、

パフォーマンスが低下しています。 

 
深い意味はありません。 
 
やまむらです。 
 
ここ1、2年、Webサイトのレスポンスが、特に注目されているように感じます。 
昔の遅い回線の時代と違い、今は高速な回線が一般的になっています。 
1枚の画像を表示するのに何分も待っていた時代ならば、気にならないような
時間差ですら、 顕著に感じることができるようになりました。 
 
そのような回線速度の向上にともなって、Webサイトの表示を高速化するためのテクニックがいろいろと開発されてきました。 
 

 

 

 


Webサイトのパフォーマンスの問題に直面した方は、一度は目にしたことがあると思いますが、Yahoo! Developer Network – Best Practices for Speeding Up Your Web Siteには、WEBサイトの高速化するためのテクニックがまとめられています。

(注:英語です。翻訳サービスを別途ご利用ください。)
 
この記事内のカテゴリのひとつに「Minify JavaScript and CSS」というのがあります。 
そこでは、JavaScript の不要な文字(スペース、改行、タブ)・コメントを削除してサイズを削減(minify)することで、ロード時間が短縮されて応答時間のパフォーマンスが向上するよ、みたいなことが書かれています。 
 
以下にどれくらい変わるのかを確認するためにサンプルを作成しました。
サンプルの内容は、みんなが大好きな JQuery を読み込むだけのページです。
 
minify 化されている場合 296ms で読み込みが終了しました。
sample1.jpg
 
 
minify 化されていない場合 373ms で読み込みが完了しました。
sample2.jpg
 
2つの差は、たった 77ms ですがこれだけの時間をバックエンドで短縮するのは結構大変だと思います。
 
ちなみに、minify 化は、ツールを活用すれば比較的簡単にできるのでおすすめです。
 
Yahooが作ったYUI Compressorとか、Googleが作ったClosure Compilerなどです。 
この他にも、JavaScript や CSS をひとまとめにしたうえで minify 化するようなツール minify なんかもあります。 
 
いまとなっては、当たり前すぎるテクニックですが、有効活用して欲しいと思います。
 
 

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。