CLS（Cumulative Layout Shift）は「累積レイアウトシフト」という意味で、Webページの視覚的な安定性を測る指標です。

このページではCLSの改善の施策をわかりやすく解説します。

CLSの数値を低下させる主な要因

CLS数値に影響する要素を上記の表にまとめています。

こちらを理解しながら、下記の改善施策をご覧頂けたらと思います。

参考記事：「CLSに関する問題0.1超」の原因と改善方法

CLSの測定方法と分析ツール

CLSの計測方法についてご紹介していきます。

基本的にはPageSpeed Insights、lighthouse、サーチコンソールを活用する方法があります。

WEBサイトの表示速度を計測する方法でも詳しく説明しています。

PageSpeed Insightsの計測方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

計測されると下記の画像のような表示となりCLSの計測結果も表示されます。

また、更に下部のパフォーマンス指標の箇所へいくと「レイアウトシフトの原因」といった項目もあり、ここでも詳しい状況の確認が取れます。

PageSpeed Insightsでの計測の特徴は、下記のような点が挙げられます。

• URL入力だけで簡単に確認できる
• 1度の計測でモバイル・PC両方簡単に確認できる
• 実際の利用環境での計測値になる
• Chromeユーザーの実測値を集計
• 改善ポイントなどが詳しく出てくる

特に実際の利用環境での計測値になる。という点はしっかり覚えておきましょう。

利用環境というのは、インターネット環境なども影響するためサイト以外の環境が影響するということになります。

ですので、開発環境以外でどう評価されるかなど確認する上でも良いツールとなります。

Lighthouseの計測方法

開発者向けのより詳細な分析には、Lighthouseがおすすめです。

Lighthouseの計測方法として下記の手順に沿って計測ができます。

1. Chromeで計測したいページを開く
2. 右クリックして「検証」をクリックし下記の画像の画面を開きます
3. 「Lighthouse」タブをクリック
4. 測定条件を設定する
5. Analyze page loadをクリックして計測開始

上記の手順に沿って計測をスタートさせると、下記の画像のような計測結果の画面に切り替わります。

更に詳しく解析したい場合は、レンダリングの機能の「レイアウトシフト領域」にチェックを入れてページを読み込むことで、レイアウトシフトした場所が表示されます。

読み込み中にレイアウトシフトした場所は読み込まれる際に薄い青い枠でシフト領域を表示してくれます。

読み込みが終わると青い枠は消えます。

一瞬なので見にくい部分もありますが、レイアウトシフトしている、していないも目視で確認することができます。

lighthouseの計測の特徴をまとめると下記となります。

lighthouseでの計測の特徴

• 開発環境での計測値になる
• 他の影響を受けないので常に同条件で計測が可能

開発環境での計測となるのが特徴です。（回線速度などその他の影響を受けない）

ページを構築する際の表示速度の確認などに最適となります。

Search Console（サーチコンソール）の計測方法

Search Consoleにある「ウェブに関する主な指標」レポートでもサイト全体のCLSの状況を把握できます。

下記の手順に沿って確認ができます。

1. ウェブに関する主な指標の箇所をクリック
2. PC、モバイルのどちらかを選択
3. 不良、改善が必要、良好の箇所にそれぞれチェックを入れておく
4. 不良や改善が必要な場合は、CLSに関する問題が表示される

ウェブに関する主な指標＞レポート（モバイルorPC）の順にクリックすると下記の画面になります。

不良や改善が必要な箇所がある場合は、下部に問題の内容が表示されます。

CLSに関する問題の箇所をクリックすると、問題になっているURLが表示されます。

問題箇所を修正後に下記の修正を検証のボタンを押すと、サーチコンソール側で28日間の監視が始まり問題がなければ問題の表示が解消されます。

Search Console（サーチコンソール）での計測の特徴

• 問題がある場合は、対象となるURLが発見できる
• 修正後、google側に検証を依頼できる
• 細かい詳細までは出ない

マーケティング担当の方が簡易的に原因箇所をチェックする場合や、修正後のリクエストをgoogleに送りたい場合の利用におすすめ。

CLS数値の算出方法

CLSは「影響範囲×移動距離」で計算されます。

CLS計算式

CLS = Impact Fraction（影響範囲） × Distance Fraction（移動距離）

• Impact Fraction：レイアウトシフトの影響を受けたビューポート領域の割合（0〜1）
• Distance Fraction：要素が移動した距離とビューポート高さの比率（0〜1）

例えば、画像読み込み時にテキストがビューポートの50%の領域で下に25%移動した場合、0.5×0.25=0.125となります。

ページ内のすべてのレイアウトシフトを合算した値がCLSスコアです。

0.1以下が良好、0.25以上が不良と判定されます。

画像のwidth/height属性の設定や、Webフォントの最適化で改善できます。視覚的な安定性を保つことで、ユーザー体験が大きく向上します。

具体例

画像読み込み前：テキストがビューポートの50%を占める
画像読み込み後：テキストが下に25%移動
→ CLS = 0.5（影響範囲） × 0.25（移動距離） = 0.125

CLSの計算の仕組みや内容を把握したい方は「CLSとは」の記事をご覧ください。

CLSを改善させる6つの方法

CLSを改善させる方法を解説していきます。

1. 画像と動画のサイズ指定
2. 広告や埋め込みタグ表示領域の幅を確保する
3. Webフォントによるズレを抑制
4. 動的コンテンツの最適化
5. アニメーションとトランジションの最適化
6. ファーストビュー要素が後から表示されるのを避ける

1. 画像と動画のサイズ指定

画像と動画のサイズ指定をしておかないと、読み込み時にスペースが確保されず、表示後に他の要素が押し下げられてレイアウトシフトが発生しCLSの数値悪化に繋がります。

幅と高さ、またはアスペクト比を設定することで表示領域が読み込み時点で確保され、読み込み後もレイアウトのずれがなくなり、ユーザーの誤クリック防止やSEO評価の改善につながります。

具体的には下記のような施策を実施していくと良いでしょう。

画像や動画にwidthとheight属性を指定する

HTMLの<img>タグと<video>タグには、必ずwidthとheight属性を指定しましょう。

下記のソースを参考にしてみてください。

画像のwidthとheight属性の指定

下記は画像のソース例となります。

<img src="example.jpg" alt="説明文" width="600" height="400">

また、レスポンシブに対応するケースも多くあるかと思います。

この場合、CSSのアスペクト比を使用して領域を確保するようにしましょう。

画像のCSSのタグ例

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

srcset属性を使用した場合の例

異なるデバイスサイズに対応するため、srcset属性を使用する場合も、基本的なwidth/height属性を指定することで、ブラウザが適切な領域を確保できます。

<img src="image-800.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
     width="800" height="600"
     alt="説明文">

動画のwidthとheight属性の指定

また、下記に関しては動画タグの事例となります。

<video src="example.mp4" width="800" height="450" controls></video>

参考記事：レスポンシブ対応のCLS改善方法を解説

2. 広告や埋め込みタグ表示領域の幅を確保する

広告やiframeなどの埋め込みタグもCLSの数値に関わる要因の一つです。

特に、遅延読み込みされる広告や、サイズが可変の広告があるはレイアウトシフトが起きてしまうため、下記の対策を考えましょう。

広告用スペースの事前確保

広告が表示される領域を事前に確保することで、レイアウトシフトを防げます。

<div style="width: 300px; height: 250px; background:#f5f5f5;">
  <!-- 広告が後から入る -->
</div>

このようにすることで、広告未表示の状態でも「空白スペース」が確保されCLSが発生せずに済みます。

また、広告配置についても影響が出るケースがあります。

ページ上部への広告配置は、ページ全体のレイアウトに大きな影響を与える可能性もあり、可能な限り避けるか十分な配慮が必要です。

代案として、サイドバーやコンテンツ間など影響のでない場所へ配置するなど検討してみると良いでしょう。

SNSや動画埋め込みの場合

SNSの投稿タグや動画埋め込みタグなどを使用する場合は、iframeをラッパーで囲い、比率を固定するようにしましょう。

下記ソース例となります。

.embed-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 の比率 */
  height: 0;
}
.embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. Webフォントによるズレを抑制

Webフォントの読み込みは、FOIT（不可視テキスト）やFOUT（スタイル未適用テキスト）という現象によりCLSの悪化原因となります。

FOUT（スタイル未適用テキスト）は先に代替えのフォントが表示され、Webフォント適用時に字幅・行高が変わり押し下げが発生することでCLSの悪化に繋がります。

FOIT（不可視テキスト）はWebフォント読み込みまで文字は表示されず、後から表示されることでレイアウトが動くため、CLSの悪化に繋がります。

下記に改善方法を紹介していきます。

Webフォントを使用しない

一番理想的な方法としてはWebフォントを使用しない。ということがCLSの数値という面では理想的です。

特にフォントや見た目にこだわらず、CLSや表示速度などのユーザーエクスペリエンス（UX）を重視する場合は、この方法が一番数値もよくなるのでおすすめです。

代替フォントの高さや幅を合わせる（おすすめ）

FOUTや、FOITにせよ、代替えフォント（システムフォント）のサイズを利用するWebフォントのサイズに合わせておくことで、ずれが発生せずにCLSの数値も改善できます。

方法としては下記のような方法があります。

方法1: フォントのメトリクス（高さや幅）調整

FOUTの場合は、CSSのfont-familyで代替フォントを選ぶときに、ウェブフォントとメトリクス（高さや幅）が近いフォントを選ぶという方法がおすすめです。

body {
  font-family: "Roboto", "Arial", sans-serif;
}

例えば上記のソース例だと、Google FontsのRobotoが読み込まれるまで、Arialが代替フォントとして使われます。

RobotoとArialのメトリクスが近いため、切り替わっても行間や段落がほとんど変わらないため、CLSの改善に繋がります。

方法2: CSS で行間・文字サイズを微調整

ウェブフォントと代替フォントのメトリクス差を補正するために、line-heightやletter-spacingを調整する方法です。

この方法であれば代替えフォントとウェブフォントのメトリクスが近くなくても対応ができます。

body {
  font-family: "Roboto", "Arial", sans-serif;
  line-height: 1.5; /* 高さの安定化 */
  letter-spacing: 0.02em; /* 文字幅の調整 */
}

FOUT、FOITどちらの場合でも対応ができる方法です。

4. 動的コンテンツの最適化

JavaScriptの使い方によっては動的に挿入されるコンテンツがCLSの原因となる場合があります。

JavaScriptの処理に時間がかかり、その分後から表示されてズレが生じるということが多いです。

例えば、APIでデータ取得した要素がずれて表示されたり、ハイドレーションなどでおきるレイアウトシフトなどがあります。

下記のような方法で対策を行っていきましょう。

基本的には領域だけ確保しておく

上記で説明している、画像や埋め込みタグの場合と同様に、まずは高さや幅の領域をはじめから確保しておくということです。

CLSは表示のずれを計算されてしまう仕組みなので、初めから領域を確保しておけばCLSのズレはおきません。

方法として、CSSやwidthとheight属性を使って対策する方法があります。

ソース例

◻️HTMLはdivタグなどで囲う
<div id="box"></div>

◻️CSSで幅と高さを確保（px単位を忘れない）
const box = document.getElementById("box");

box.style.width = "200px";
box.style.height = "150px";

console.log("CSSで領域を確保しました:", box.style.width, box.style.height);

5. アニメーションとトランジションの最適化

CSSアニメーションも、適切に実装しないとレイアウトシフトを引き起こします。

特に下記のような項目を最適化していくことで、CLS数値を改善できます。

Transformプロパティの使用

CSSでtop/left/right/bottomなどといった値はレイアウト（位置計算）に関わるプロパティとなってしまいCLSの数値に影響が出てしまいます。

そのため、回避策としてtransformプロパティを使用して作成するようにしましょう。

こうすることでCLS数値への影響を防げます。

/* 悪い例 */
.element {
  top: 100px;
  left: 100px;
  transition: top 0.3s, left 0.3s;
}

/* 良い例 */
.element {
  transform: translate(100px, 100px);
  transition: transform 0.3s;
}

下記はtransformプロパティの利用できる値（推奨）になります。

また、下記の値はアニメーションとしては非推奨の値となります。

• top / right / bottom / left での移動アニメーション
• width / height / margin / padding / max-height など寸法や間隔のアニメーション

Overlayはビューポート基準（position: fixed）で重ねるため、通常レイアウトを押し下げません。

このような活用方法はレイアウトシフト（CLS）は発生しないため、必要に応じて使ってみてください。

6.ファーストビュー要素が後から表示されるのを避ける

ファーストビュー要素が後から表示されてしまう場合、表示された分の面積がレイアウトシフトが発生します。

これらの対策として下記の2点の方法を実施してあげましょう。

• 初めから高さ（height）を指定してあげる
• ファーストビュー以外のコンテンツを遅延読み込みさせる

特に遅延読み込みの要素に関してはLCP改善でも活用される方法で「遅延読み込みとは」の記事も参考にしてみてください。

7.自動ローテーションの表示を避ける

ファーストビューにローテーションバナーを使用している場合、ローテーションバナーの移動がレイアウトシフトの判定を受けます。

※ファーストビュー以外の自動ローテーションは判定は受けません。

対策の方法としては下記があります。

手動のローテーションに切り替える

CLSの判定が終わる前にローテーションバナーが移動してしまう場合にCLS判定されることなります。

なので、CLS判定が終わってから移動、もしくは自動で移動してしまわなければCLS判定に含まれないということなります。

そのため自動ローテーションではなく、手動ローテーションとなる仕組みにしておくことで回避できます。

CLSの6つの改善施策まとめ

CLS改善は一度実装すれば終わりではなく、新しいコンテンツや機能追加の際も常に意識し続ける必要があります。

LandingHubのような専門ツールを活用することで、技術的な複雑さを軽減しながら効率的な改善が可能になります。

ユーザーファーストの視点を持ち、データに基づいた継続的な改善を行うことで、競合他社との差別化を図り、長期的な事業成長につなげていきましょう。