第一回はGoogle PageSpeed Insightsを使ってサイトの現状を把握すること、
そして静的コンテンツの圧縮方法を紹介し、
第二回では静的コンテンツにキャッシュを導入する方法を紹介しましたが、今回はその第三弾です。
CSSの縮小（圧縮）についてまとめました。細かいことですがボディーブローのように効いてきます。多分。

１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）
２．ブラウザのキャッシュを有効にする（静的コンテンツにキャッシュを導入する）
３．CSSを縮小する（当記事）
４．HTMLを縮小する
５．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（※一部）
６．読み込み中のときにloading indicatorを表示する（これはユーザー体験を高めるためのおまけ）

では、さっそく行ってみます。

CSSの圧縮で外部サービスを利用する

CSS Compressor

圧縮レベルはLow〜Highestまでの４段階から選ぶことが出来ます。
サービス運用には可読性なんてどうでもいいので迷わずHighestを選びましょう。
以下のように圧縮されます。

以下、だいたい同じようなサービスなのでリンクだけ紹介。

CSS Minifier

Online JavaScript/CSS/HTML Compressor

CSS Minifier

Compassを使って圧縮する

$ compass watch -e production path/to/scss/

css_dir = "../css"
sass_dir = "../scss"
images_dir = "../images"
output_style = (environment == :production) ? :compressed : :expanded

 
↑応援よろしくお願いします！m(_ _)m