【CSS】画面外のレンダリングをスキップして表示を速くする content-visibility

どうも、くまだです。

今回は CSS の content-visibilityというプロパティの話。

content-visibility とは？

CSS の content-visibilityは、画面外のコンテンツのレンダリングをスキップしてくれるプロパティです。

ブラウザって、ページを読み込むとき「今は画面に見えてないセクションも全部描画する」という動きをデフォルトでします。ページが長くなればなるほど、この最初の描画コストが積み上がってしまう。

content-visibility: auto を使うと、今見えていない部分の描画を後回しにできる。スクロールして近づいたタイミングで描画が始まるので、最初の表示が速くなります。

コードは以下になります。

.section {
  content-visibility: auto;
}

auto にすると、画面外にある .section を丸ごとスキップしてくれます。画面内に入ってきたタイミングで描画が走ります。

ちなみに、content-visibility: autoだけ使うと、描画をスキップした分「高さが0扱い」になることがあります。するとスクロールバーの位置が変わったり、スクロールがガクっと飛んだりする。

それを防ぐのが contain-intrinsic-size です。

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

これは「描画する前のざっくりした高さの目安」をブラウザに教えてあげる指定。auto 500pxなら「実際に描画した後はキャッシュした値を使って、まだなら500pxとして扱って」という意味になります。

ぴったりじゃなくていいので、そのセクションのだいたいの高さを指定しておく。

ここまで読んでくださりありがとうございました。