どうも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制作のちょいテク詰め合わせ
↧