はじめに

日々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が書けるようになると思います！

参考