どうも7noteです。CSSを簡単にmin化させて軽量化できるツールを紹介。

WEB制作において、ページの読み込み速度は命に関わります。（そこまでではないです。）

画像を圧縮しておくのと同様に、理論上はソースファイルも1文字でも短いほうが読み込み速度は上がります。

そんなときに目でいちいちチェックしていられないので、CSSを1クリックで圧縮してくれるWEBツールを紹介。

【1クリックでCSSを圧縮できるオンラインツール】

使った結果

約50行、約617文字(スペース含む)をmin化してみました。
その結果、

「667バイト」 → 「531バイト」

約80%にまで抑えることができました！
データ容量を2割カットできたことになります！

使い方・注意点

「使い方」

左側の「Input CSS」と書かれた欄に作成したCSSをコピペします。
↓
その少し下に「Minfy」と書かれたボタンがあるので、そのボタンをクリック。
↓
すると右側の「Minified Output」に圧縮されたCSSが表示されるので、「Copy to Clipboard」と書かれたボタンでコピーして、任意のファイルに貼り付けて保存すれば完了！

※変更（省略）される箇所

改行
半角スペース等
インデント(Tabやスペース)
コメントアウト
プロパティがないセレクタ
各セレクタのプロパティの最後のセミコロン(;)
その他不要な文字（誤って入った全角スペース等）

「注意点」

重複した内容（プロパティやセレクタなど）は消えない
minファイル化した場合、後で修正がしにくい。
minファイル化するのであれば、「style.min.css」などファイル名を変えて保存し使用するのがオススメ。

まとめ

メリットは圧縮することにより、少しですが**データの軽量化に繋がり、ページの読み込み速度の改善に繋がります。**ただCSSだけで圧縮できるデータ容量には限界があるので、これも行いつつ、ソースの見直しや画像の圧縮も同時並行で勧めて行く必要があります。

今回紹介したオンラインツールだけでなく、SASSファイルをコンパイル時に自動的にmin化して保存する方法や、その他ツールなど様々な方法があるので、自分の開発環境にあった方法を試してみてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ