前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。
javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すればファイルサイズを縮小できる。

小さくする事をMinify（ミニファイ）、Minifyされたものを整形して読みやすくする事をBeautify（ビューティファイ）という。また、2つのファイル内容をCompare（コンペア=比較）するサービスもある。
それぞれWeb上で利用できるサービスがあるので、今回はそれらをメモ。

• Minifyのみ
• Beautifyのみ
• どんなファイルでもいける、マルチな「Pretty Diff」
• 多数のサービスをまとめたページ「cleancss.com」
• ちょっと注意メモ

Minifyのみ

Compressor

Minifyのみだが、javaScriptとCSSと言ってるわりに HTMLも行けたりする単純さ。
ソースを貼り basic か powerfull を選ぶと（powerfullが良い）ソースを表示。超シンプル。
変数を勝手に変えたりしない素直なところが好き。

Minify CSS

シングス [Things]さん作。CSSのMinifyのみ。ファイルアップロードかソースのペーストで圧縮。複数アップロード可能。

Beautifyのみ

Online javascript beautifier

javaScriptのBeautifyのみ。インデントをどうするかなど整形の設定もできる。

Styleneat – CSS Organizer

CSSのBeautifyのみ。Optionsで整形の設定ができる。

どんなファイルでもいける、マルチな「Pretty Diff」

Pretty Diff

これは、Minify、Beautifyはもちろん Compare（コンペア=比較）までできちゃうサイト。
ファイル形式も、javaScript、CSS、HTMLでもOK。

多数のサービスをまとめたページ「cleancss.com」

cleancss.com

このページはMinify、Beautify、その他のいろいろなサービスの一覧。
JSON, Perl, PHP, Python, Ruby, SQL, XMLなどのデータフォーマットも扱えるようだ。

ちょっと注意メモ

Minifyは当然ながら「コメント」も削除される。
私の場合、自作のjsではコメントが大事（記憶のよりどころww）だったりするので、Minifyする前のファイルのバックアップは必ずしている。

WordPressの「style.css」も、コメント部分が無くなると、テーマとして認識されなくなる。
そこで「style.css」は@import url( ) で他のCSSを読み込むだけにしている。これなら「style.css」以外のファイルをMinifyできるので。

---

マルチな「Pretty Diff」だけで他は要らないんじゃないかと思うが、なぜかMinifyは「Compressor」がお気に入り。Beautifyする場合はその都度適当にサービスを選んでいる。

本サイトのcanvas用javaScriptをミニファイしたところ、4.7KBから3.4KBにファイルサイズが減った。約72％になったということか。元が小さ過ぎて実感無いけど（笑）、塵も積もれば…なのだろう。