CSSの圧縮と"CSS Compressor"

CSSファイルは圧縮することができます。改行コードやコメント・無駄なインデントなどを削除し、必要最小限の状態にすることを圧縮と呼んでいます。

2009.03.25 CSSの圧縮を行うWebサービス「CSS Minify!!」を公開しました。

CSS圧縮には様々なメリットがあります。

• CSS圧縮とは？
• CSS Compressorのインストール
• CSS Compressorの実行
• perlでのCSS圧縮プログラム
• CSS圧縮の結果を比較
• Apache（httpd.conf）の設定例
• 結論

CSS圧縮とは？

CSS圧縮とはブラウザがCSSを読み込む時に生じる無駄な処理をなるべく少なくするために、記述方法をブラウザに対して最適化する事を指します。実際には改行コードやコメント・無駄なインデントなどを削除し、細かい部分での最適化を行っています。

CSS圧縮を行うことで、CSS自体のファイルサイズが小さくなるため、特に中規模～大規模なサイトではネットワーク帯域の節約を行うことができます。

また、ブラウザでのレンダリングスピードの向上も期待できるため、IEなどのレンダリングが遅いブラウザではサイトの描画速度の向上も期待できます。
（もちろんレンダリングが速いブラウザではより速くなります。）

ですので、小規模サイトから大規模サイトまで、CSSは圧縮した方が良いことが多く
弊社ではリリース時にCSSの圧縮を行い、プロダクション環境（本番環境）のCSSは圧縮した物を使っています。

これまではPerl/CPANモジュールのCSS::Minifierを使って圧縮していました。

なのですが、それ以上に効率的に圧縮するという、圧縮だけじゃない。CSSを解析した上で圧縮する「CSS Compressor」のブログを見て、早速ですがCSS Compressorを試してみました。

今回のCSS Compressorでは、YUIのCSS圧縮ツールをベースにして更に最適化されているので、現在利用しているPerlモジュールでの出力結果と比べてみました。

※CSS Compressorを利用するにはJava version 1.5/5.0 以降のJavaが必要です。詳しくはJavaのインストール、動作環境の構築をご覧下さい。

CSS Compressorのインストール

ユーティリティー系のツールは自分のホームディレクトリ内に"bin"ディレクトリを作って
そこにおくようにしていますので、今回も同様に行います。

> cd ~/bin
> mkdir css_compressor
> cd css_compressor

jarファイル（Java上で動く実行ファイル）をダウンロード

> wget http://www.andy-roberts.net/software/csscompressor/releases/1.0/CssCompressor-1.0.zip

zip圧縮されているのでunzipコマンドで解凍

> unzip CssCompressor-1.0.zip

解凍されたディレクトリ内にjarファイルが存在するかを確認

> cd CssCompressor-1.0
> ls
CssCompressor.jar LICENSE.txt README.txt lib

このCSSCompressor.jarをJavaから実行させます。
README.ｔｘｔに書いてありますが、実行形式、主なオプションは以下の通りです。

java -jar CssCompressor.jar [オプション] [入力するファイル]

使い方: java -jar CssCompressor-x.y.z.jar [オプション] [入力するファイル]
オプション
-h, –help 使い方を表示します
–charset 入力するファイルの文字コードを明示的にセットします。（例：utf-8）
–line-break 指定されたカラム番号の部分で改行を入れます
-v, –verbose 処理時にメッセージ、警告を表示します
-o 出力する先のファイル名を指定します（指定なしだと標準出力に表示します）

元ファイルの指定がない場合、標準入力を読み込みます

※フォント指定で、"MS P ゴシック"など、日本語の表記をCSSの設定内に入れていると思いますので必ず文字コードは指定してください。
（指定なしだとマルチバイト文字は"??????????"みたいに文字化けしてしまいます）

CSS Compressorの実行

インストールが終了したら、実際に圧縮してみます。今回は、このBlogのCSSファイル（styles-site.css）を圧縮します。

一応warningやnoticeがあった場合に表示されるよう、verboseオプションを指定しています。
また、UTF-8の文字コードですので、 –charsetオプションも指定しています。
ファイル本体の命名規則は ファイル名と拡張子の間に "min"を入れるようにルール付けしています。

java -jar ~/bin/CssCompressor-1.0/CssCompressor.jar –charset=utf-8 -o styles-site.min.css -v styles-site.css

これで、 styles-site.cssと同一ディレクトリにstyles-site.min.cssが出力されます。

この圧縮されたCSSファイルとPerlモジュールのCSS::Minifierで圧縮したCSSファイルを比較してみました。

perlでのCSS圧縮プログラム

CSS::Minifierを使ったPerlでの圧縮プログラムを以前から使っていました。プログラムのソースコードは以下になります。

#!/usr/local/bin/perl

use strict;
use warnings;
use CSS::Minifier qw(minify);

do_task(@ARGV);

sub do_task {
my $input_filename = shift;
my $output_filename = $input_filename;
$output_filename =~ s/.css/.min.css/;
open(INFILE, $input_filename) or die;
open(OUTFILE, '>'.$output_filename) or die;
minify(input => *INFILE, outfile => *OUTFILE);
close(INFILE);
close(OUTFILE);
}

このプログラムを実行し圧縮したCSSを作成します。

./css_minify.pl styles-site.css

CSSの圧縮結果

CSSをCSS Compressorで圧縮したもの、Perlモジュールで圧縮したもの、元のCSSファイルを比較してみました。

だいぶ違いますね。やはりCSS Compressorを使ったものが一番小さく最適化されるようです。

今後はPerlベースのモジュールではなく、CSS Compressorを使ってCSSを圧縮したいと思います。

Apache（httpd.conf）の設定例

弊社では、本番環境のサーバでは、"/css/" と "/css-min/"を同一階層に用意していて、それぞれ元のCSS、圧縮したCSSを同一のファイル名で保存しています。

この構造を利用して"/css/" へのアクセスがあった場合、サーバ内部の実体は"/css-min/"を参照させるようにrewriteしています。

RewriteRule ^/css/(.*)$ /path/to/css-min/$1 [L]

結論

上記の結果から、今後は CSS Compressorを使って、CSS圧縮かけたものを
本番環境で運用することが望ましいかと思います。

メリット・デメリットとして、以下が挙げられます。

　・ネットワーク帯域を節約できる
　・ブラウザのレンダリングスピードを向上できる

　・ファイル管理が複雑になる

”ファイル管理が複雑になる”という面は特に、本番環境と開発環境で物理的に違うCSSを参照するため、デプロイ時には注意する必要があります。

Java環境のインストールをしないと動かない面もありますが、環境さえ整えてしまえば非常にいい事ずくめなので、かなりお勧めです。

• CSS Minify!!（CSSの圧縮を行うWebサービス）
• Javaのインストール、動作環境の構築
• JavaScript::Minifier::XS（JavaScriptの圧縮について）