CLS (Cumulative Layout Shift)とは？｜SEO関連用語集

2025年10月28日

読み方: シーエルエス / キュムラティブレイアウトシフト

概要

CLS（Cumulative Layout Shift）とは、ページ読み込み中に発生する予期しないレイアウトのズレを測定する、Core Web Vitalsの主要指標です。

詳細説明

CLS（Cumulative Layout Shift）は、ページ読み込み中に視覚的な安定性を測定する指標で、予期しないレイアウトのズレ（シフト）の累積スコアを計算します。例えば、読もうとしていたテキストが突然下に移動したり、クリックしようとしたボタンの位置がずれて誤タップしてしまったりする現象を数値化します。Googleは2020年にCLSをCore Web Vitalsの1つとして導入し、2021年6月から検索順位の要因として使用しています。良好なユーザー体験のためには、CLSは0.1以下であることが推奨されています。画像やiframeのサイズ指定、動的コンテンツの適切な配置などで改善できます。

重要性

CLSが重要な理由は以下の通りです。

Core Web Vitalsの主要指標として、検索順位に直接影響する
ユーザーの誤操作やストレスに直結し、離脱率に影響する
モバイルでの広告表示などで特に問題になりやすい
ユーザー体験の質を定量的に評価できる指標である
CLSが高いと、ブランドイメージにも悪影響を与える

具体例・実践方法

CLSの改善方法

CLSの測定方法

PageSpeed Insights
Chrome DevToolsのPerformanceタブ
Web Vitals Chrome拡張機能
Google Search ConsoleのCore Web Vitalsレポート

CLSの評価基準

良好（Good）: 0.1以下 ✅
改善が必要（Needs Improvement）: 0.1〜0.25 ⚠️
不良（Poor）: 0.25超 ❌

CLSが発生する主な原因

サイズ未指定の画像や動画
動的に挿入される広告やembed
Webフォントの読み込み（FOIT/FOUT）
DOMに要素を動的に追加する操作
アニメーションの不適切な使用

CLS改善の具体的施策

a. 画像・動画・iframeのサイズ指定

b. 広告・埋め込みコンテンツの領域確保

c. Webフォントの最適化

   /* FOUT（Flash of Unstyled Text）の最小化 -->
   @font-face {
     font-family: 'CustomFont';
     src: url('font.woff2') format('woff2');
     font-display: swap; /* またはoptional */
   }

   /* フォールバックフォントのサイズ調整 */
   body {
     font-family: 'CustomFont', Arial, sans-serif;
     font-size-adjust: 0.5;
   }

d. 動的コンテンツの適切な挿入

   // 悪い例: 既存コンテンツの上に挿入
   document.body.insertBefore(newElement, firstElement);

   // 良い例: ユーザーの操作領域外に挿入、またはスペースを確保
   const container = document.getElementById('dynamic-content');
   container.style.minHeight = '200px'; // 事前にスペース確保
   container.appendChild(newElement);

e. アニメーションの最適化

   /* transformとopacityのみを使用 -->
   .element {
     /* 悪い例 */
     transition: height 0.3s;

     /* 良い例 */
     transition: transform 0.3s, opacity 0.3s;
   }

   /* レイアウトシフトを引き起こさないアニメーション */
   @keyframes slideIn {
     from {
       transform: translateY(-100%);
       opacity: 0;
     }
     to {
       transform: translateY(0);
       opacity: 1;
     }
   }

f. content-visibility の活用

   /* オフスクリーンコンテンツのレンダリング遅延 */
   .below-fold-section {
     content-visibility: auto;
     contain-intrinsic-size: 0 500px; /* 概算の高さを指定 */
   }

WordPress でのCLS改善

画像にwidth/height属性を自動追加するプラグイン
広告プラグインの設定で固定サイズを指定
テーマのカスタマイズでフォント読み込みを最適化

注意点・補足

CLSを改善する際の注意点は以下の通りです。

ユーザー操作に応じたレイアウト変更（ドロップダウンメニュー展開など）はCLSに含まれない
500ミリ秒以内の連続したシフトは1つのセッションとしてカウントされる
ラボデータとフィールドデータで結果が異なる場合がある（実ユーザーの測定が重要）
広告収益とCLSのバランスを取る必要がある場合もある

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

CLS (Cumulative Layout Shift)とは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元