CSSだけで爆速化！content-visibility: auto;によるオフスクリーン遅延レンダリングの実装法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、「大量のDOM要素を持つページでも、パフォーマンスを落とさず爆速表示を実現するCSSテクニック」をご紹介します。

それが、CSSプロパティ content-visibility: auto; の活用です。

このプロパティを使うことで、ビューポート外（＝オフスクリーン）にある要素のレンダリングを遅延させることが可能になり、初回描画のスピードが大幅に向上します。

特にLP（ランディングページ）や商品リスト、記事一覧などでDOMノードが多いページに効果的です。

content-visibilityとは？

content-visibility は、要素の内容がブラウザのレイアウト・ペイント・レンダリングに与える影響を制御できるCSSプロパティです。

その中でも auto は、その要素がビューポート内に入ったときだけ描画処理を行う、いわば「CSSによる遅延レンダリング」のような効果を持ちます。

主な利点

基本的な使い方

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

ここでのポイントは contain-intrinsic-size。
これを指定しないと、遅延レンダリング中の要素が「高さ0px」に見えるため、スクロール位置が崩れてしまうのです。

実際の効果：検証結果

Google ChromeのDevToolsで検証すると、content-visibility: auto; を使った要素は スクロールされるまでDOMにあってもレイアウト処理されないことが確認できます。

特に以下の指標に効果があります。

注意点と制限

便利な content-visibility: auto; ですが、使い方によっては見えない問題も起こります。

注意点

対応ブラウザとフォールバック

content-visibility は、最新のモダンブラウザでは広く対応済みです。

フォールバック指定

 @supports (content-visibility: auto) { .content-block { content-visibility: auto; contain-intrinsic-size: 300px; } } 

Firefoxでもレイアウト崩れしないよう、フォールバックで要素の高さを確保しておきましょう。

まとめ

content-visibility: auto; を使えば、Webページの初回表示・スクロール体験が劇的に軽くなるというメリットがあります。

フロントエンドのパフォーマンスを一歩進めたい方、ぜひ content-visibility: auto; を導入してみてください！

 

satokotadesignキャンペーン実施中！