CLS（Cumulative Layout Shift）は、Webサイトのユーザー体験（UX）を左右する重要な指標です。
「何が原因で悪化する？」「どうすれば改善できる？」などの疑問がある方もいるでしょう。
本記事では、CLSの主な悪化原因と改善方法を解説します。また、改善を効率化するための便利な測定ツールや、画像最適化に役立つプラットフォーム「Imgix」も紹介します。
自社サイトのCLSに課題をお持ちの方は、ぜひ最後までご覧ください。
また、CLSにお悩みの方は、弊社の画像最適化サービス「Imgix」をご検討ください。日本経済新聞や一休.comなどの大手企業にも導入され、Webサイトの表示品質やパフォーマンスの改善に貢献しています。
CLS（Cumulative Layout Shift）を簡単におさらい
CLSとは、Webページの読み込み中にテキストや画像、ボタンなどの要素が意図せず動く・ズレる現象（レイアウトシフト）を定量的に測る指標です。
例えば、読み込み途中でバナーがあとから表示され、ユーザーがクリックしようとしたボタンの位置がズレる現象が典型的です。スコアが高いほど、表示のズレが多く、ユーザーが不快に感じる表示の揺れが大きいことを意味します。
また、CLSはGoogleのCore Web Vitals（コアウェブバイタル）の一つであり、UXやSEOの向上を目指すうえで重要です。
Core Web Vitalsの詳細については下記記事もご参照ください。
コアウェブバイタルとは？指標・SEOとの関係性・対策を徹底解説！
レイアウトシフト（表示のズレ）の計算方法
CLSの算出にはLayout Instability APIが用いられ、以下が定義です。
各シフトのスコア = レイアウトシフトの影響度 × 画面内での発生割合
例：画面の50%を占めるブロックが縦に画面高さの25%分動くと、スコア = 0.50 × 0.25 = 0.125
各シフトのスコアを一定時間内ごとに合計します。全ウィンドウのなかで最大の合計値が、該当ページの最終的なCLSとなります。
CLSの改善が重要な理由
CLSは、以下の3つに影響することから改善が重要です。
- UXの向上：表示中に要素が勝手に動かず、誤タップや混乱が減少
- コンバージョン率（CVR）の改善：誤操作・早期離脱を抑え、購入や申込フローの完走率が向上
- SEOへの好影響：改善は検索順位の安定・向上に貢献
CLSは、UX・収益・検索順位に直結する指標です。継続的に監視・改善することで、自社サイトの成果を最大化できます。
CLS改善で目指すべき目安
Googleは、以下のようにCLSスコアを定めています。
- 良好：0.1以下
- 要改善：0.1〜0.25
- 不良：0.25超
要改善と不良の場合は要素のズレが大きく、ユーザーにストレスを与える状態のため、早急に改善が必要です。
ただし、すべてのページを0.1以下にする必要はなく、まずは全体の75%のページで0.1未満を目指すことが推奨されています。
CLS改善の手順
CLSを見直す際は、現状のスコアを正しく把握し、目標値に向けて改善のサイクルをまわすことが重要です。本章では、CLSの改善手順を紹介します。
1.現状のCLSスコアの把握
CLSを改善する際にまず行うべきことは、自社サイトのCLSスコアを確認することです。
スコアは、Googleが提供する以下のツールで確認できます。
- PageSpeed Insights（PSI）：実ユーザーのデータとラボデータの両方でCLSスコアを確認できる分析ツール
- Lighthouse：詳細なCLSの悪化原因の分析が可能な検証ツール
- Google Search Console（GSC）：サイト全体のCLS状況を中長期的にモニタリングできる管理ツール
なかでもPSIは、モバイルとデスクトップのCLSスコアをグラフで直感的に確認できるため、初心者にもおすすめです。
2.目標値の設定
現状のCLSスコアを把握したあとは、改善に向けて目標値を設定します。良好とされる0.1未満を目標に掲げ、着実に改善を進めましょう。
3.数値悪化の原因の洗い出し
CLSスコアが低いWebページに対しては、手当たり次第で改善策を実行するのではなく、まずは悪化の原因を把握することが重要です。悪化原因が明確になることで、施策の優先順位を見極められ、CLSスコアを効率良く改善できます。
特に、複雑なレイアウト構造や動的コンテンツを含むサイトでは、測定ツールを活用した原因分析が欠かせません。
4.改善策の設計・実装
スコア悪化の原因が特定できたあとは、それぞれの原因に応じた具体的な改善策を設計・実装します。
設計する際に特に重要なのは、影響度の高い要素から優先的に対応することです。特に、画像と動画が最適化されていないと、レイアウトシフトを引き起こしやすいため、優先的に実施すべきです。
測定ツールで修正箇所を再診断しつつ段階的に反映することで、効率的に改善を進められます。
5.改善後の効果の計測
改善を実施したあとは、測定ツールでCLSスコアを計測し、改善策の効果を確認しましょう。効果測定の際は、モバイル・デスクトップ両方の環境でページ全体の傾向を把握することが大切です。
6.継続的に監視・改善
CLSスコアは一度改善しても、新しいコンテンツの追加やサイト改修に伴い再び悪化することがあります。そのため、一時的な対応ではなく、以下のような監視・改善体制の構築が重要です。
- 定期的なPSIやLighthouse診断の実施
- Google Search Consoleの定期チェック
- レイアウト変更時のテスト環境でのスコア検証
開発・運用フローにCLSのチェック工程を組み込み、サイトのリリース前に問題を発見・対処できる体制を整えましょう。
CLSが悪化する主な原因
CLSのスコアが悪化する典型的なパターンを把握することで、的確な対策を実行できます。本章では、主な原因を紹介します。
画像や動画のサイズ未指定
HTMLで画像や動画のwidthおよびheightを指定していない場合、ブラウザは表示に必要なサイズを予測できません。一時的に高さ0としてレンダリングされ、実際のサイズが反映されます。その結果、周囲のコンテンツが押し広げられ、レイアウトシフトが発生し、CLSの悪化につながります。
広告・埋め込みコンテンツの動的挿入
Google広告などの外部広告やSNSウィジェット、YouTube動画などの埋め込みコンテンツは、JavaScriptによりあとから読み込まれることが一般的です。読み込み完了前に十分なスペースを確保していないと、要素が挿入された瞬間にレイアウトが押し下げられ、CLSスコアが悪化します。
Webフォントの遅延読み込み
Webフォントを読み込む際、フォントが読み込まれるまでの一瞬にテキスト表示が不安定になることがあります。
この現象は、以下の2パターンに分けられます。
- テキストが一瞬表示されない（FOIT）：フォント読み込みが終わるまでテキストが非表示になる
- テキストが一瞬代替フォントで表示される（FOUT）：代替フォントで一瞬表示され、あとからWebフォントに切り替わる
いずれの場合も、フォントの切り替えによってテキストの幅が変化し、レイアウトシフトが発生します。
アニメーション・トランジションの実装ミス
CSSアニメーションやJavaScriptによるトランジションで要素を動かす際、不適切なプロパティが使用され、表示のズレが生じます。
特に大きなレイアウトシフトが発生するのは、以下のようなケースです。
- topやleftなどレイアウトに影響を与えるプロパティでの位置変更
- JavaScriptでDOM構造そのものを変更するアニメーション
- アニメーションが読み込みと同時に開始し、要素の表示位置が予測できない
これらは、視覚的にスムーズな演出を意図しても、ユーザーにとってはページ構造が突然変わったように見えるため、改善が必要です。
CLSの効果的な改善施策
CLSの改善施策は、大きく以下3つのカテゴリーに分けられます。
- 画像と動画の最適化
- Webフォントの最適化
- JavaScriptの最適化
本章では、それぞれのカテゴリーにおいて特に効果の高い施策を紹介します。
画像と動画の最適化
画像と動画は多くのサイトで使用されており、CLS悪化の主な要因となるため、最優先で最適化に取り組むことがCLS改善の近道です。以下では、CLSスコアの改善に効果的な画像と動画の最適化方法を紹介します。
width・heightの指定
画像や動画には、widthとheightを明示的に指定しましょう。ブラウザがレンダリング時に表示領域を確保でき、読み込み完了前後でのズレがなくなります。例えば、画像をHTMLで幅800・高さ300に設定する場合は、<img src="*" width="800" height="300" alt="">のように<img>タグを用いて定義します。
遅延読み込みの実装
画像やiframeを遅延読み込み（Lazy Load）にすると、画面に表示されない不要な読み込みを抑制でき、表示が速くなるため、結果としてCLSスコアの改善につながります。
ただし、ファーストビューの画像を遅延読み込みすると、もっとも早く表示すべき画像が遅れて表示され、かえってCLSが悪化するため注意しましょう。
表示領域の事前確保
画像や動画を挿入する際、あとから表示される可能性がある要素には、表示領域をあらかじめ確保しましょう。
具体的には、以下のような対応が効果的です。
- 広告枠に固定サイズのコンテナを設置する
- iframeやコンポーネントにデフォルトのmin-heightを設定する
- CSSのaspect-ratioによりコンテンツのアスペクト比を指定
事前にレイアウトの構造を固めておくと、動的なコンテンツ挿入によるズレを防ぎ、レイアウトシフトを防止できます。
Webフォントの最適化
Webフォントを最適化することで、CLSの悪化を防ぎつつ、美しいタイポグラフィを維持できます。以下では、CLSスコアの改善につながるWebフォントの最適化方法を紹介します。
カスタムフォントを最小限に絞る
カスタムフォントを多用すると読み込みファイルが増加するため、読み込みに時間がかかり、初期表示時のズレが発生しやすくなります。
そのため、CLSを改善するためには、デフォルトフォントを基本とし、必要最小限のフォントファミリー・ウェイトに絞ることが重要です。
font-display: swapの活用
カスタムフォントが読み込まれるまでの時間に、テキストが表示されないFOITが生じている場合は、font-display: swapの活用が有効です。デフォルトフォントでテキストを最初に表示し、Webフォントが読み込まれ次第置き換える挙動に変わります。その結果、テキストの表示遅延が改善され、ページの安定性が向上します。
レンダリングサイクルの最適化
Webフォントは、ブラウザのレンダリング処理に直接影響を与えます。読み込みタイミングが遅れると、再レイアウトや再描画が発生し、CLSスコアの悪化を招きます。
最適化のためには以下のような工夫が有効です。
- preloadを使用して重要フォントを先に読み込み
- サブセット化された軽量フォントを使用
- Critical CSSと組み合わせて初期レンダリングを高速化
レンダリングタイミングを制御することで、表示の安定性と読み込み速度の両立が実現します。
JavaScriptの最適化
JavaScriptを最適化すると、不要なDOM変更や同期処理によるレイアウトの揺れを抑え、CLSの発生を防げます。以下では、CLSスコアの改善に有効なJavaScriptを最適化する具体的な方法について紹介します。
不要なJavaScriptの削減
使用していないライブラリや古いコードを削除すると、読み込みと実行が軽くなり、初期描画乱れとメインスレッドのブロッキングを同時に抑えられます。JavaScriptを削除する際は、Chrome DevToolsが便利です。ツール内の「Coverage」パネルを利用するだけで、簡単に未使用コードを特定できます。
読み込み順序の見直し
JavaScriptの読み込みは、deferやasync属性を適切に使用することで、ページレンダリングのブロックを防げます。特に、解析タグや後追いアニメーションなど、CLSに影響を与えないスクリプトは、あとから読み込む構成に変更しましょう。
外部スクリプトの影響の最小化
広告・ウィジェットなどの外部スクリプトは、あらかじめコンテンツ領域のサイズを確保し、読み込みによるズレを防ぐことが重要です。
例えば、表示前にプレースホルダーで領域を確保し、遅延読み込みで初期描画をブロックしない構成にします。特に、ウィジェットはiframeに隔離し、sandboxで親DOMへの干渉を抑え、document.writeなどの同期タグを廃止するのが有効です。
動的DOM操作の見直し
JavaScriptによるDOM操作で要素の挿入や移動を行うと、既存のレイアウトが崩れることも少なくありません。
動的DOM操作に伴うレイアウト崩れを防ぐためには、以下の対策が有効です。
- 動的に生成する要素の高さ・幅を事前に想定しておく
- プレースホルダーを配置してスペースを確保
- DOM操作の実行タイミングを初期描画後に遅らせる
上記の徹底により、動的更新によるレイアウトシフトを最小化し、CLSの安定化と機能追加・非同期読込を両立できます。
アニメーションの最適化
アニメーションを使用する際は、以下の最適化がCLSの悪化に効果的です。
- transformプロパティの使用：topやrightなどの位置変更プロパティはレイアウト再計算を伴うため、代わりにtransform: translate() を使用
- アニメーション対象要素のサイズ・位置の固定：アニメーションを適用する要素には、事前に明確なサイズと位置を設定
アニメーションの滑らかさを保ちつつ、CLSの発生を最小化できます。
CLS改善に役立つ測定ツール
CLSを改善する際は、現状のスコアを正確に把握し、原因を特定できるツールの活用が不可欠です。本章では、3つのGoogle公式ツールとそれぞれの使い方を紹介します。
PageSpeed Insights
PageSpeed Insights（PSI）は、Googleが提供する初心者向けのWebページの表示パフォーマンス診断・測定ツールです。CLSを含むコアウェブバイタルのスコアを色付きのグラフで簡単に確認できる機能と、具体的な改善点とその解決方法の提示機能を備えています。
PSIは、以下の手順に沿ってワンクリックで使用できます。
- PSIにアクセス
- 調べたいページのURLを入力し、分析をクリック
- モバイル・デスクトップごとのCLSスコアと具体的な改善案を確認
PSIは、ユーザー実データ（Chrome UXレポート）とラボデータの両方を確認できる点が特徴です。CLS改善の第一歩として現状を把握し、着手すべき施策を明確にしたい場合に有効です。
Lighthouse
Lighthouseは、Webサイトのパフォーマンスを詳細に診断するChromeの拡張機能です。コアウェブバイタルのスコア分析のほか、CLSの悪化原因を分析できます。
Lighthouseの使用手順は、以下のとおりです。
- Google Chromeで対象ページを開く
- 右クリック → 検証→Lighthouseタブを選択
- デバイス（モバイル・デスクトップ）を選択し、Analyze page loadをクリック
具体的なコード単位で問題の特定がしやすく、レイアウトシフトの発生フレームはトレース上で可視化され、どのコード変更が原因かを迅速に切り分けられます。
Google Search Console
Google Search Console（GSC）は、サイトパフォーマンスの総合的な改善に役立つWebサイト管理者向けの無料ツールです。Chrome UXレポートのデータをもとに、サイト全体のCLSを色分けされたグラフで視覚的に確認できます。
使用する際の基本的な流れは、以下のとおりです。
- GSCにログインし、自社サイトのURLを登録
- 左メニューページ エクスペリエンス→ウェブに関する主な指標をクリック
- モバイルもしくはPCのレポートをクリック
サイト全体のCLSを一括で把握できるため、問題の発見から改善後の効果測定まで、長期的なモニタリングに活用できます。そのため、特に大規模なサイトや複数ページにわたるレイアウト改善を行う場合に有効です。
CLS改善のコツ
CLSを改善する際は、単なる数値改善だけでなく、ユーザーファーストを意識することが重要です。また、運用体制の整備も欠かせません。本章では、実務で役立つCLS改善のコツを紹介します。
測定結果は実ユーザー環境を重視
CLSスコアを確認するために測定ツールを活用する際は、シミュレーション環境のデータ（ラボデータ）ではなく、実ユーザー環境（フィールドデータ）の結果を重視しましょう。
ラボデータでは、ユーザーの端末性能やネットワーク品質が反映されないため、実際にユーザーが感じる表示ズレを正確に把握できないためです。
そのため測定結果は、フィールドデータをもとに判断し、ラボデータで再現と修正を行う流れが基本です。
モバイルとパソコン両方の環境で確認
表示崩れや要素のズレは、画面サイズや表示倍率によって挙動が変わります。特にモバイル環境では、画像のリサイズや広告の表示位置が原因でパソコン環境よりも大きなズレが生じる傾向にあります。
そのため、CLSスコアをチェックする際は、モバイルとパソコンそれぞれの結果を見ることが重要です。
デザイナーと開発者で視覚崩れの共有
CLSを改善する際は、デザイナーと開発者の連携が重要です。
デザイナーが想定しているデザインと、実装後のDOM構造・レンダリングの動きにギャップがあると、レイアウトシフトが発生するからです。
そのため、以下の確認を共同で行いましょう。
- 初期表示時の高さ・幅の確保状況
- Lazy Loadによる画像表示タイミング
- テキストサイズやフォント適用時の挙動
FigmaやStorybookなどのUI設計ツールを活用し、定期的に視覚崩れをレビューすることで、CLSスコアの悪化を防止できます。
実装・運用時の課題解決アプローチ
改善施策の実装や運用時には、リソース不足や開発・デザイン・サイト運用チーム間の連携不足などの課題が生じるケースも少なくありません。
実装・運用時のリソースやチーム間の連携問題を解消するには、自動化ツールの導入が効果的です。例えば、Imgixのような自動の画像最適化ツールを導入することで、少ないリソースでも大規模なサイトをスムーズに運用できます。
ほかには、CSS命名や高さ指定の統一など、ワークフロー標準化を自動化するツールの導入も有効です。
また、良好なCLSを維持するためには、監視体制の構築が欠かせません。
例えば、GSCを用いてCLSが悪化しているURLの主な原因や推奨対策をチェックし、月次レポートとしてまとめるとよいでしょう。必要に応じてRUM（Real User Monitoring）やしきい値を併用すると、劣化の早期検知に役立ちます。
画像最適化プラットフォーム「Imgix」でCLS改善を効率化
出典：Imgix
CLSスコアが悪化する要因の一つが、画像サイズや読み込み処理によるレイアウトのズレです。
画像の最適化不足によるCLSスコアの悪化を効率的に解決したい場合は、画像最適化プラットフォーム「Imgix」をご検討ください。
Imgixは、Webサイト上の大量画像を最適化・CDN配信できるサービスです。CLS対策においては、以下のような強みがあります。
- ブラウザサイズに応じた自動リサイズによる表示崩れの防止
- srcset属性や<picture>タグを使ったレスポンシブ対応の画像生成
- 画像URLにクエリパラメータを追加するだけで加工・軽量化が可能
Imgixの大きな魅力は、自動の画像最適化機能です。例えば、画像のURLにパラメータを付与するだけで、必要なサイズに自動リサイズされた画像を配信できます。
大幅なコード変更を行わずに画像を最適化できるため、開発コストを抑えつつCLSの改善が期待できます。
手軽かつ効果的にCLSスコアを改善したい場合は、Imgixがおすすめです。
まとめ CLSを改善してWebサイトのSEO・UX向上を目指そう
CLSを改善すると画像や表示のズレを低減でき、ユーザーの誤操作や早期離脱の抑制につながります。その結果、UXとSEOが向上し、ビジネス成果の向上が期待できます。
さまざまな改善施策があるなかで、特に効果的なのが画像最適化です。
大規模運用では、画像最適化プラットフォーム「Imgix」を活用すると、自動最適化やCDN高速配信が可能となり、運用負荷を抑えつつCLSの安定化を実現できます。
今回の機会に本格的なCLS対策に着手し、SEOとUXの両立を実現しましょう。
画像最適化やCLSの改善に関するご相談は、Imgixまでお気軽にお問い合わせください。
