圧縮

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