表示速度の「裏ワザ」？ `content-visibility` でWebサイトを爆速にする魔法
Webサイトを作っていると、どうしても避けて通れないのが「表示速度」という壁ですよね。特に、長い記事やたくさんの要素が並んだページだと、ブラウザが一生懸命全部を読み込もうとして、最初の表示がもたつく……なんてことは日常茶飯事です。
「全部を表示する前に、今見えているところだけ先に教えてくれたらいいのに！」
そんな願いを叶えてくれるCSSのプロパティ、それが `content-visibility` です。今日は、HTMLのインライン要素（`span`や`a`タグなど）と絡めて、この「レンダリング最適化」という少し難しそうな話を、お買い物の例えを使って優しく紐解いていきましょう。
—
「全部準備しなきゃ！」というブラウザの真面目な悩み
Webブラウザは、とても真面目な仕事人です。私たちがHTMLを書くと、たとえ画面の一番下にあって今は見えていない部分であっても、「ユーザーに見せるかもしれないから、今のうちに計算して描画（レンダリング）しておかなくちゃ！」と全力で準備を始めます。
これを「お買い物」に例えてみましょう。
あなたは大きなスーパーに来ました。入り口のレジで、「店内の全商品の値札と陳列状況を今すぐ頭に叩き込んでください」と言われたらどうでしょう？ 頭がパンクして、買い物どころではありませんよね。
本当は、「今歩いている通路にある商品だけ」分かれば十分なはずです。
`content-visibility: auto` は「必要な時だけ働く」魔法
`content-visibility: auto` を使うと、ブラウザにこう伝えることができます。
> 「画面の外にあるものは、とりあえず計算しなくていいよ。スクロールして近づいてきたら、その時に計算してね！」
これだけで、ブラウザの負担は一気に減り、初期表示は驚くほど軽くなります。
実践：長いリストで試してみよう
例えば、`span`タグを使って大量の注釈やタグを並べているようなケースを想像してください。
.heavy-content {
/ これが魔法のコードです /
content-visibility: auto;
/ 画面外の要素の「高さ」をあらかじめブラウザに教えてあげると、
スクロールバーのガタつきを防げます /
contain-intrinsic-size: 0 500px;
}
ここで出てくる `contain-intrinsic-size` というのが、もう一つのポイントです。「中身はまだ描画しないけど、ここには500px分の高さがあるよ」とブラウザに教えてあげることで、スクロール中に突然高さが変わって画面がガタつくのを防ぐ、いわば「予約席」のような役割を果たします。
—
注意点：魔法にもルールがある
すごく便利なプロパティですが、いくつか気をつけるポイントもあります。
1. ブロック要素に使うのが基本： `span`や`a`などのインライン要素そのものに直接指定するのではなく、それらを囲んでいる「親の箱（`div`や`section`など）」に指定するのがコツです。
2. 全部に使わない： 画面のトップにある重要なコンテンツにまで使うと、逆に表示が遅れる原因になります。「画面の下の方にある、ちょっと重たい場所」に使うのがベストな選択です。
大丈夫、少しずつ試せばOKです！
「レンダリング最適化」なんて聞くと、なんだか凄腕エンジニアだけの技術のように感じるかもしれません。でも、`content-visibility` は、ほんの数行のCSSを追加するだけで、ユーザー体験を劇的に改善できる、とても優しい技術です。
まずは、自分のサイトの中で「ここ、ちょっと要素が多くて重いかも？」と思う箇所に、そっとこのプロパティを添えてみてください。ブラウザという「真面目な仕事人」を少し休ませてあげれば、Webサイトはもっと軽快に、もっと快適に動いてくれるはずですよ。
もし分からないことがあっても大丈夫。一つずつ試しながら、あなたのサイトを少しずつ速くしていきましょう！
コメント