【解決】 CLS Issue の解決方法と原因 | Google Core Web Vitals トラブルシューティング

ウェブサイトを運営する上で、Google Core Web Vitalsは検索エンジンの評価を左右する重要な要素です。中でも「CLS Issue」（累積レイアウトシフト）は、ユーザー体験を著しく損ね、SEOパフォーマンスを低下させる原因となります。しかし、ご安心ください。この記事では、CLS Issueの概要から、Windowsユーザーが今すぐ試せる最も速い解決策、そして恒久的な再発防止策までを、具体的かつ分かりやすく解説します。

1 1. CLS Issue とは？（概要と緊急度）
- 1.1 CLSがもたらす影響と緊急度
2 2. 【最速】今すぐ試すべき解決策
- 2.1 解決策1：画像のサイズ属性を指定する
  - 2.1.1 ステップ1: 問題箇所の特定とHTMLファイルの編集準備
  - 2.1.2 ステップ2: 画像のHTMLコードを修正する
3 3. CLS Issue が発生する主要な原因（複数）
4 4. Google Core Web Vitalsで恒久的に再発を防ぐには

1. CLS Issue とは？（概要と緊急度）

CLS (Cumulative Layout Shift) は、ウェブページが読み込まれる際に、表示されているコンテンツが予期せず移動してしまう現象を指します。例えば、テキストを読んでいる途中で画像や広告が遅れてロードされ、突然コンテンツが下にずれてしまい、クリックしようとしたリンクを誤って押してしまう、といった経験はありませんか？これがCLSです。

CLSがもたらす影響と緊急度

ユーザー体験の悪化: 誤クリックやコンテンツの見失いなど、ユーザーにストレスを与えます。
SEO評価の低下: Google Core Web Vitalsの重要な指標の一つであり、CLSスコアが悪いと検索ランキングに悪影響を及ぼす可能性があります。
緊急度: サイトの収益性や集客に直結するため、非常に高いと言えます。特に画像や広告が多いサイトでは、早期の対応が求められます。

2. 【最速】今すぐ試すべき解決策

CLS Issueの最も一般的な原因は、画像や動画、広告などの要素が、ブラウザに表示されるまでそのための領域を確保していないことです。この問題を解決する最も速い方法は、画像要素にwidth（幅）とheight（高さ）属性を明示的に指定することです。

解決策1：画像のサイズ属性を指定する

この解決策により、ブラウザは画像が読み込まれる前に、あらかじめその画像分のスペースを確保できるようになります。これにより、画像が遅れて読み込まれても、ページのレイアウトがシフトするのを防ぐことができます。

ステップ1: 問題箇所の特定とHTMLファイルの編集準備

まずは、どの画像がCLSを引き起こしているかを確認し、そのHTMLファイルを編集する準備をしましょう。

Windows環境のGoogle Chromeなどのブラウザで、CLS Issueが発生しているウェブページを開きます。
F12キーを押して「開発者ツール」を開きます。
「Performance（パフォーマンス）」タブを選択し、記録ボタン（丸いアイコン）をクリックしてページの読み込みを記録します。
記録終了後、「Layout Shifts」のセクションで、どの要素がレイアウトシフトを引き起こしているかを確認します。
特定された要素が使われているウェブサイトのHTMLファイル（またはCMSのテンプレートファイルなど）を、Visual Studio Codeなどのテキストエディタで開く準備をします。

# Windows PowerShellまたはコマンドプロンプトで、ウェブサイトのHTMLファイルを編集するための準備
# Visual Studio Codeがインストールされていることを前提としています。

# 1. ウェブサイトのルートディレクトリに移動する例:
#    (お使いのウェブサイトのファイルがあるパスに置き換えてください)
cd C:\Users\YourUser\Documents\YourWebsiteProject

# 2. Visual Studio Codeで現在のディレクトリを開くコマンド:
#    これにより、プロジェクトファイルがVS Codeで編集可能になります。
code .

# 3. (代替) 特定のHTMLファイルを直接開くコマンド:
#    code C:\Users\YourUser\Documents\YourWebsiteProject\public\index.html

# 上記コマンドを実行後、VS Codeで該当のHTMLファイルを開き、以下の修正例を参考にコードを編集してください。

ステップ2: 画像のHTMLコードを修正する

ウェブサイトのHTMLファイル内で、CLSの原因となっている<img>タグを見つけ、widthとheight属性を追加または修正します。これらの値は、画像の実際のピクセルサイズに合わせるのが理想的です。

<!-- 修正前: widthとheightが指定されていない画像 -->
<img src="your-beautiful-image.jpg" alt="美しい風景">

<!-- 修正後: widthとheight属性を追加し、適切なスペースを予約 -->
<img src="your-beautiful-image.jpg" alt="美しい風景" width="1200" height="800">

<!-- さらに推奨: <picture>タグとsrcsetを活用し、レスポンシブ対応と同時にwidth/heightを指定 -->
<picture>
    <source srcset="your-image-large.webp 1200w, your-image-medium.webp 800w" sizes="(max-width: 600px) 480px, 800px" type="image/webp">
    <source srcset="your-image-large.jpg 1200w, your-image-medium.jpg 800w" sizes="(max-width: 600px) 480px, 800px" type="image/jpeg">
    <!-- タグには必ずwidthとheightを指定してください -->
    <img src="your-image-small.jpg" alt="美しい風景" loading="lazy" width="1200" height="800">
</picture>

ポイント: widthとheight属性は、CSSで指定する表示サイズではなく、画像の「本来の比率」をブラウザに伝えるためのものです。CSSで表示サイズを調整する場合は、max-width: 100%; height: auto;などを併用することで、レスポンシブデザインに対応しつつCLSを防ぐことができます。

3. CLS Issue が発生する主要な原因（複数）

CLS Issueは画像のサイズ未指定だけではありません。以下のような様々な要因で発生することがあります。

サイズ未指定の画像や動画: これが最も一般的で、上記で解説した通りです。
広告や埋め込みコンテンツ: 遅延ロードされる広告ブロックやYouTube動画、SNSの埋め込みコンテンツなどが、表示されるまで適切なスペースを確保しないために発生します。
動的に挿入されるコンテンツ: JavaScriptによって、既存のコンテンツの間に新しい要素（例: ポップアップ、通知バーなど）が挿入される際にレイアウトがずれることがあります。
Webフォントの読み込み: カスタムWebフォントが読み込まれるまでの間、ブラウザが代替フォントでテキストを表示し、Webフォントの読み込み完了後に切り替わる際に文字の幅や高さが変わり、レイアウトが変動することがあります（FOIT: Flash Of Invisible Text, FOUT: Flash Of Unstyled Text）。

4. Google Core Web Vitalsで恒久的に再発を防ぐには

一度CLSを修正しても、新しいコンテンツの追加やサイトの更新で再発する可能性があります。恒久的にCLS Issueを防ぎ、良好なCore Web Vitalsスコアを維持するためには、以下の対策を開発プロセスに組み込むことが重要です。

画像の最適化と領域確保

常に<img>タグにwidthとheight属性を指定する習慣をつけましょう。
CSSのaspect-ratioプロパティを活用し、画像コンテナの縦横比を事前に確保することも効果的です。
loading="lazy"属性を使用する場合でも、必ずwidthとheight属性を指定し、プレースホルダーなどで適切な領域を確保してください。
<picture>タグとsrcset属性を積極的に利用し、異なるデバイスや画面サイズに最適な画像を配信しつつ、各<img>要素にサイズ属性を指定しましょう。

広告や埋め込みコンテンツの扱い

広告や埋め込みコンテンツを配置する領域には、CSSでmin-heightやaspect-ratioプロパティを用いて、あらかじめ十分なスペースを予約しておきます。
コンテンツがロードされるまでは、シンプルなプレースホルダーを表示して視覚的な空白を埋めると良いでしょう。

Webフォントの最適化

CSSのfont-display: swap;プロパティを使用し、Webフォントの読み込み中もすぐに代替フォントでテキストを表示させ、FOITを防ぎます。
重要なWebフォントは<link rel="preload">タグで事前に読み込みを指示し、表示の遅延を最小限に抑えます。
代替フォントとWebフォントのフォントサイズや行間をできるだけ近づけ、切り替わり時のレイアウト変動を抑制します。

JavaScriptによるDOM操作の管理

JavaScriptでコンテンツを動的に挿入する場合は、既存のコンテンツのレイアウトに影響を与えないよう、挿入前にコンテナのサイズを確保したり、ユーザーの操作（クリックなど）をトリガーにして挿入したりするなど、タイミングを慎重に考慮しましょう。
可能であれば、挿入されるコンテンツ分のスペースをあらかじめCSSで確保しておくことが望ましいです。

定期的な監視とテスト

Google LighthouseやPageSpeed Insightsなどのツールを定期的に使用し、サイトのCLSスコアを監視しましょう。
サイトの更新や新機能の追加後には、必ずCore Web Vitalsのスコアを確認し、CLSの問題が発生していないかを検証するプロセスを確立することが重要です。

これらの対策を講じることで、CLS Issueの再発を防ぎ、ユーザーに快適な体験を提供し続けるだけでなく、Googleの検索エンジン評価を向上させ、サイトのパフォーマンスを最大限に引き出すことができるでしょう。一歩ずつ、確実に改善を進めていきましょう。