CLSが発生する具体例とコード解説｜実務で“どこに仕掛けがあるのか”を見極める

CLS（Cumulative Layout Shift）は、「正しく作れば発生しにくい」指標です。

しかし実務では、一見問題なさそうに見えるコードが “わずかなズレ” を生み、PageSpeed Insights でCLSが悪化するケースがあります。

今回は、実際にCLSが発生するコード例と、改善例 を示しながら、“何が原因でズレるのか” を明確に解説します。

画像の縦横比が指定されず押し下がる例

もっとも再現性が高いCLSのパターンです。

【悪い例】
<img src="sample.jpg" width="1200" height="800" alt="xxx">

サイズが指定されていないため、読み込み完了後に実サイズが確定し、周囲が押し下がります。

【良い例】
<img src="sample.jpg" width="1200" height="800" alt="xxx">

またはレスポンシブ前提の場合：
<img src="sample.jpg" style="aspect-ratio: 3 / 2; width: 100%;" alt="xxx">

縦横比だけでも事前に確定できればCLSは発生しません。

Webフォント適用後に文字幅が変わり段落全体がズレる例

【悪い例】
body {
font-family: "MyWebFont";
}

読み込み完了まで“フォールバックフォント”で描画され、適用後に幅や段落高さが変化してCLSが発生します。

【良い例】
@font-face {
font-family: "MyWebFont";
src: url("font.woff2") format("woff2");
font-display: swap;
}

swap により即時描画を許可し、後からフォントが読み込まれても大きなズレを防げます。

動的コンテンツの後付けによる押し下げ（広告・レコメンド・SNS）

ECサイトやメディアで非常に多いパターンです。

【悪い例】
// 取得後に高さのある要素を追加
const box = document.getElementById("recommend");
box.innerHTML = "<div class='item'>推奨商品</div>";

初期レイアウトが完成してから高さのある要素を挿入すると周囲が押し下がりCLSが発生します。

【良い例】
<div id="recommend" style="height: 200px;">
<!-- 後から内容が入る -->
</div>

あらかじめ“プレースホルダーの高さ”を固定すれば挿入後もレイアウトが変化しません。

DOM構造が複雑で、スタイル再計算が広範囲に伝播する例

入れ子の深いDOMは、わずかなスタイル変更でも広範囲を再計算し、結果としてCLSを誘発することがあります。

【悪い例】
<div class="wrap">
<div class="inner">
<div class="section">
<div class="box">
<img id="target" src="img.jpg">
</div>
</div>
</div>
</div>

この状態でJavaScriptが高さを変更すると：

document.getElementById("target").style.height = "auto";

全階層でレイアウト再計算が走り、結果としてCLSが発生します。

【良い例】は以下です。

• LCP要素周辺は入れ子を浅くする
• CSSで完結できるレイアウトにする
• JavaScriptで“初期高さ変更”をしない

DOMが軽いほどレイアウトシフトは起きにくくなります。

JavaScriptアニメーションが初期状態の位置を変えてしまう例

初期表示後に位置が変わるアニメーションは本質的にCLSの原因となります。

【悪い例】
document.getElementById("hero").style.display = "block";
document.getElementById("hero").style.height = "400px";

表示後に高さが変わるためズレが発生。

【良い例（transform / opacity のみで演出）】
#hero {
opacity: 0;
transform: translateY(10px);
transition: all .4s;
}
#hero.show {
opacity: 1;
transform: translateY(0);
}

transform と opacity はレイアウトを変えないためCLSを悪化させません。

これらの例に共通する“CLS発生の本質”

CLSは、複雑な知識が必要な指標ではありません。

• 初期レイアウトを確定させる
• 画像・フォントの扱いを丁寧にする
• 動的挿入を慎重に扱う
• DOMとCSSをシンプルに保つ

といった “当たり前の実装を積み上げるだけで自然に改善する” 性質があります。

PageSpeed Insights で大きく赤点になるのはLCP と違ってまれです。
日頃から正しい作り方を徹底していれば、CLSは大きく崩れません。

今後も、制作時の“初期レイアウトの確定”を意識することで、安定したUIと快適な表示を維持できるはずです。