ecサイト|eコマース|パッケージ|アクセス解析|広告効果測定|Webマーケティング構築・開発

株式会社インターオフィス

Webサイトの高速化ルール10　コードのサイズを圧縮する! (Yahoo! developer netoworkより翻訳)

カテゴリー： Webサイト開発日記, アーキテクチャー

ハイパフォーマンスWebサイトフロントエンドのパフォーマンスの重要性から続いています。

Webサイトの高速化ルール10　コードのサイズを圧縮する!

July 23, 2007

——————————————————————————

http://developer.yahoo.net/blog/archives/performance/より翻訳。

Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。

——————————————————————————

「コードのサイズを圧縮する!」とは、コードから不要な文字を除去して、そのサイズを減らしてロード時間を改善することです。
コードの縮小する場合は、すべてのコメントを削除するだけではなく、不要な空白・改行・タブも取り除きましょう。
JavaScriptの場合、ダウンロードするサイズが減るために、レスポンス時間の改善になります。JavaScriptのコードを圧縮する一番ポピュラーなツールは、Yahoo!のフェローである Douglas Crockford が開発したJSMinでしょう。

ソースコードに適用可能な最適化の選択肢として「難読化」があります。コメントや空白文字等の除去という点は「圧縮」と同じですが、「難読化」はコードをごちゃっとさせてくれ、ファンクション名や変数名を短くして圧縮するとともに、読みにくくしてくれることも含まれます。

これによってコードがリバースエンジニアリングされにくくなります。「難読化」は、「圧縮」よりコードサイズを減らすことができるので、よりパフォーマンスの助けになります。ツールの選択肢としては、Javascriptの圧縮ツールよりは少なくなります。DojoのShrinkSafeがその一つです。

「圧縮」は安全ですし簡単ですが、「難読化」はより複雑で、バグを生み出す可能性があります。「難読化」は（変換すべきではない）APIやシンボルを変換してしまう場合がありますし、デバッグもやりにくくなります。私自身は「圧縮」では問題が発生したことはありませんが、「難読化」ではバグを経験したこともあります。U.S.のトップ10サイトの場合、「圧縮」だけで21%、「難読化」なら25%、サイズを減らすことができます。「難読化」はよりサイズを減らすことができますが、私としては、リスクとメンテナンスコストを減らす観点から、、「圧縮」だけにすることをお奨めします。

外部スクリプトファイルを圧縮するだけではなく、インラインのスクリプトブロックも圧縮すべきです。ルール4に書いた通り、スクリプトをgzipしている場合でも、「圧縮」によって、更に5%サイズを減らすことができます。JavaScriptの利用の頻度はますます多くなって、そのサイズも増える傾向にありますから、コードの「圧縮」は是非実施すべきです。

Steve Souders

———————————————————————
◆◆訳注◆◆

これは絶対に効果がある。必ず実施すべき。

関連情報として、JavaScript圧縮＆難読化ツールまとめ
———————————————————————
エントリ一覧