こんにちは。Webブラウザという「魔法の箱」の裏側を覗こうとしているあなた、ようこそ。
多くの人はWebサイトを「ただ表示されるもの」だと思っています。でも、あなたは違いますよね。その裏でブラウザという職人が、どれほど汗をかいて画面を作り上げているのかを知りたいはずです。
今日は、Googleが定めるWebサイトの「健康診断」の指標、LCPとCLSについてお話しします。難しく聞こえるかもしれませんが、大丈夫。普段の生活に例えれば、スッと頭に入ってきますよ。
—
1. LCP（Largest Contentful Paint）：「一番目立つ主役」はいつ登場するか？
LCPを一言で言うなら、「Webページの中で一番大きな要素（メイン画像や見出し）が、画面に表示されるまでの時間」のことです。
なぜこれが重要なのか？
想像してみてください。高級レストランに行って、注文したメインディッシュが出てくるのを待っているとします。前菜やおしぼりが先に来ても、メインがなかなか来ないと「あれ、忘れられてる？」と不安になりますよね。
Webブラウザも同じです。テキストやアイコンが先に出ても、一番見せたいメイン画像が最後の方にノロノロと表示されたら、ユーザーは「このサイト、遅いな」と離脱してしまいます。
ブラウザの裏側で起きていること
ブラウザは、HTMLを受け取ると「パース（解析）」を始めます。
1. DOMツリーを作る: HTMLを読み込み、箱（要素）を組み立てます。
2. CSSOMツリーを作る: デザイン情報を読み込みます。
3. レンダリング: 両者を合わせて「絵」にします。
LCPは、このレンダリングの過程で「今、画面に表示されている中で一番デカい奴は誰だ？」とブラウザが常に監視し、それが完全に表示された瞬間に「はい、LCP完了！」とタイムスタンプを押しているんです。
—
2. CLS（Cumulative Layout Shift）：「ガクッ」となるあの現象
次にCLSです。これは「予期せぬレイアウトのズレ」のことです。
身近な例え話：電車の中の出来事
電車で座っているとき、スマホでニュースを読んでいたとします。「よし、このボタンを押そう」と指を動かした瞬間に、上から広告が読み込まれて、画面が「ガクッ」と下に押し下げられた……。結果、間違えて広告をクリックしてしまった。
……イライラしますよね？ これがCLSです。ユーザーの意図しない「レイアウトの移動」を数値化したものです。
なぜズレるのか？
ブラウザは「上から順番に」HTMLを読み込みます。
画像や広告のサイズ（高さや幅）を事前に指定していないと、ブラウザは「とりあえず場所だけ確保しておこう」という予測ができません。後から画像が読み込まれた瞬間に、「あ！ここに画像が入るなら、下のテキストは下にずらさなきゃ！」と、大慌てで配置を修正する。これが「ガクッ」の正体です。
—
3. 実践：どうすれば防げるのか？
解決策は驚くほどシンプルですが、多くの人が見落としがちです。
CLSを防ぐための「場所の予約」
CSSで、画像のサイズ（縦横比）をあらかじめ予約しておきましょう。
/ 画像の親要素に、あらかじめ高さを確保する仕組み /
.image-container {
/ 縦横比を保ったまま場所を確保（アスペクト比指定） /
aspect-ratio: 16 / 9;
width: 100%;
background-color: #f0f0f0; / 読み込み中にグレーの箱が見えるようにする /
}
img {
width: 100%;
height: auto;
display: block;
}
LCPを速くするための「一番のお願い」
メイン画像（LCPの対象になる画像）には、ブラウザに「これは最優先だ！」と教えてあげましょう。`fetchpriority=”high”` という属性を使うのが現代の鉄板テクニックです。
—
最後に：完璧主義にならなくていい
LCPやCLSを学ぶと、「すべての数値を完璧にしなければ！」と焦ってしまうかもしれません。でも、まずは「ユーザーがイライラする原因を、技術で少しだけ緩和してあげる」という優しい気持ちを持つことから始めてみてください。
ブラウザの仕組みを知ることは、ユーザーへの思いやりを形にすることと同じです。今日から、あなたの書くHTMLやCSSが、誰かの待ち時間を数ミリ秒減らすかもしれない。そう考えると、少しワクワクしませんか？
また分からないことがあれば、いつでも聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！
コメント