CSS最適化サービスによるファイルサイズ削減

2007年4月11日 | カテゴリ：(X)HTML/CSS/JS

サイト制作において、レイアウト制御にCSSを活用することがほとんどになってきました。そうなるとCSSファイルのサイズも無視することができません。場合によっては１ファイルあたり数十KBを越えることもあるのではないでしょうか。

トラフィック改善のためにApacheサーバ側でgzip圧縮をかける方法もあるようですが、もう少しお手軽な解決法としてCSSの最適化を行なってくれる無料サービスを利用するという手があります。

CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスいろいろ - GIGAZINE
http://gigazine.net/index.php?/news/comments/20070318_css_optimizer/

いろいろと紹介されていますが、基本となる圧縮方法は以下の通りです。

• 空白や改行を削除する（可読性とトレードオフ）。
• 色指定の記法を簡略化。
• margin、padding指定の記法を簡略化。
• 同一プロパティを持つセレクタをカンマ区切りでまとめる。
• border、backgroundなどのプロパティをひとまとめにする。

プロパティをひとまとめにするというのは、例えば

border-width:1px;
border-style:solid;
border-color:black;

と書いていたものを

border:1px solid black;

とまとめるということです。これらの記法は僕も日頃から心がけているつもりでしたが、ツールを併用して徹底することで、僕の場合平均して30～35％程度圧縮することができました。驚きです。

ちなみに下記のツールが日本語ということもありお勧めです。

CSS最適化ツール (based on CSSTidy 1.2)
http://e-optimize.jp/services/csstidy/css_optimiser.php

尚、改行を削除してしまうと可読性が著しく下がりメンテナンス性に欠けます。適用はオプション指定することができるので用途に合わせて活用するとよいですね。

posted by nac | permalink | comments (0) | trackbacks (0)