こんにちは。Webという広大な海を渡る皆さんの船を、少しでも頑丈に、そして快適にするお手伝いをしているエンジニアです。
今日は、皆さんがWebサイトを見ている時にふと感じる「あのイライラ」の正体と、それをブラウザがどう見張っているのかというお話をしますね。
「読み込み中にボタンが逃げる！」という経験はありませんか？
皆さんも経験ありませんか？ Webサイトを開いて、よし、このボタンを押そう！と思った瞬間に、画像が遅れて表示されて、ボタンがガクンと下に押し出されて……。
「あ、押し間違えた！」「全然違うリンクを開いちゃった！」
この、「コンテンツが読み込み中にガクガク動いてレイアウトが崩れる現象」を、専門用語でLayout Shift（レイアウトシフト）と呼びます。そして、その合計値をCLS (Cumulative Layout Shift)と言います。
これはユーザーにとって非常にストレスフルです。まるで、お会計の瞬間に店員さんがレジを別の場所に移動させるようなもの。「ちょっと待ってよ！」と言いたくなりますよね。
ブラウザはどうやってこの「ガクガク」を見ているのか
実は、ブラウザは非常に几帳面な性格をしています。HTMLを読み込み、DOM（構造）を作り、CSSを適用して画面に配置（レイアウト）する。この一連の作業の中で、ブラウザは「Layout Instability API」という秘密道具を使って、レイアウトの変化を秒単位、いやミリ秒単位で監視しているんです。
このAPIは、画面上の要素が「意図せず動いた距離」を計算しています。
「さっきの画像、読み込まれた瞬間に下へ300ピクセルも移動したな。これはユーザーを混乱させるぞ」と、ブラウザは心の中でメモを取っているわけです。
実際にCLSを計測してみよう
「難しいコードは苦手……」という方も大丈夫です。ブラウザには、今どのくらいのレイアウトシフトが起きているかを教えてくれる便利な仕組みが最初から備わっています。
以下のコードを、Chromeの開発者ツールの「Console（コンソール）」に貼り付けてみてください。今見ているページでレイアウトシフトが発生するたびに、ブラウザがその値を教えてくれます。
// レイアウトシフトを監視する仕組み（Observer）を作成します
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// もしユーザーの操作（クリックなど）による移動でなければ、値として記録します
if (!entry.hadRecentInput) {
console.log(‘おっと！レイアウトがガクッと動きました:’, entry.value);
}
}
});
// レイアウトシフト（layout-shift）という種類のイベントだけを監視対象にします
observer.observe({ type: ‘layout-shift’, buffered: true });
// ※これを実行した状態で、画像の読み込みが遅いサイトを開くと面白いですよ！
このコードを実行すると、もしページ内の要素が勝手に動いた時に「おっと！」と教えてくれます。`entry.value` というのが、その「ガクガク度合い」を示すスコアです。これが0に近ければ近いほど、そのサイトは「安定していて優しいサイト」と言えます。
なぜレイアウトが動いてしまうのか？
一番の原因は「サイズの指定漏れ」です。
想像してみてください。荷物を送る時、箱のサイズを決めずに中身を詰めようとすると、後から大きな荷物が届いた時に箱がパンパンに膨らみますよね。Webサイトも同じです。画像や広告を表示する場所の「高さ」や「幅」をあらかじめ教えてあげないと、ブラウザは「あとで何が入るかわからないから、とりあえず詰めよう」と頑張ってしまい、後からコンテンツが来た時にレイアウトを修正（リフロー）することになります。
解決策はシンプルです：
- 画像には `width` と `height` をしっかり書く。
- コンテナ（枠組み）の高さは、あらかじめCSSで確保しておく。
これだけで、ブラウザは「あ、ここはあらかじめ空けておけばいいんだな」と安心して、ガクガクさせずにコンテンツを表示できるようになります。
最後に：完璧を目指さなくても大丈夫
Web制作を始めたばかりの頃は、CLSのスコアを0にしようと躍起になりがちです。でも、安心してください。世界中のトップエンジニアでも、ゼロにするのは至難の業です。
まずは、「自分がボタンを押そうとした時に、ボタンが逃げていかないか？」というユーザーの視点を大切にしてみてください。その視点こそが、最高のユーザー体験を作る第一歩です。
ブラウザはいつも、皆さんが書いたコードを一生懸命読み取ろうとしています。そのブラウザの苦労を少しだけ気遣って、「場所を確保してあげる」という優しさをコードに添えるだけで、Webの世界はもっと心地よい場所になりますよ。
皆さんの作るWebサイトが、誰にとっても「迷わず押せる、心地よい場所」になりますように。応援しています！
コメント