CSSを圧縮・軽量化
ページを描画するにはCSSをダウンロードして解析する必要があるため、スタイルシートを軽量化することで、初回描画（First Paint）の高速化、Core Web Vitalsの改善、モバイルデータ通信量の削減につながります。このCSS圧縮ツール（ミニファイア）は、空白やコメントを削除するだけでなく、重複するルールの統合、カラーコードの短縮、不要な値の削除といった構造の最適化を行います。これにより、ページの見た目を変えることなく、スタイルシートを極限まで軽量化できます。
主な機能
- 空白とコメントの削除
- 値の短縮: カラーコード、ゼロ、単位、フォントウェイトを短縮します。
- 構造の最適化: 重複するセレクタを統合し、上書きされる不要な宣言を削除します。
- ライセンスコメント: オプションでライセンスコメント（
/*! … */）を保持できます。 - サイズ比較: 圧縮前後のサイズをバイト数とパーセンテージで比較できます。
- プライバシー保護: 処理はすべてブラウザ内で完結します。
圧縮前と圧縮後
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
変換後：
.card .title{font-weight:700;color:#333;font-size:1.25em}
CSS圧縮のタイミング
本番環境へのビルド時にCSSを圧縮し、読みやすいソースコードはバージョン管理システムで管理するのが一般的です。多くのフレームワークやバンドラーはこれを自動で行いますが、このツールは、ちょっとした修正、CMSのテーマ、HTMLメールのテンプレート、埋め込みウィジェット、またはビルド環境のないプロジェクトで手軽に圧縮したい場合に便利です。
関連ツール
スクリプトの圧縮にはJavaScript圧縮ツール、視覚的なスタイルの作成にはBox ShadowジェネレーターやCSSグラデーションジェネレーター、JSONの整形にはJSONフォーマッターをご活用ください。