はじめに
日々CSSを書いている中で、こんな疑問がふと頭をよぎりました。
「このCSS、重くないかな？」
「positionっていっぱい使うと処理重いの？」
「描画が重くなるプロパティってどれ？」
今回は、CSSの処理の流れと、パフォーマンスに影響するプロパティの違いについて、自分なりに調べてまとめてみました。
CSSの処理について
ブラウザはHTMLとCSSを読み込んで、以下のような流れで画面を描画しています。
1.パース（解析）
- HTML → DOMツリー
- CSS → CSSOMツリー
→ 要素やスタイルの構造を「木構造」で理解。
2.スタイル計算（Style Calculation）
- どのCSSがどの要素に適用されるかを決定。
- セレクタの競合、継承、カスケードもここで処理。
3.レイアウト（Layout / Reflow）
- 要素のサイズや位置を計算。
- position, width, margin, display などが関係。
4.ペイント（Paint）
- 色・影・枠線などをピクセルに変換。
-
background,border,box-shadowなどが関係。
5.コンポジット（Compositing）
- 複数レイヤーを合成して、最終的に画面に表示。
どんなCSSが「軽い」？どんなCSSが「重い」？
処理のステップごとに、影響のあるプロパティを分類してみました。
| ステップ | 軽いプロパティ | 重いプロパティ |
|---|---|---|
| スタイル計算 |
color, font-size, visibility
|
- |
| レイアウト再計算 | - |
width, height, position, display
|
| ペイント（描画） | - |
box-shadow, border-radius
|
| 合成処理 |
transform, opacity（アニメ向き） |
filter, backdrop-filter, will-change
|
よくある「重くなる原因」まとめ
1.アニメーションで使うと重くなるプロパティ
/* 悪い例：毎フレームレイアウト再計算 */
.element {
top: 100px;
left: 0;
transition: top 0.3s ease;
}
/* 良い例：GPU処理で高速 */
.element {
transform: translateY(100px);
transition: transform 0.3s ease;
}
2.position: fixed の多用
- 各要素が別レイヤーになる
- 合成処理が増えてメモリや描画コストが増大
使い方に注意したいプロパティ一覧
| プロパティ | 理由 |
|---|---|
filter: blur() |
GPU負荷が高い、スクロール時にカクつく |
position: fixed |
合成レイヤー増加、重くなる |
box-shadow |
ペイントコストが高くなる（特に大きな影） |
will-change |
多用すると逆にパフォーマンス悪化する |
さいごに
CSSは「見た目を整えるだけの言語」ではなく、ブラウザの描画処理に密接に関わるパフォーマンス要因でもあります。
- どのプロパティが「レイアウト」や「ペイント」に影響するのか？
- アニメーションで何を使うと最適か？
なぜそれが重くなるのか？
このあたりを少し意識するだけでも、見た目とパフォーマンスを両立したCSSが書けるようになると思います！