ウェブサイトを構築・表示させる際に利用するCSS/javascriptファイル。これらのファイルは、あとで編集がしやすいようにコメントが挿入されていたり、見やすさを重視するために余白(インデント)や改行を挿入したりすることがあります。ただ、皆さんご存知のように、これらの改行・余白・コメントはファイルサイズを肥大化させる要因にもなるんですよね。

なので、これらのファイルからそれらを排除することでファイルサイズを小さくすることが可能です。
min

jQueryライブラリやプラグインを使ったことがある人なら「~.min.js」というファイルを見たことがあると思います。この「min」 とは「minify(圧縮化)」の略で、無駄な改行や余白やコメントが全て削除されたファイルを意味します。実際にそれらのファイルを開いてみると、改行がほぼ(もしくは一切)ないファイルだということが分かるはずです。

今回は、このCSSやJavascriptファイルをminify化させる際に便利なオンラインサービスをご紹介します。

CSS/javascriptファイル minify化ツール

CSS Compressor

CSS Compressor
CSS Compressor

対応ファイル
CSS
圧縮タイプ
  • Highest: ファイルサイズ重視 (改行なし)
  • High: 可読性は残しつつファイルサイズを圧縮 (セレクタごとに改行)
  • Standard: 可読性とファイルサイズの中間設定 (プロパティごとに改行)
  • Low: 可読性重視(コメントを削除)
利用した結果
  • Highest: 43.87%
  • High: 43.1%
  • Standard: 37.75%
  • Low: 未使用
感想
フォームにコードを入力して、「Compression Level」からレベルを選択します。Low~Highestが選択でき、レベルが高いほど可読性よりもファイルサイズを優先してminify化してくれます。

YUI Compressor

Online YUI Compressor
YUI Compressor

対応ファイル
CSS、JS
圧縮タイプ
  • 1パターン (選択不可)
利用した結果
  • [CSS] 44%軽量 / [JS] 77%軽量
感想
ファイルのコードを入力して「Compress」をクリックするだけで、改行ナシのコードが出力されます。同時にgzipエンコード圧縮ファイルも生成してくれます。minify+gzip圧縮で大幅なファイルサイズダウンが見込めます。

CSS Drive – CSS Compressor

CSS Drive Gallery  CSS Compressor
CSS Drive – CSS Compressor

対応ファイル
CSS
圧縮タイプ
  • Super Compact: 改行なし
  • Normal: セレクタごとに改行
  • Light: 可読性重視(コメントを削除するだけっぽい)
利用した結果
  • Super Compact: 46%
  • Normal: 43%
  • Light: 未使用
感想
コードを入力して「Compress-it!」をクリックします。Super Compactを利用した際に他のツールよりも3%高い圧縮率が出ました。

Code Beautifier

Code Beautifier
Code Beautifier

対応ファイル
CSS
圧縮タイプ
  • Highest: ファイルサイズ重視 (改行なし)
  • High: 可読性は残しつつファイルサイズを縮小化 (セレクタごとに改行)
  • Standard: 可読性とファイルサイズの中間設定 (プロパティごとに改行)
  • Light: 可読性重視(コメントを削除するだけっぽい)
  • Custom: 圧縮方法をカスタム可能
利用した結果
  • Highest: 43%
  • High: 42.2%
  • Standard: 37%
  • Light: 未使用
  • Custom: 未使用
感想
ファイルをminify化する際に色々と設定が可能です。カスタムは使わずに標準レベル以上のみ試したところ、圧縮率は他ツールと同程度。色々とカスタムして縮小化するのなら、使えそうです。

Clean CSS

Clean CSS
Clean CSS

対応ファイル
CSS
圧縮タイプ
  • Highest: ファイルサイズ重視 (改行なし)
  • High: 可読性は残しつつファイルサイズを圧縮化 (セレクタごとに改行)
  • Standard: 可読性とファイルサイズの中間設定 (プロパティごとに改行)
  • Low: 可読性重視(コメントを削除するだけっぽい)
  • Custom: 圧縮方法をカスタム可能
利用した結果
  • Highest: 43%
  • High: 42.2%
  • Standard: 36.8%
  • Low: 未使用
  • Custom: 未使用
感想
「カスタム」項目があります。こちらもカスタムは試さず、標準以上のレベルのみ確認。ファイルの圧縮率は他ツールと同程度ですね。

CSS Optimizer

CSS Optimizer
CSS Optimizer

対応ファイル
CSS
圧縮タイプ
  • 最高: 改行なし
  • 高: セレクタごとに改行
  • 標準: プロパティごとに改行
  • 低: 可読性重視
  • カスタム: 圧縮方法をカスタム可能
利用した結果
  • 最高: 39.2%
  • 高: 38.4%
  • 標準: 32.7%
  • 低: 未使用
  • カスタム: 未使用
感想
minify化ツールでは珍しい日本語対応。圧縮率は他よりも数値が劣っているのですが、原因不明。

結論

色々とツールの圧縮率を比較したあとで言うのもなんですが、基本的にはminify化とは「余白(インデント)をなくす・改行をなくす」ので、圧縮後のファイルサイズってどれも同じになるかと思うんですが、上記のようになぜか圧縮後のファイルサイズって異なりますよね。これは、ツール側のサイズ測定に誤差があるのか、それとも何かしらの違いがあるのか。。ちょっとここら辺はもう少し調べてみようと思います。

それを抜きにした場合、個人的には複雑な機能は一切なく、コードを入力してボタンを押すだけでファイル圧縮が出来てしまう、「YUI Compressor」が使いやすかったですね。JavascriptもCSSの両方にも対応していますし、gzipエンコード圧縮も可。難しい工程もないので、とりあえず試してみたいという方は是非。

ただし、上記ツールはほぼ海外製ですので、ファイルによっては日本語テキストが正常に処理できない可能性も考えられるので、minify化を行う際は必ずファイルのバックアップを取っておくことを忘れずに。