content-visiblityのポイント
content-visibilityは、ページの初回描画パフォーマンスを大幅に改善できる超強力なCSSプロパティです。特に長いページやSPA、仮想スクロールUIなどでは絶大な効果を発揮します。
-
content-visibility: autoを指定すると、非表示領域の描画をスキップできる - レンダリング負荷が大幅に下がる（特に初回表示時）
- 2025年現在、主要ブラウザ全対応（IE除く）
-
contain-intrinsic-sizeとセットで使うのが必須
そもそも何をしてくれるのか
通常、ブラウザは画面に表示されていないDOMでも、スタイル・レイアウト・描画処理を行います。
この無駄なオーバーヘッドを防ぐのがcontent-visibilityです。
基本的には以下のように使用します。
.card {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
これにより、その要素がビューポート内に入るまでは描画処理がスキップされます。
仕組みのイメージ
| 通常のCSS処理 | content-visibility: auto |
|---|---|
| レイアウト → ペイント | ビューポート外 → スキップ |
| DOMが多いと重くなる | 必要になるまで計算しない |
| JS最適化が必要になる | CSSだけで高速化可能 |
contain-intrinsic-sizeとは？
非表示状態でもレイアウト用に「仮の高さ」を確保するためのプロパティ。
.item {
content-visibility: auto;
contain-intrinsic-size: 300px 200px; /* 横300px・縦200px */
}
これがないとコンテンツレイアウトシフト（CLS。表示時にカクッと動く）を起こすので、セットで使うのが鉄則です。
注意点
- content-visibility はアクセシビリティ的には非表示ではない（スクリーンリーダーには読まれる）
- SEO対策では非表示扱いされない（Googleは描画しない要素も見る）
- JavaScriptによるDOM取得（getBoundingClientRectなど）は注意（表示されてないとゼロになる）
ベンチマーク（参考）
Chrome DevToolsで確認したところ、約2000個のDOMを描画するHTMLファイルにて
| 設定 | 初回描画速度 | LCP |
|---|---|---|
| 通常 | 5,531ms | 0.06s |
| content-visibility: auto | 7,264ms | 0.10s |
初回描画速度で1.7秒程度の改善、LCPは40%高速化することがわかりました。
対応ブラウザ（2025年8月現在）
| ブラウザ | 対応状況 |
|---|---|
| Chrome 85+ | ✅ |
| Firefox 117+ | ✅ |
| Safari 17+ | ✅ |
| Edge 85+ | ✅ |
| IE11 | ❌ |
広く流通しているブラウザでは基本的に対応済みで、よっぽどアップデートをさぼってない限りは大丈夫でしょう。
まとめ
content-visibilityは、重たいDOMを扱うときのCSSパフォーマンス最適化の切り札です。
特にSPA・長文・仮想スクロール系では必須ともいえる存在。
迷ったらまず、
.content-block {
content-visibility: auto;
contain-intrinsic-size: 400px;
}
このセットで導入して、パフォーマンス改善を体感してみてください！