CSS 最適化によるパフォーマンス改善

Minify 化

Minify 化とは、処理に必要のないコメントや空白、改行を削除することでデータ量の削減を行うことです。Minify 化するには CMS のプラグイン、オンラインサービス、プログラムのライブラリやモジュールなどがあります。以下は Minify 化を行った例です。

/* Minify 化前 */
.hoge {
    margin: 10px 0 10px 0;
    padding: 15px 15px;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    /* border-radius: 4px; */
}

/* Minify 化後 */
.hoge{margin:10px 0;padding:15px;background-color:#FFF;border:1px solid #E2E2E2}

使われていないルールセットの削除

CSS が適切にメンテナンスされていないと、使われていない古いルールセットが残り続けている場合があります。不要なルールセットは、ブラウザに不要な計算をさせるため、パフォーマンスにも悪影響を与えます。そのため、どのページでも使われなくなった古いルールセットは削除します。

使われていないルールセットを手動で調べるのは大変なので、UnCSS などのモジュールを利用すると良いでしょう。

ただし、どのページでも使われていないルールセットであっても削除できないパターンがあります。将来的に使う場合、Javascript などのプログラムで使う場合、リスト化している場合などがあります。

.width10px { width: 10px; }
.width20px { width: 20px; }
.width30px { width: 30px; }
.width40px { width: 40px; }
.width50px { width: 50px; }

上記の場合では、汎用性を持たせるためにリスト化しているので、削除してしまうとバグの原因になります。

重複しているルールセットの削除

重複しているルールセットを削除する作業は、使われていないルールセットの削除よりも難しい作業で、リスクを伴います。最終的に適用されるルールセットがわからないと、必要なルールセットまで削除する可能性があります。以下は、セレクタ内での重複しているパターンと、別のクラスで上書きしているパターンです。

/* セレクタ内での重複 */
.hoge {
    width: 100px;
    ... (中略) ...
    width: 200px;
}

/* .foo を .bar で上書き */
.foo { width: 10px; }
.bar { width: 20px; }

上記は簡略化した例ですが、実際はもっと複雑な状態になっています。複雑化した CSS をクリーンな状態に戻すのは、絡まりあった糸を解くようなもので、簡単な作業ではありません。

安易な解決策として !important を使った優先度の変更があります。しかし、この方法は CSS をより複雑化させるためにアンチパターン、または最後の手段として知られています。

最終的に適用されるスタイルは "詳細度" を算出することによって決まります。詳細度は、a, b, c の 3 つの数値の大きさによって決まります。以下はセレクタを詳細度の小さい順に並べています。

1. *a=0, b=0, c=0
2. lia=0, b=0, c=1
3. ul lia=0, b=0, c=2
4. ul ol+lia=0, b=0, c=3
5. h1 + *[rel=up]a=0, b=1, c=1
6. ul ol li.reda=0, b=1, c=3
7. li.red.levela=0, b=2, c=1
8. #foobara=1, b=0, c=0
9. #foobar:not(li)a=1, b=0, c=1

a, b, c は桁数のようなもので、a > b > c の関係になります。詳細度が同じ場合は、後から宣言されたルールセットが優先されます。

重複しているルールセットの削除は、詳細度を考慮して行います。ただし、手動で行うのは大変なので CSSCSS などのモジュールを利用すると効率的です。

ショートハンドプロパティ

CSS には複数のプロパティをまとめて指定できる "ショートハンドプロパティ" という方法があります。ショートハンドで表現できるプロパティの種類が多いため本ページでは割愛しますが、ショートハンドを利用することでファイルサイズを削減できます。以下はショートハンドプロパティで表現した例になります。

/* 最適化前 */
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

/* 最適化後 */
background: #000 url(images/bg.gif) no-repeat left top;

ショートハンドプロパティは複数のプロパティを指定できますが、省略したプロパティには初期値が設定されます。そのため、設定済みのプロパティを初期値で上書きするため、使用には注意が必要です。

クリーンな CSS に変換するモジュール

CSS ファイルサイズを最小にしたい場合、変換するエンジンがあります。例えば、以下は "cssnano" というモジュールによって CSS ファイルを圧縮した例になります。

/* 最適化前 */
/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* remove duplicated properties */
    font-weight: 400;
    font-weight: 400;
    /* reduce position values */
    background-position: bottom right;
    /* replace initial values */
    min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";

/* 最適化後 */
@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;min-width:0}

上記の例では、ショートハンドプロパティへの置き換え、重複したプロパティの削除、文字列の変換など、様々な最適化が行われています。このように CSS をクリーンな状態にするモジュールはいくつもあります。以下のリンクは、その一例になります。

Calculate Style

Calcuate Style では、ドキュメントから構成された DOM ツリーの要素に対して、適用される CSS プロパティを計算します。計算は CSSOM ツリーを参照し、マッチングするセレクタが存在するか総当たりで行われます。

DOM ツリーのすべての要素に対して、総当たりでマッチング処理を行うため、計算効率は良いとは言えません。例えば、要素が 100 個のドキュメントに対して、ルールセットが 50 個あった場合、5,000 回のマッチング処理が行われます。

マッチング処理は高速に行われますが、回数が多くなるとボトルネックになります。マッチング処理を高速化するためには、以下の対処を行いマッチング回数を減らすことが有効です。

• DOM を必要以上に深くしないこと
• CSS ルールセットを最小限にすること
• 子孫、間接、全称セレクタを多用しないこと

ブラウザのリフローを最小限にする | Google Developers

Layout

Calcuate Style が完了すると、Layout の計算を行います。Layout はレンダリングエンジンによって "Reflow" とも呼ばれます。WebKit 系のレンダリングエンジンでは Layout と呼び、Gecko 系のレンダリングエンジンでは Reflow と呼びます。

レイアウトとは、ブラウザがレンダリングするために要素の位置関係などを再計算するための処理のことです。レイアウトが発生する原因は、プロパティ値を相対値で指定、Javascript の使用、DOM ツリーの変更、ウィンドウサイズの変更などがあります。

レイアウトが発生した場合、その分だけ描画するまでの時間が長くなります。そのため、レイアウトは可能な限り発生させないことがパフォーマンスの改善につながります。以下は、Firefox でリフローが行われる様子を可視化したデモ動画です。

レイアウトを最小限に抑えるための方法は、前述した Calculate Style と同様になります。