<image> の loading="lazy" で画面がスクロールして表示が必要になるまで画像の読込を遅らせるのと同様に、任意のコンテンツに auto を指定することで、スクロールして描画が必要になるまでコンテンツの中身(子要素)のレンダリングを遅らせ、画面描画の体感速度を向上させます。

ブラウザがスクロールしてレンダリングが始まるまでは子要素を評価しないため、中身の高さや幅も計算されません。height や width で固定的に指定することもできますが、contain-intrinsic-size を用いて暫定的な高さや幅を指定しておくこともできます。暫定値はおおよその値でよく、子要素のレンダリング時に補正されます。

article {
  border: 1px solid #999;
  content-visibility: auto;
  contain-intrinsic-size: 0 50px;
}

<article>
  <p>下記の画像はスクロールしたので表示されていますが、スクロールされる前は表示されていませんでした。</p>
  <img src="image/sample.png" alt="Sample Image">
</article>

下記の画像はスクロールしたので表示されていますが、スクロールされる前は表示されていませんでした。

• contain-intrinsic-size

• https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility
• https://w3c.github.io/csswg-drafts/css-contain/#content-visibility