Newly available Safari 26以降が必要。段階的強化として導入するのが安全。
スクロール Newly available

content-visibility

content-visibility: auto を指定すると、ビューポート外の要素のレンダリングをブラウザが自動的にスキップし、初期表示を高速化できる。長いリストやフィード型UIでの描画パフォーマンスが大幅に改善する。contain-intrinsic-size と組み合わせてスクロールバーの安定性を保つ。

パフォーマンスレンダリング

概要

content-visibility: auto を指定すると、ビューポート外の要素のレンダリングをブラウザが自動的にスキップし、初期表示を高速化できる。長いリストやフィード型UIでの描画パフォーマンスが大幅に改善する。contain-intrinsic-size と組み合わせてスクロールバーの安定性を保つ。

対応ブラウザ

デスクトップ

Chrome 108+
Edge 108+
Safari 26+
Firefox 130+

モバイル

Chrome Android 108+
Safari iOS 26+
Firefox Android 130+

基本構文

CSS 
.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

実務での使いどころ

  • 長いフィードページ

    ブログ一覧やSNSフィードなど、大量のコンテンツがあるページの初期レンダリングを高速化する。

  • ヘビーなセクション

    画像やグラフを含む重いセクションを画面外のうちはレンダリングスキップし、スクロール時に描画する。

注意点

  • contain-intrinsic-size を適切に設定しないと、スクロールバーの長さが不安定になる。
  • ページ内検索（Ctrl+F）で content-visibility: auto の要素内のテキストが見つからない場合がある（ブラウザにより異なる）。

アクセシビリティ

  • content-visibility: hidden はスクリーンリーダーからもコンテンツを隠すため、display: none と同様の配慮が必要。

参考リンク