「CLSに関する問題」という警告がSearch ConsoleやPageSpeed Insightsに表示され、不安を感じていませんか？
CLS（Cumulative Layout Shift）はCore Web Vitalsのひとつで、ユーザーが快適にサイトを利用できるかどうかを測る重要な指標です。
この記事では、CLSとは何か、なぜSEOに影響するのかをわかりやすく整理しました。
さらに、CLSの発生原因やモバイル特有の注意点、PageSpeed InsightsやChrome DevToolsでの確認方法、そして具体的な改善手順まで解説します。
CLSとは？
CLS（Cumulative Layout Shift）の意味
CLSとは「Cumulative Layout Shift」の略で、日本語では累積レイアウトシフトと呼ばれます。
これはWebページの読み込み中に、要素が突然ズレたり動いたりする現象を数値化した指標です。
参考：Cumulative Layout Shift（CLS） | Articles | web.dev
Core Web Vitalsとの位置づけ
GoogleはWebの快適さを評価するために「Core Web Vitals（コアウェブバイタル）」という指標を導入しています。
CLSはその中の1つで、主に「視覚的な安定性」を測る役割を持っています。
例えば、記事を読んでいる途中に広告や画像が遅れて読み込まれ、テキストが下に押し出されてしまうケースがあります。
これが大きなレイアウトシフトで、ユーザー体験を大きく損ねてしまいます。
CLSスコアの基準（良好・改善が必要・不良の目安）
CLSにはスコアがあり、以下の基準で評価されます。
- 良好：0.1以下
- 改善が必要：0.1より大きく0.25以下
- 不良：0.25を超える
スコアが高いほどレイアウトのズレが多いことを意味し、SEOの評価にもマイナスになります。
そのため、CLSはサイト運営者にとって早急に解決すべき重要な課題といえます。
CLSスコアに含まれないケース
CLSは「予期せぬレイアウトのズレ」を対象とするため、すべての変化が加算されるわけではありません。
- ユーザー操作に伴う変化：クリックでメニューが展開するなど、予測できる動作は対象外です。
- 繰り返しアニメーション：スライドショーやカルーセルなど設計通りの動作は対象外です。
- 固定領域内での変化：広告枠や動画プレーヤーの中でコンテンツが切り替わる場合は対象外です。
このように、CLSが問題とするのはユーザー操作なしに突然起きるレイアウトのズレだけです。
CLSに関する問題の主な原因
画像や広告の読み込みによるズレ
画像や広告枠にサイズ指定がされていない場合、読み込み後に要素が押し出されレイアウトが崩れます。特に外部広告は動的に挿入されやすく、CLSの大きな要因となります。
フォントの切り替え
Webフォントの読み込みが遅れると、最初はシステムフォントで表示され、その後にフォントが切り替わって文字の位置が変化します。この切り替えもCLSを悪化させる原因です。
動的コンテンツの挿入
バナーやボタンなどがページ表示後に追加されると、既存のコンテンツが押し下げられてしまいます。特にモーダルやポップアップの実装が適切でないと、大きなシフトを引き起こします。
モバイルで起きやすい課題
画面が小さいモバイル環境では、わずかなズレでも大きく見えます。
さらに、タップ位置がずれることで誤操作につながりやすく、ユーザー体験を大きく損ないます。
PageSpeed InsightsでCLSを確認する方法
CLSの計測手順
PageSpeed Insightsに自社サイトのURLを入力すると、CLSを含むCore Web Vitalsの指標が表示されます。
スコアはモバイルとPCで分けて確認でき、モバイル環境で特に問題が見つかるケースが多くあります。
問題の発生箇所を見つけるポイント
CLSに関する警告が表示された場合は、どの要素がシフトを引き起こしているかを特定することが重要です。
レポートでは「大きなレイアウトシフトを発生させた要素」が具体的に示されるので、まずはそこを確認して改善対象を絞り込みます。
【応用編】Chrome DevToolsでCLSを確認する方法
CLSの原因をさらに正確に特定する方法は、Chromeの開発者ツールを使う方法です。
手順は次の通りです。
- Chromeでサイトを開き、右クリックから「検証」を選択します。
- DevToolsが表示されたら「Performance」タブをクリックします。
- 「記録して読み込み」ボタンを押してページをリロードし、パフォーマンスデータを取得します。
- レイアウトシフトが発生している場合、こちらの箇所にCLSのスコアが表示されます。（画像だと0.19）
- また、画像のレイアウトシフトの欄にカーソルを合わせると、どの要素でズレが発生したかハイライトされます。（注意点：ズレを発生させた原因ではなく、ズレてしまった要素です）
- 「レイアウトシフトの原因」をクリックすると、どの要素が原因でレイアウトのズレが発生したか特定できます。（こちらの要素の読み込みを改善することで、CLSのスコアを小さくすることができます。）
この方法を使うと、どのタイミングでどの要素がレイアウトシフトを引き起こしたのかを詳細に確認できます。
CLSの具体的な改善方法
画像・動画の改善
widthとheightを指定
画像や動画には必ずwidthとheightを指定し、読み込み後に枠が確保されるようにします。
これにより、実際のコンテンツが表示されたときに周囲の要素が押し出されるのを防げます。
アスペクト比を保持
さらにレスポンシブ対応を行う場合は、アスペクト比を保持することが重要です。
アスペクト比を指定しておくと、ブラウザは実際の画像が読み込まれる前に表示領域を確保できます。
そのため、読み込み完了後にコンテンツが突然広がってページ全体がズレるといった問題を避けられます。
例えば、16:9の画像であれば「width=800」「height=450」といった比率情報を指定します。加えて、CSSのaspect-ratioプロパティを使う方法も有効です。
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
こうした工夫により、CLSの発生を大幅に抑えることができます。
フォントの改善
Webフォントを使用する際は、font-displayをswapに設定することで表示切り替え時のズレを軽減できます。さらに事前読み込み（preload）を活用すれば表示が安定します。
これだけで、フォント由来のCLSは大幅に減らせます。
font-displayを設定する
@font-faceでfont-display: swapを指定すると、まずはフォールバックのフォントを表示し、後からWebフォントに置き換えられます。
文字が一度見えない状態（FOIT）を避け、ズレを軽減できます。
@font-face {
font-family: "MyFont";
src: url("/fonts/MyFont.woff2") format("woff2");
font-display: swap;
}
フォントを事前に読み込む
重要なフォントはpreloadを使うと、読み込みが早くなり表示が安定します。
<link rel="preload" as="font" href="/fonts/MyFont.woff2" type="font/woff2" crossorigin>
広告や埋め込み要素の改善
広告や動画などの外部コンテンツは、読み込みが遅れると周囲の要素を押し下げてCLSが発生します。これを防ぐには「最初に枠を確保しておく」ことが大切です。
広告枠の例
<div class="ad-slot"></div>
<style>
.ad-slot {
width: 300px;
height: 250px; /* 先に固定サイズを確保 */
background: #f0f0f0; /* 読み込み前のプレースホルダー */
}
</style>
動画やSNS埋め込みの例
<div class="video-wrap">
<iframe src="https://www.youtube.com/embed/xxxx" title="video"></iframe>
</div>
<style>
.video-wrap {
aspect-ratio: 16 / 9; /* 比率を固定して枠を確保 */
width: 100%;
}
.video-wrap iframe {
width: 100%;
height: 100%;
border: 0;
}
</style>
モバイル改善の注意点
モバイルは画面が狭く、読み込みや操作環境もPCと異なります。
そのためCLSが発生すると体感的な影響が大きく、誤操作にもつながりやすいのが特徴です。
- 狭い画面では小さなズレも目立つ
- 指タップは誤操作につながりやすい
- 回線遅延でCLSが悪化しやすい
- 固定ボタンやバナーはCLSの原因になりやすい
わずかなズレが大きく見える
PCでは横に余白があるためズレが分散しますが、モバイルは縦に要素が積み重なるため、小さなシフトでも画面全体が大きく動いたように感じます。
タップ操作の誤クリックを防ぐ
指で操作するモバイルは、わずかな位置の変化が誤タップに直結します。ボタンやリンクには余白を確保し、CLSで位置が多少動いても誤操作が起きにくい設計が必要です。
通信速度の影響を考慮する
モバイル回線は速度や安定性が一定でないため、広告や画像が遅れて表示されやすいです。枠を先に確保しておけば、遅延による押し下げを防げます。
固定UIやバナーに注意する
モバイルサイトによくある画面下部の固定CTAボタンやフローティングバナーは、基本的に重ねて表示されるためCLSの原因にはなりません。
ただし、表示時に本文を押し下げるような実装や、後から余白を追加する実装をするとCLSが発生します。
安全に実装するには、最初から余白を確保するか、transformなどを使って重ねる形で表示させることが重要です。
まとめ
CLSはCore Web Vitalsの中でも、ユーザー体験に直結する重要な指標です。画像やフォント、広告やモバイルUIなど、身近な要素が原因で発生しやすく、放置するとSEO評価にも悪影響を与えます。
改善の基本は「枠を先に確保する」「予期せぬレイアウト変更を避ける」ことです。PageSpeed InsightsやChrome DevToolsで発生箇所を確認し、コードレベルで小さな修正を積み重ねることで、CLSスコアは着実に改善できます。
さらに、サイト全体のパフォーマンスを底上げするには、CMSの選び方も大切です。ヘッドレスCMSを活用すれば、柔軟なフロントエンド設計が可能になり、CLSを含む表示速度の最適化がしやすくなります。特にヘッドレスCMS「BERYL」は、SEOと表示パフォーマンスを両立させたいサイト運営者におすすめです。
記事をシェアする
記事をシェアする
記事をシェアする
記事をシェアする
記事をシェアする
