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

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

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

<ph type="x-smartling-placeholder">

</ph>

ブラウザ サポート

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" も追加してください。

例: 旅行ブログ

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

旅行ブログには通常、いくつかの写真と記事が掲載され、 記述できます。これは、一般的なブラウザで 旅行ブログ:

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

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

<ph type="x-smartling-placeholder">

</ph> 旅行ブログの例。

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

コンテンツ表示を使用すると、他のコンテンツと同様に、 ユーザーに表示されます（画面上に表示されている）。ただし、 ブラウザはレンダリング処理をスキップし、 要素ボックス自体のスタイルとレイアウトのみを設定します。

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

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

<ph type="x-smartling-placeholder">

</ph>

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

.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 を適用し、表示されないようにしましたが、 キャッシュに保存された状態を維持します。これにより、ビューが再びアクティブになったときに、ビューをすばやくレンダリングできます。

Interaction to Next Paint（INP）への影響

INP は、ページがユーザー入力に対して確実に応答するかどうかを評価する指標です。レンダリング処理など、メインスレッドで過剰な処理量が発生すると、応答性が低下することがあります。

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

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

まとめ

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

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