content-visibility: レンダリング パフォーマンスを向上させる新しい CSS プロパティ

画面外コンテンツのレンダリングをスキップすることで、初期読み込み時間を短縮します。

Una Kravets

Jeremy Wagner

Vladimir Levin

「 content-visibility プロパティ（Chromium 85 でリリース）は、最も影響力のある新しい CSS プロパティを実装してページ読み込みのパフォーマンスを向上させます。content-visibility は、 レイアウトやペイントを含む要素のレンダリング処理をスキップするユーザー エージェントを できます。レンダリングがスキップされるため、画像の大部分が コンテンツが画面に表示されていない場合、content-visibility プロパティを使用すると、 初回ユーザーの読み込み時間が大幅に短縮されますまた、Chronicle SOAR サーバーから 画面上のコンテンツを表示します。便利ですね。

ブラウザ サポート

content-visibility は、CSS Containment内のプリミティブに依存します 仕様。content-visibility は 現時点では Chromium 85 でサポートされます（ プロトタイピング" Firefox など）、コンテナの仕様は最新の ブラウザ。

CSS の制限

CSS コンテインメントの主な目標は、レンダリングを有効にすることです。 予測可能な分離により、ウェブ コンテンツのパフォーマンスが向上します。 DOM サブツリーを削除します。

基本的に、デベロッパーはページのどの部分をカプセル化しているかをブラウザに伝えることができます。 コンテンツの推論を可能にし、ブラウザがコンテンツを サブツリーの外で状態を考慮する必要があります。どのコンテンツ ビット（サブツリー）に分離されたコンテンツが含まれているかを把握することで、ブラウザはページ レンダリングの最適化に関する決定を行うことができます。

CSS には 4 つのタイプがある 封じ込め、 それぞれに contain CSS プロパティの潜在的な値があり、組み合わせることができます。 次の値をスペースで区切ったリストで返します。

• size: 要素にサイズを含めると、要素のボックスが確実に その子孫を調べる必要はありませんつまり 必要なサイズが子孫のサイズだけであれば、 要素です。
• layout: レイアウトの包含とは、子孫がレイアウトに 外部レイアウトと区別できますそのため 事前トレーニング済みでない 他のボックスをレイアウトするだけであれば、子孫のレイアウトも変更できます。
• style: スタイルの制限により、子孫だけでなく、要素の外部にも影響する可能性があるプロパティ（カウンタなど）が要素から漏れないようにします。この 子孫に対するスタイル計算をスキップできます。 他の要素のスタイルを計算します。
• paint: ペイントの制限により、包含ボックスの子孫が境界外に表示されなくなります。要素からは見えませんが、 要素が画面外にあるか表示されない場合、その子孫は 表示されません。これにより、デコーダのペイントを 要素が画面外の場合は子孫となります。

content-visibility でのレンダリング処理をスキップする

使用するブラウザはバージョン アップデータで、 最適化は、適切なセットが指定されている場合にのみ有効になります。Google Chat では 値をいろいろ試して、 ベスト、または content-visibility という別の CSS プロパティを使用して、必要な 自動的に封じ込められます。content-visibility を使用すると、最大限の価値を 最小限の手間でブラウザが実現できるパフォーマンスの向上 開発者です。

content-visibility プロパティで指定できる値はいくつかありますが、パフォーマンスをすぐに改善できるのは auto です。次の要素を持つ要素: content-visibility: auto が layout、style、paint の封じ込めを獲得。条件 要素が画面外にある（ユーザーとの関連性がないなど、関連性が低い） サブツリーにフォーカスまたは選択がある要素になります）、 size の封じ込めも獲得（停止し、 ペインティング および ヒットテスト 表示されます。

これはどういう意味ですか？つまり、要素が画面外にある場合、その子孫はレンダリングされません。ブラウザは、要素のコンテンツを考慮せずに要素のサイズを決定し、そこで停止します。スタイル設定など、ほとんどのレンダリング処理は、 要素のサブツリーのレイアウトはスキップされます。

要素がビューポートに近づくと、ブラウザは size を追加しなくなります 要素のコンテンツのペイントとヒットテストが開始されます。この を使用すると、レンダリング処理を適切なタイミングで実行できます。

アクセシビリティに関する注意事項

content-visibility: auto の特長の一つは、画面外のコンテンツをドキュメント オブジェクト モデルで引き続き利用できるため、アクセシビリティ ツリーも使用できることです（visibility: hidden とは異なります）。つまり、読み込みを待ったり、レンダリング パフォーマンスを犠牲にしたりすることなく、ページ上でコンテンツを検索して移動できます。

逆に言えば、画面外では、display: none や visibility: hidden などのスタイル機能を持つ landmark 要素もユーザー補助ツリーに表示されます。これは、ビューポートに入るまでブラウザはスタイルをレンダリングしないためです。これらがユーザー補助ツリーに表示され、見づらくなるのを防ぐために、aria-hidden="true" も追加してください。

例: 旅行ブログ

旅行ブログには通常、いくつかの写真と説明的なテキストが含まれる一連の記事が含まれています。これは、一般的なブラウザで 旅行ブログ:

1. ページの一部がネットワークからダウンロードされ、 説明します。
2. ブラウザは、コンテンツがユーザーに表示されるか否かを考慮せずに、ページのすべてのコンテンツにスタイルを設定してレイアウトします。
3. すべてのページとリソースの作成が完了するまで、ブラウザはステップ 1 に戻ります。 ダウンロードされます。

ステップ 2 では、ブラウザがすべてのコンテンツを処理し、変更されている可能性のあるものを探します。新しい要素のスタイルとレイアウトが更新され、 新しい更新の結果としてシフトした可能性のある要素を表します。レンダリングしています 説明します。これには時間がかかります。

旅行ブログの例。をご覧ください。

では、各インスタンスに content-visibility: auto を設定するとどうなるかについて考えてみましょう。 個別の記事も掲載しています。基本的なループは同じです。つまり、 ページのチャンクをダウンロードしてレンダリングします。ただし、手順 2 で実行される作業量が異なります。

コンテンツ可視化機能では、目にするすべてのコンテンツのスタイルとレイアウトが ユーザーに表示されます（画面上に表示されている）。ただし、画面外に完全に表示されるストーリーを処理する場合、ブラウザはレンダリング作業をスキップし、要素ボックス自体のスタイルとレイアウトのみを行います。

このページの読み込みのパフォーマンスは、画面上に全画面表示された場合とほぼ同じになります。 空のボックスが表示されます。この方法では レンダリング コストの削減見込みは 50% 以上。 読み込み中。この例では、レンダリング時間が 232 ミリ秒から レンダリング時間は 30 ミリ秒です。パフォーマンスが 7 倍向上しました。

これらのメリットを享受するためには、どのような作業が必要ですか。まず コンテンツをセクションに分割します。

をご覧ください。

次に、各セクションに以下のスタイルルールを適用します。

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

contain-intrinsic-size で要素の自然なサイズを指定する

content-visibility の潜在的なメリットを実現するには、ブラウザがサイズ制限を適用して、コンテンツのレンダリング結果が要素のサイズに影響しないようにする必要があります。つまり、この要素は 空であるかのようにレイアウトされます。要素に高さが指定されていない場合 通常のブロック レイアウトの場合、高さは 0 になります。

この方法は、スクロールバーのサイズが移動し、 各ストーリーの高さがゼロ以外であることに 依存しているからです

幸いなことに、CSS には contain-intrinsic-size という別のプロパティも用意されています。 要素の自然サイズを効果的に指定します。 サイズ制限の影響を受けます。この例では、次のように 1000px に設定します。 セクションの高さと幅の推定値。

つまり、「intrinsic-size」の子が 1 つあるかのようにレイアウトされます。 サイズ調整されていない div が広告スペースを占めるようにします。 contain-intrinsic-size は、レンダリングされたコンテンツの代わりにプレースホルダ サイズとして機能します。

Chromium 98 以降では、新しい auto があります contain-intrinsic-size のキーワードです。指定した場合、ブラウザは 最後にレンダリングされたサイズがある場合は、それをデベロッパー提供のプレースホルダの代わりに使用します。 指定します。たとえば、contain-intrinsic-size: auto 300px を指定した場合、 各ディメンションの 300px 固有のサイズ設定から始まりますが、 要素のコンテンツがレンダリングされるときに、レンダリングされた固有のサイズは保持されます。 その後のレンダリング サイズの変更も保存されます。具体的には content-visibility: auto が適用された要素をスクロールしてから、後ろにスクロールする 自動的に最適な幅と高さが維持され、 調整しますこの機能は特に、無限スクロールのユーザーにとって有用です。 これにより、サイズの見積もりが時間の経過とともに自動的に改善され、 表示されます

content-visibility: hidden でコンテンツを非表示にしています

コンテンツの有無にかかわらず、コンテンツをレンダリングしないでおくには キャッシュされたレンダリング状態のメリットを活用できます。次のように入力します。 content-visibility: hidden。

content-visibility: hidden プロパティを使用すると、 content-visibility: auto と同様に、レンダリングされていないコンテンツとキャッシュに保存されたレンダリング状態 オフにします。ただし、auto とは異なり、 レンダリングされます。

これにより、制御がしやすくなり、要素のコンテンツを非表示にして、 簡単に再表示できます。

これを、要素のコンテンツを非表示にする他の一般的な方法と比較します。

• display: none: 要素を非表示にし、レンダリング状態を破棄します。この 要素を再表示すると、新しい要素を 同じ内容です。
• visibility: hidden: 要素を非表示にし、レンダリング状態を維持します。この ドキュメント（およびサブツリー）から要素が削除されるわけではない ページ上の幾何学的なスペースを占めるため クリックできますこれは、 また、レンダリング状態は、非表示であっても必要に応じて更新されます。

一方、content-visibility: hidden は要素を非表示にしますが、 レンダリング状態を維持できます。したがって、変更が必要な場合には、 要素が再度表示されたときのみ発生します（つまり、 content-visibility: hidden プロパティは削除されます）。

content-visibility: hidden の最適なユースケースとしては、 高度な仮想スクローラー、レイアウトの測定などがありますまた シングルページアプリケーション（SPA）の非アクティブなアプリビューは、content-visibility: hidden を適用して DOM に残しておき、表示を防ぎながらキャッシュに保存された状態を維持できます。これにより、ビューが再びアクティブになったときに、ビューをすばやくレンダリングできます。

Interaction to Next Paint（INP）への影響

INP は、ページがユーザー入力に対して確実に応答するかどうかを評価する指標です。レンダリング処理など、メインスレッドで実行される処理の量が多すぎると、応答性に影響する可能性があります。

ページのレンダリング作業を減らすことができる場合は、メインスレッドがユーザー入力により迅速に応答できるようにします。これにはレンダリング作業が含まれます。また、必要に応じて content-visiblity CSS プロパティを使用することで、レンダリング作業を削減できます（特に起動時にほとんどのレンダリング作業とレイアウト作業が完了しているとき）。

レンダリング作業を減らすと、INP に直接影響します。画面外要素のレイアウトとレンダリングを遅らせるために content-visibility プロパティを適切に使用しているページをユーザーが操作しようとした場合、ユーザーに表示される重要な処理にメインスレッドが応答する機会が与えられます。これにより、状況によってはページの INP が改善される場合があります。

まとめ

content-visibility と CSS Containment Spec により優れたパフォーマンスを実現 CSS ファイルに直接反映されていますこれらの詳細については プロパティについては、以下をご覧ください。

• CSS の封じ込め仕様
• CSS の MDN ドキュメント 封じ込め
• CSSWG の下書き