ウェブサイトの表示は高速であればあるほどユーザーの離脱率は低くなり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ファイルは保存しておき、表示に問題が無いことを確認することが大切。