CLSとは何か？なぜ発生するのか？｜誤解されやすい指標の“本質”を整理する

PageSpeed Insights の改善に取り組むと、LCPやINPほどではないものの、時折問題として挙がるのが CLS（Cumulative Layout Shift） です。

ただし、弊社の現場感覚として CLSが赤点になるケースは実は多くありません。

• 画像に width / height を指定する
• レイアウトが後から変わるようなコードを書かない
• 不要な挿入や上書きをしない

以上のように“基本的なつくり方”をしていれば、深刻なCLSはほとんど発生しないためです。

むしろ発生しやすいのは LCP（読み込み遅延・読み込み時間） の方で、そちらが問題になりやすいという実務上の事情があります。

しかし一方で、CLSは誤解されやすい指標でもあります。
本質的な理解がないまま部分的なTipsだけが広まっているため、“根本原因”に辿り着けないケースも少なくありません。

本記事では CLS の本質と、なぜ発生するのかを整理します。

CLSとは？──“予期しないレイアウトの移動”を数値化したもの

CLS（Cumulative Layout Shift）とは、ページ表示中に意図せずレイアウトが動く現象を測定する指標です。

• 画像が読み込まれて文章が押し下がる
• ボタンが突然動いて誤クリックが起きる
• 広告やレコメンド枠が後から挿入されてズレる
• フォント読み込みで文字位置が再計算される

Googleの基準は以下です。

• 0.1 以下：良好
• 0.1〜0.25：改善が必要
• 0.25 超：不良

ユーザー体験に直結するため、PageSpeed Insights でも重要視されます。

CLSが誤解されやすい理由

CLSが理解されにくく、情報が錯綜する背景にはいくつか理由があります。

理由①：LCP・INPと比べて“どこが悪いか見えづらい”

• LCPは「大きい要素の出現タイミング」
• INPは「操作後の反応速度」

どちらも比較的“見える問題”です。

一方 CLS は “ページのどこかでレイアウトが動いた”という抽象的な現象のため、原因特定が難しくなりがちです。

理由②：原因が単一でなく、複数要因が絡みやすい

CLSの原因は多岐にわたります。

• 画像サイズ未指定
• 動的挿入
• フォントロード
• Lazyload後のサイズ変化
• DOM構造の複雑さ
• JavaScriptによる上書き
• CSS再計算（リフロー）

この中の“複数”が同時に絡むため、再現も追跡も難しくなります。

理由③：ネットに部分的なTipsだけが溢れている

Web上のCLS解説はよく以下のような断片的なものが多いです。

• 画像に width / height を指定せよ
• font-display: swap を使え
• アニメーションを減らす

もちろん間違いではありません。

しかしCLS改善は 構造（HTML/CSS）× 読み込み順（ネットワーク/JavaScript） の問題で、一つのTipsだけでは直らないケースも多いです。

CLS発生の“本質”──ズレる瞬間は必ず2つのどちらか

CLSが発生する仕組みを分解すると、必ず以下のどちらかに分類できます。

① 描画前にサイズが確定していない

• 画像の縦横比が不明
• iframe・広告のサイズが未指定
• JavaScriptで後から高さ計算
• CSSで後から大幅な上書き

ブラウザがレイアウトを確定できず、読み込み途中で位置が変わってしまいます。

② 描画後にレイアウトを変える処理が走る

• 広告やレコメンドの後挿入
• Lazyload後にサイズが変化
• Webフォント読み込みによるテキスト再配置
• JavaScriptで後から DOM を書き換え
• スクロール後にヘッダーを縮める、などのUI変化

つまり、初期レイアウト → 再計算 という流れが起きるとCLSが悪化します。

PageSpeed Insights ではどう評価されるか？

PageSpeed Insightsには2種類のデータがあります。

• 実ユーザーデータ（フィールドデータ）
• ラボデータ（診断用）

CLSは特に以下が重要です。

• フィールドデータの影響が大きい（UIの安定性は体感差が大きいため）
• モバイル端末の方がCLSが悪化しやすい
• Lazyloadや広告のような“環境依存の挙動”が反映されやすい

そのため、実装時の細かな挙動まで考慮する必要があります。

制作現場での実感：CLSは“普通に作れば”落ちにくい

弊社の制作現場の実体験として、CLSは 適切なHTML・CSSを前提に作れば大きくは崩れにくい指標 です。

特に以下をきちんと行っていれば、深刻なCLSはほぼ発生しません。

• 画像サイズの指定
• レイアウトが後から変わらない構造
• DOMを複雑化しすぎない
• JavaScriptで高さを後から操作しない
• 不必要な挿入を行わない
• CSSを後から重ねて上書きしない

つまりCLSは “対策する”というより、“崩さない設計”をすべき項目 です。

強引なJavaScript設計や、フレームワークに依存したDOM肥大化の方がむしろ悪化の主因になりやすいと言えます。