CSS ファイルには、コメント、空白文字、インデントなどの不要な文字が含まれていることがあります。 本番環境では、これらの文字を安全に削除して、ブラウザでのスタイルの処理に影響を与えることなくファイルサイズを縮小できます。この手法は圧縮と呼ばれます。
圧縮されていない CSS を読み込んでいます
次の CSS ブロックを見てみましょう。
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
/* all titles need to have the same font, color and background */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
このコンテンツは読みやすいですが、必要以上のサイズのファイルが生成されます。
- インデントにスペースを使用し、コメントも含みますが、コメントはブラウザで無視されるため、削除できます。
<h1>要素と<h2>要素のスタイルが同じです（個別に宣言するのではなく、「h1 {...} h2 {...}」）。「h1, h2{...}」と表現できます。- background-color（
#000000）は#000として表すことができます。
これらの変更を行うと、同じスタイルのよりコンパクトなバージョンが得られます。
body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
このような CSS はおそらく、記述しない方がよいでしょう。代わりに、通常どおり CSS を記述して、ビルドプロセスに圧縮手順を追加できます。このガイドでは、一般的なビルドツールである webpack を使用してビルドする方法を説明します。
測定
他のガイド（Fav Kitties）でも使用されているサイトに CSS 圧縮を適用します。このバージョンのサイトでは、優れた CSS ライブラリ animate.css を使用して、ユーザーが猫に投票するときにさまざまなページ要素をアニメーション化します Ц。
まず、このファイルを圧縮するとどのような可能性があるかを把握する必要があります。
- 測定ページを開きます。
- URL「
https://fav-kitties-animated.glitch.me」を入力し、[Run Audit] をクリックします。 - [レポートを表示] をクリックします。
- [パフォーマンス] をクリックして、[最適化] セクションに移動します。
表示されるレポートでは、Animation.css ファイルから最大 16 KB を保存できることがわかります。
次に、CSS のコンテンツを調べます。
- Chrome で Fav Kitties のサイトを開きます。（初回は Glitch サーバーからの応答には時間がかかることがあります）。
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- [CSS] フィルタをクリックします。
- [キャッシュを無効にする] チェックボックスをオンにします。
- アプリを再読み込みします。
このページは 2 つの CSS ファイル（それぞれ 1.9 KB と 76.2 KB）をリクエストしています。
- [animate.css] をクリックします。
- [Response] タブをクリックして、ファイルの内容を表示します。
スタイルシートには空白やインデントに使用する文字が含まれています。
次に、これらのファイルを圧縮するために、ビルドプロセスに webpack プラグインをいくつか追加します。
webpack による CSS 圧縮
最適化に進む前に、Fav Kitties サイトのビルドプロセスの仕組みを理解しておいてください。
デフォルトでは、webpack によって生成される JS バンドルには、インライン化された CSS ファイルのコンテンツが含まれます。今回は、個別の CSS ファイルを保持するため、次の 2 つの補完的なプラグインを使用します。
- mini-css-extract-plugin により、ビルドプロセスのステップの 1 つとして、各スタイルシートが独自のファイルに抽出されます。
- webpack-fix-style-only-entries は、webpack-config.js にリストされている CSS ファイルごとに余分な JS ファイルが生成されないようにするために、wepback 4 の問題を修正するために使用されます。
次に、プロジェクトにいくつかの変更を加えます。
- Glitch で「Fav Kitties」プロジェクトを開きます。
- ソースを表示するには、[View Source] を押します。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
- [ターミナル] をクリックします（注: ターミナル ボタンが表示されない場合は、[全画面表示] オプションをご利用ください）。
作成された CSS を圧縮するには、optimize-css-assets-webpack-plugin を使用します。
- Glitch コンソールで
npm install --save-dev optimize-css-assets-webpack-pluginを実行します。 refreshを実行して、変更が Glitch エディタと同期されるようにします。
次に Glitch エディタに戻り、webpack.config.js ファイルを開いて次のように変更を加えます。
ファイルの先頭でモジュールを読み込みます。
js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
次に、プラグインのインスタンスを plugins 配列に渡します。
js
plugins: [
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename: "[name].css"}),
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin({})
]
変更を行うと、プロジェクトの再ビルドがトリガーされます。
生成される webpack.config.js は次のようになります。
次に、パフォーマンス ツールを使用して、この最適化の結果を確認します。
確認
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。
前の手順で迷った場合は、 こちらから、最適化された できます。
ファイルのサイズと内容を調べるには:
- Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [ネットワーク] タブをクリックします。
- [CSS] フィルタをクリックします。
- [キャッシュを無効にする] チェックボックスがまだオンになっていない場合は、オンにします。
- アプリを再読み込みします。
これらのファイルを調べて、新しいバージョンに空白が含まれていないことを確認できます。どちらのファイルもサイズが大幅に小さくなっています。特に、animate.css は最大 26% 削減され、最大 20 KB 削減されました。
最後に:
- 測定ページを開きます。
- 最適化されたサイトの URL を入力します。
- [レポートを表示] をクリックします。
- [パフォーマンス] をクリックして、[最適化] セクションを見つけます。
レポートに「CSS を最小化」が表示されない「Opportunity」を「Passed Audits」に移動されました。セクション:
CSS ファイルはレンダリングをブロックするリソースであるため、サイズの大きな CSS ファイルを使用するサイトで圧縮を適用すると、First Contentful Paint などの指標が改善されます。
次のステップとリソース
このガイドでは、webpack による CSS 圧縮について説明しましたが、Gulp の gulp-clean-css や、 Grunt 用の grunt-contrib-cssmin
他の形式のファイルにも圧縮を適用できます。JS を圧縮するためのツールや、圧縮などの補完的な手法について詳しくは、ネットワーク ペイロードの圧縮と圧縮に関するガイドをご覧ください。