【入門編】content-visibilityによるインライン要素のレンダリング最適化 – HTML実践ガイド

画面外の要素は「描画しない」という贅沢。`content-visibility`でWebサイトを爆速にする方法

こんにちは！フロントエンド開発の世界へようこそ。

まるで、まだお客さんが誰もいない開店前の店内で、隅から隅までピカピカに掃除し続けているようなもの。これでは、肝心のお客さんが来たときに店員さんがヘトヘトになってしまいますよね。

今日は、そんな「無駄な頑張り」をブラウザにやめてもらう魔法のCSS、`content-visibility`についてお話しします。

—

ブラウザはとても真面目です。HTMLファイルを開くと、たとえ画面の一番下にある小さな``タグ一つであっても、「よし、この要素の形は？色は？周りの要素とのバランスは？」と、画面に表示する前から計算を始めてしまいます。

ページが短いなら問題ありませんが、最近のWebサイトは長いですよね。画面外にある大量のテキストやリンクまで全部計算していたら、当然、表示スピードは落ちてしまいます。

そこで登場するのが `content-visibility: auto;` です。

—

このCSSを使うと、ブラウザにこう伝えることができます。

> 「画面に見えていない場所にある要素は、描画の計算をしなくていいよ。スクロールして近づいてきたら、その時に計算を始めて！」

これだけで、ブラウザの負荷が劇的に軽くなります。特にお買い物サイトの長い商品一覧や、ブログ記事の長いコメント欄など、要素が多い場所にはうってつけです。

使い方は驚くほどシンプルです。最適化したい要素のCSSに、たった一行追加するだけ。

/ 例：記事内の長いテキストブロックや、重いリスト要素に適用 /
.optimization-target {
/ これだけで、画面外なら描画の計算をストップしてくれます /
content-visibility: auto;

/ 重要！これがないと、高さが0になってスクロールバーがバグります /
contain-intrinsic-size: 1000px;
}

ここで一つだけ、つまずきポイントがあります。
`content-visibility: auto;` を指定すると、ブラウザは「描画をスキップする」ため、その要素の高さが「0」であると認識してしまいます。

すると、スクロールバーがガタガタと動いたり、ページ全体の長さが変わってしまったりと、ユーザー体験が台無しになることがあります。

そこで `contain-intrinsic-size` の出番です。これは「画面外にある時は、とりあえずこのくらいの高さがあると思っていてね！」という「仮のサイズ（プレースホルダー）」を教える役割をしています。

—

例えば、ブログ記事の中に、ずらりと並んだ「参考文献リスト」や「関連記事」があるとします。これらはすぐには見えない場所にあることが多いですよね。

/ CSSで最適化 /
.long-content-block {
/ 画面外なら計算をスキップ /
content-visibility: auto;

/ ざっくりとした高さを指定（例：リストが並ぶブロックなら500pxくらいかな？と推測） /
contain-intrinsic-size: 500px;
}

—

「じゃあ、すべての要素に `content-visibility: auto;` をつければいいんだ！」と思うかもしれませんが、それは少し待ってください。

「画面外にある、ある程度まとまった大きなかたまり」に使うのが、一番効果的で安全です。

—

Web制作を始めたばかりの頃は、「どうやって機能を追加するか」に目が行きがちです。でも、プロの現場では「どうやってブラウザの負担を減らすか（引き算）」という視点が、Webサイトの品質を大きく左右します。

`content-visibility` は、そんな「賢い手抜き」を教えてくれる心強い味方です。

最初は難しく感じるかもしれませんが、まずは自分のブログや練習サイトの「一番下の方にある重そうなパーツ」に、ぜひ試してみてください。ブラウザが「少し楽になったよ！」と言ってくれるような、軽快な読み込み速度を実感できるはずですよ。

つまずいたり、うまく動かなかったりしても大丈夫。エンジニアの成長は、そんな試行錯誤の積み重ねです。一緒に一歩ずつ、快適なWeb体験を作っていきましょう！