無限スクロール、複雑なダッシュボード、密度の高い記事など、コンテンツが豊富なウェブページでは、初期レンダリングが遅くなり、インタラクションが遅くなることがあります。最新のウェブ テクノロジーを使用すると、すぐには表示されないコンテンツのレンダリング ワークロードを遅らせることができるため、ユーザー補助やユーザーの期待を損なうことなく、パフォーマンスを大幅に向上させることができます。
レンダリングを最適化するには、CSS の content-visibility プロパティと HTML の hidden="until-found" 属性を使用します。どちらもパフォーマンスの向上に役立ちますが、ユースケースは異なります。
ツールの使い分け
| シナリオ / 例 | 機能が適用されました | パフォーマンス上のメリット |
|---|---|---|
| 1. スクロールしなければ見えない範囲（初期読み込みを遅らせる） | content-visibility: auto |
ブラウザは、コンテナがスクロールしてビューに近づくまで、レイアウト / ペイントのワークロードを自動的にオフロードし、標準のページ読み込み速度をスムーズに維持します。 |
| 2. 状態の切り替え（ビューの高速切り替え） | content-visibility: hidden |
非表示の div のレイアウト計算をスキップしますが、スタイル コンテインメントの状態を保持するため、構造的なシフトなしで瞬時に切り替えることができます（display: none よりも優れています）。 |
| 3. 検索可能かつ遅延（折りたたみ可能な開示） | hidden="until-found" |
レンダリング パフォーマンスとページ内検索のアクセシビリティを組み合わせる方法について詳しくは、隠しコンテンツの検索をご覧ください。 |
content-visibility: auto の実装方法
画面外のコンテンツを選択する
必須: content-visibility: auto を受け取る要素を慎重に特定する必要があります。
- 推奨: 最初のスクロールより下にある、自己完結型の大きなレイアウト ブロック（無限フィードのカードアイテム、末尾のコメント、下部に重点を置いたレイアウト セクションなど）をターゲットにします。
- このプロパティは、最初のスクロールせずに見える範囲のビューポート内の要素には適用しないでください。これを行うと、ブラウザはレンダリング前に可視性の境界を評価せざるを得なくなり、逆説的に重要なページ読み込みパフォーマンスが遅延します。
- 推奨事項: 内部 DOM 構造が深い、または複雑な要素をターゲットにして、レンダリング コストの削減を最大化します。
実装の手順
- 必須: 最初の読み込み時に画面外にあることが確認されている重いセクションを特定します。
- 必須: これらの画面外の要素それぞれに
content-visibility: autoを適用します。 - 必須: 各要素で
contain-intrinsic-sizeを使用して、推定レイアウト構造サイズを指定します。
contain-intrinsic-size のご利用方法
必須: content-visibility: auto は contain-intrinsic-size とペアに設定する必要があります。設定しないと、画面外にある要素の高さがブラウザによって 0 ピクセルに縮小され、ユーザーがスクロールしたときにレイアウトが大きくずれたり、スクロールバーがジャンプしたりします。
contain-intrinsic-size CSS ショートハンド プロパティは、プレースホルダのサイズとして機能します。auto キーワードを使用すると、要素が最終的にレンダリングされたときに、ブラウザが正確なサイズを「記憶」し、要素が再び画面外に移動したときに、プレースホルダではなく、計算されたサイズを使用できます。
コード例
/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
/* MANDATORY: Skips rendering calculations when off-screen */
content-visibility: auto;
/* Mandatory: Provide an estimated size to prevent layouts shifts.
- 'auto' is optional and enables the browser to remember the actual size
once rendered. It must be paired with a <length> value to be used for
the first render.
- 'none' tells the browser not to apply any intrinsic width to this element.
It can be used for either the height or the width value.
- '150px' is the estimated height of this element. This can be any valid
CSS <length> value.
*/
contain-intrinsic-size: auto none auto 150px;
}
content-visibility: hidden の実装方法
- 重いセクションを特定する: 最初に非表示になっているレイアウト ブロック（大きなデータテーブルの余分な行など）を特定します。
- CSS を適用する: 要素に
content-visibility: hiddenを追加します。 - 要素を表示する: 要素を表示する必要がある場合は、
content-visibilityプロパティをvisibleまたはautoに変更します。
コード例
.cached-view {
/* Hides content but caches rendering state */
content-visibility: hidden;
}
.cached-view.is-active {
content-visibility: visible;
}
content-visibility: hidden は、要素とその子をユーザー補助ツリーとページ内検索から除外するため、コンテンツを非表示にしながら検出可能にする必要がある場合は、使用しないでください。非表示のコンテンツをネイティブのページ内検索で検索できるようにする必要がある場合は、非表示のコンテンツを検索するで説明されているように、hidden="until-found" を使用します。
ベスト プラクティス
- 推奨:
contain-intrinsic-sizeをcontent-visibility: autoと併用します。これを行わないと、スクロール時に高さの再計算が強制され、ビューポート レイアウトのジャンプや視覚的な不具合が発生します。 - 最初のスクロール ビューポート内の要素に
content-visibility: autoを適用しないでください。重要なページのレンダリングが遅れるためです。 - 必須のユーザー補助機能の検証:
content-visibility: autoを適用する場合は、キーボードで順次アクセスできることを確認する必要があります。特定の支援技術の構成では、content-visibility: autoを使用する画面外のノードは、フォーカスが強制的に移動されるまで、ユーザー補助ツリーまたは順次ナビゲーション ルートから除外されることがあります。キーボードのみを使用して、画面外の境界を越えるリニア ナビゲーションをテストします。
代替戦略
content-visibility 代替
content-visibility がサポートされていない場合、ブラウザによって無視されます。ほとんどの場合、content-visibility: auto にフォールバックは必要ありませんが、フォールバックがないとパフォーマンスの向上が失われます。サポートされていないブラウザでは、content-visibility: hidden 要素が完全に表示されたままになります。機能検出を使用してフォールバックを実装する。
/* Default for everyone */
.inactive {
display: none;
}
/* Modern Browsers only */
@supports (content-visibility: hidden) {
.inactive {
display: block; /* Turn the layout box back on */
content-visibility: hidden;
}
}