【入門編】 content-visibility: autoの挙動と注意点 – Webブラウザの仕組み実践ガイド

こんにちは。Webの広大な海を航海する皆さんに、今日はブラウザという「凄腕の職人さん」が、いかにして私たちのサイトを軽快に表示しているか、そしてその魔法をさらに加速させる『`content-visibility: auto`』という秘密道具についてお話しします。

難しい技術用語も、身近な例えに置き換えればきっと怖くありません。肩の力を抜いて読んでいってくださいね。

—

まず、ブラウザがWebページを表示する仕組みを想像してみてください。
例えば、あなたがとんでもなく長いメニュー表（Webページ）を持つレストランに入ったとします。

本来のブラウザは、「真面目な料理人」です。お客さんがまだ見ていないメニューの裏のページまで、すべて一度に調理してテーブルに並べようとします。これでは、どんなに高性能なキッチン（ブラウザ）でも、ページを開いた瞬間にフリーズしてしまいますよね。

この「全部まとめて調理しちゃう」のが、リフロー（配置の計算）やリペイント（色の塗り直し）という作業です。ページが長いほど、この作業は重労働になります。

ここで登場するのが、CSSの救世主 `content-visibility: auto` です。

これはブラウザに対して、「今、画面に映っていない部分は、とりあえず調理（レンダリング）しなくていいよ！スクロールして見えたら作ればいいから！」と指示する魔法の呪文です。

例えるなら、「回転寿司の職人さん」です。
お客さん（ユーザー）の目の前を流れてくるお皿だけを丁寧に仕上げればいい。まだ遠くにいるお皿をわざわざ今から作っておく必要はありませんよね？これによって、ページを開いた瞬間の「重さ」が嘘のように軽くなるんです。

—

この魔法は強力ですが、いくつか「お約束」があります。ここさえ押さえておけば、もう失敗することはありませんよ。

`content-visibility: auto` を使うと、ブラウザは「まだ表示されていない部分の高さ」を正確に計算できません。そのため、スクロールしていく途中で「あ、中身が読み込まれた！」とブラウザが気づいた瞬間、スクロールバーの長さがガクッと変わることがあります。

対策： `contain-intrinsic-size` というプロパティをセットで使いましょう。
「中身はまだ作ってないけど、だいたいこれくらいの高さになるはずだよ」とブラウザに目安を教えてあげるんです。これでスクロールのガクつきは解消されます。

「見えていない部分はレンダリングしない」ということは、ブラウザの検索機能（Ctrl+F / Cmd+F）も、その部分を見つけられなくなる可能性があります。また、スクリーンリーダー（視覚障がい者向けの読み上げソフト）にとっても、中身が空っぽに見えてしまうのは困りものです。

ただ、安心してください。最近のブラウザは賢いので、ユーザーが検索を開始したり、読み上げソフトがその範囲に入ると、ブラウザは自動的に「おっと、今から作るよ！」と動いてくれます。基本的にはあまり心配しなくて大丈夫ですが、念のため「大事なコンテンツ」には使わない、という判断も大切です。

—

さあ、エディタを開いてみましょう。以下のコードをコピーして試してみてくださいね。

.section-item {
/ ここが魔法の呪文！ /
/ 見えていない時はレンダリングをスキップする /
content-visibility: auto;

/ スクロールバーがガタつかないように「仮の高さ」を教えてあげる /
/ 500pxくらいの高さの要素になることが多いなら、このように設定 /
contain-intrinsic-size: 500px;
}

たったこれだけです。これだけで、あなたのWebサイトは格段にキビキビと動くようになります。

—

Webブラウザの仕組みは奥が深く、最初からすべてを理解するのは無理ゲーに感じるかもしれません。でも、大丈夫です。

「画面の外にあるものを、わざわざ今作らなくてもいいよね？」という、このシンプルな考え方さえ掴んでいれば、あなたはもう立派なアーキテクトの視点を持っています。

まずは、ページの中で「重たいな」と感じる部分に、そっとこの魔法をかけてみてください。あなたのサイトを訪れるユーザーが、「あれ、なんだかこのページ、スルスル動いて気持ちいいな」と感じてくれたら、それが一番の成功です。

また何か分からないことがあれば、いつでも聞きに来てくださいね。あなたのWeb制作ライフを、これからも応援しています！