【入門編】 content-visibilityプロパティによるレンダリング抑制 – Webブラウザの仕組み実践ガイド

こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。

Webサイトを作っていて、「なんだか最近、ページが重いな……」「スマホでスクロールするとカクつくんだよな……」と頭を抱えた経験はありませんか？ ページの中に画像やカード型の記事が何十個、何百個と並んでいるようなリッチなサイトほど、この「重さ」との戦いは避けて通れない道です。

今回は、そんなWeb制作のパフォーマンスの悩みを一撃で解決してくれる、現代ブラウザの超強力な秘密兵器`content-visibility`というCSSプロパティについてお話しします。

難しい専門用語はなるべく噛み砕いて、身近な例えを交えながらお伝えしていきますので、どうぞ肩の力を抜いてリラックスして読んでくださいね。

—

1. Webブラウザの「真面目すぎる性格」が生む悲劇

まず、ブラウザが私たちの書いたHTMLやCSSを画面に映し出すとき、裏側でどんなことをしているのか少しだけ覗いてみましょう。

ブラウザくんは、とっても真面目で優秀です。あなたが「よし、このページを公開しよう！」とWebサイトを世に放った瞬間、ブラウザくんは「よし！ ユーザーに見せるために、このページにあるすべてのパーツを今すぐ完璧に準備するぞ！」と意気込みます。

ここで想像してみてください。
例えば、縦にすごく長い通販サイトやブログを思い浮かべてください。画面の最初に見えているのは一番上の「ヘッダー」と「新着記事の数個」だけなのに、ブラウザくんは画面の一番下、ユーザーがスクロールして到達するまでに何分もかかりそうな遥か彼方のパーツまで、一瞬で全部計算し、レイアウトし、描画の準備をしようとします。

……これ、ちょっと働きすぎだと思いませんか？
ユーザーはまだ画面の一番下を見ていないのに、ブラウザくんは汗水垂らして見えない部分の準備まで全力でさせられている。これが、ページが重くなる大きな原因の一つなんです。

—

2. お店の「在庫管理」に例えてみましょう

このブラウザくんの働きすぎを解決してくれるのが、今回主役の`content-visibility`です。

分かりやすくするために、大きなおもちゃ屋さんを想像してください。
このおもちゃ屋さんには、何万点もの商品があります。もし、お店の入り口から一番奥の倉庫の隅っこに至るまで、すべての商品の値札を付け替え、ピカピカに磨き上げ、お店の真ん中に山積みにしたらどうなるでしょうか？
店員さんは疲れ果て、お客さんは身動きが取れなくなってしまいますよね。

賢いお店はどうするか？
そう、「今、お客さんが見ている棚だけを綺麗にして、まだ見えない奥の倉庫にある商品は、段ボール箱に入れたままにしておく（＝必要になるまで何もしない）」んです。

`content-visibility`は、まさにこれと同じことをブラウザに指示するための魔法の呪文です。

• 「今、画面に映っている（ユーザーが見ている）部分だけ、真面目に描画してね」
• 「まだ画面に入っていない、下のほうにあるパーツは、見つかるまでお休みしていていいよ（レンダリングの作業をスキップするよ）」

これをCSSの一行で指示できるのが、`content-visibility: auto;` なのです。

—

3. 実際に書いてみましょう！使い方は驚くほどシンプル

「難しそうなプロパティだな……」なんて身構えなくて大丈夫ですよ。使い方はとっても簡単です。

例えば、ブログの記事一覧ページなどで、たくさん並ぶ「カード要素」を想像してください。

このカードたちに対して、CSSで次のように指定するだけです。

/ 繰り返し並ぶカードの共通クラス /
.article-card {
/ まだ画面に入っていなかったら、ブラウザの面倒な計算をお休みさせる /
content-visibility: auto;

/ ついでに、その要素のおおよその高さをあらかじめ教えてあげる（これがあるとさらに効率的！） /
contain-intrinsic-size: 0 200px;
}
たったこれだけです！
「えっ、たったこれだけでいいの？」と思いましたよね。はい、基本の使い方はこれだけで十分なのです。

ちょっとだけ補足：`contain-intrinsic-size` ってなに？

さっきのコードに出てきた `contain-intrinsic-size` という見慣れないプロパティについても触れておきますね。

`content-visibility: auto;` を使うと、ブラウザは「見えない部分の計算をしない」ため、その要素の「本当の高さ」が分からなくなります。高さが分からなくなると、スクロールバーの長さがガクッと狂ってしまったりすることがあります。

それを防ぐために、「このカードの高さは、だいたい 200px くらいだよ！」とブラウザに大体の目安（仮のサイズ）を教えてあげるのが、このプロパティの役割です。お買い物の例えで言うなら、「あの段ボール箱の大きさは、だいたいこれくらいだよ」とラベルを貼っておくような親切心ですね。

—

4. 現場で使うときの「ちょっとした注意点」

ここまで聞くと「じゃあ、サイト内のすべての要素に `content-visibility: auto;` を付けちゃえば最強じゃん！」と思われるかもしれませんが、そこはプロの世界、少しだけ注意が必要です。

1. 「今すぐ見せたいファーストビュー」には使わない
ページを開いたときに一番最初に目に入るメインビジュアルやヘッダーには使わないでくださいね。最初から見えているものに対して「見えないからお休みして」と言ってしまうと、逆に表示が遅れる原因になります。
2. 何でもかんでも指定しない
ページ内のあちこちに細かく指定しすぎると、かえってブラウザが管理する手間（オーバーヘッド）が増えてしまいます。効果が出やすい「たくさん並ぶ重たいカードやセクション」を狙ってピンポイントで使うのがプロの技です。

つまずきやすいポイントとして、「設定したのにデザインが崩れた！」という場合は、大体この「高さの指定（`contain-intrinsic-size`）」が抜けているか、要素が重なり合っていることが原因です。もし崩れたら、まずは高さを調整してみてくださいね。「大丈夫、少しずつ調整していけば必ず理想通りに動くようになりますよ！」

—

おわりに

今回は、ブラウザのレンダリングを賢くサボらせて爆速化する `content-visibility` についてご紹介しました。

Webブラウザは私たちが思っている以上に、裏側でたくさんの仕事を頑張っています。だからこそ、私たち作り手が「ここはまだ見えなくていいから、お休みしていていいよ」と優しく声をかけてあげることで、ブラウザも軽快に動き、結果としてユーザーにとって心地よい、サクサク動く素晴らしいWebサイトが完成します。

ぜひ、あなたの次のプロジェクトや、ちょっと重いなと感じるページで試してみてくださいね。あなたのWeb制作ライフが、もっと楽しく快適なものになりますように！