メンテナンスも可能なcssファイルの最適化・軽量化ならこの方法

投稿者: | 2014年2月18日

ウェブサイトの表示は高速であればあるほどユーザーの離脱率は低くなりUX(ユーザーエクスペリエンス)も向上する。
表示速度もサイト評価の対象となるとGoogleもコメントしているように、サイトの高速化は急務といえる。

大きな変更を必要としない高速化として、スタイルシートの最適化、圧縮、軽量化は効果的な方法。

検索すると様々なcss圧縮のウェブサービスが見つかるが、難読化がメインだったり、圧縮のレベルを設定できないなど、不便なサイトも多い。
最適化・軽量化の処理をした後も、サイトの更新等でcssの修正が必要となる場合も多いことから「適度な軽量化」が出来るサイトとして、以下のサイトをおススメする。

http://e-optimize.jp/services/csstidy/css_optimiser.php

使い方は簡単。

1. ページ左側にある「CSS Input」のテキストボックスの中にcssファイルの中身をペーストするか、「URLから入力」で最適化・軽量化したいcssファイルのURLを指定する。

2. 実行ボタンを押す。

3. 画面下部に最適化・軽量化されたcssファイルが表示される。

4. 表示されたcssファイルをコピーして保存。

最適化・軽量化されたcssファイルの上部には

入力: 6.901KB, 出力:4.964KB, 圧縮率: 28.1% (-1937 Bytes)

のように表示されるので、どれだけ圧縮、軽量化できたかも確認できる。

また、オプションとしてCode LayoutとOptionsの項目があり、

Code Layoutでは

圧縮率(コードレイアウト)を

最高 (改行なし)
高 (セレクタ1行表記)
標準 (プロパティごと改行)
低 (プロパティをインデント)

からプルダウンで選択することが出来る。

Optionsでは

CSSの内容を保護する
セレクタをアルファベット順で整列(注意)
プロパティをアルファベット順で整列
セレクタの再編成
ショートハンドCSSの最適化
colorの値を簡略化する
font-weightを数値にする
セレクタを小文字にする
プロパティの文字:
変更なし   小文字   大文字
不要なバックスラッシュを削除
最後のプロパティには ; をつけない
規格外のプロパティは削除
タイムスタンプを追加
最適化の結果を保存する

からチェックボックスで有効にする項目が指定出来る。

今後の修正を必要としないcssファイルの場合は圧縮率を「最高」にしてもいいが、修正や追加などのメンテナンスが必要なcssファイルの場合は

標準 (プロパティごと改行)

がおススメ。
また、Optionsは以下の

colorの値を簡略化する
font-weightを数値にする
不要なバックスラッシュを削除

にチェックのままで良いだろう。

なお、最適化のためにcssファイル内のコードの順序等も変更されるから、必ず元のcssファイルは保存しておき、表示に問題が無いことを確認することが大切。