【解決策】CLSに関する問題とは？主な原因から解決方法まで徹底解説

株式会社ＣＩＯ｜SEOマーケティング

現在、株式会社ＣＩＯでは、現役アフィリエイターが60分1万円のSEOセカンドオピニオンを毎月10社限定で実施しています。「SEOコンサルを依頼するほどではないけど、有識者からの意見は聞きたい…」という方は、ぜひお問い合わせくださいませ。
>>セカンドオピニオンの詳細はこちら


CLSに関する問題とは？

「CLS（Cumulative Layout Shift）」に関する問題は、ウェブサイトのユーザー体験やSEOパフォーマンスに直接的な影響を与える重要な要素です。CLSはウェブページの視覚的な安定性を測定する指標で、Googleが定めるコアウェブバイタルの1つです。

※コアウェブバイタルとは？
コアウェブバイタル（Core Web Vitals）は、Googleがウェブページのユーザー体験を評価するために定めた指標で、読み込み速度、インタラクティブ性、視覚的安定性の3つを中心に構成されています。具体的には、LCP（Largest Contentful Paint）は読み込みの速さを、FID（First Input Delay）は応答性を、CLS（Cumulative Layout Shift）はレイアウトの安定性を測定します。これらの指標はSEOランキングにも影響するものです。

CLSに関する主な問題

  1. 突然のレイアウトの変更

  2. フォントの読み込み遅延

  3. 動的に挿入されるコンテンツ

  4. 画像や広告のサイズが未定義

  5. ビデオや埋め込みコンテンツの未定義スペース

順番に見ていきましょう。

問題①：突然のレイアウトの変更

ウェブページの読み込み中に、コンテンツが突然移動することがあります。例えば、テキストを読んでいる最中に、遅れて画像や広告が表示され、テキストが押し下げられる現象です。特に、モバイルデバイスでは画面が小さいため、影響が顕著に現れます。

この問題を防ぐためには、画像や広告のサイズを事前に指定し、読み込み時にスペースを確保することが重要です。また、動的に挿入されるコンテンツのタイミングや位置を適切に管理し、既存のコンテンツを押し下げないように工夫する必要があります。

問題②：フォントの読み込み遅延

ウェブフォントの読み込みが遅れると、テキストが一時的にデフォルトのフォントで表示され、その後、指定したフォントに切り替わる際にレイアウトが変わることがあります。特に、フォントのサイズや字間が異なる場合、テキストの配置が大きく変わることがあります。

この問題を解決するためには、CSSのfont-displayプロパティを使用して、フォントの表示戦略を制御することが効果的です。例えば、font-display: swap;を指定することで、フォントが読み込まれるまでの間、代替フォントを表示し、読み込み完了後に速やかに指定したフォントに切り替えることができます。

問題③：動的に挿入されるコンテンツ

JavaScriptなどを使用して、ページ読み込み後に動的にコンテンツを挿入することがあります。例えば、広告バナーや通知バー、ポップアップメッセージなどがこれに該当します。特に、ユーザーがボタンをクリックしようとした瞬間に新しいコンテンツが挿入され、意図しない操作を行ってしまうことがあります。

この問題を防ぐためには、動的コンテンツの挿入前に、あらかじめその表示領域を確保しておくことが重要です。また、アニメーションやトランジションを使用して、コンテンツの挿入をユーザーに視覚的に知らせることで、突然のレイアウト変化による驚きを軽減できます。さらに、重要な操作エリアの近くには動的コンテンツを配置しないように設計することで、ユーザーの誤操作を防止できます。

問題④：画像や広告のサイズが未定義

HTMLやCSSで画像や広告のサイズが指定されていない場合、ブラウザは読み込み時にその領域を確保できず、読み込み完了後にレイアウトが変わることがあります。特に、ページの上部に大きな画像や広告が配置されている場合、その影響は顕著です。

この問題を解決するためには、画像や広告のwidthとheight属性を適切に設定し、ブラウザが読み込み前にその領域を確保できるようにすることが重要です。また、レスポンシブデザインを採用している場合でも、アスペクト比を維持するためのスペースを確保することで、レイアウトの安定性を保つことができます。

問題⑤：ビデオや埋め込みコンテンツの未定義スペース

動画や埋め込みコンテンツ（例えば、YouTube動画や外部のウィジェットなど）のサイズが事前に定義されていない場合、これらのコンテンツが読み込まれた際にレイアウトがシフトすることがあります。

この問題を防ぐためには、埋め込みコンテンツの領域をあらかじめ確保することが大切です。具体的には、iframeタグや埋め込みコードを使用する際に、高さ（height）と幅（width）のプロパティを正確に指定することで、レイアウトの変化を抑えることが可能です。

さらに、レスポンシブデザインを採用する場合は、アスペクト比を維持するためのラッパー要素を使用し、埋め込みコンテンツがデバイスの画面サイズに応じて自動的に調整されるように設計します。

例えば、YouTube動画を埋め込む場合は、以下のようなスタイルを適用することでアスペクト比を維持できます。

.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
  height: 0;
}

.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

埋め込みコンテンツが動的にロードされる場合でも、プレースホルダーを設定することが有効です。読み込み中に表示される仮の要素を配置しておけば、ユーザーがレイアウトの安定性を感じられるようになります。

CLSに関する問題の解決方法

  1. 画像や広告のサイズを事前に指定し、読み込み時にスペースを確保する。

  2. フォントの読み込み戦略を最適化し、font-display: swap;を使用する。

  3. 動的コンテンツの挿入時に事前にスペースを確保し、アニメーションを活用する。

  4. 埋め込みコンテンツのアスペクト比を指定し、レイアウトシフトを防ぐ。

  5. プレースホルダーやスケルトンスクリーンを適切に設定し、読み込み中の安定性を確保する。

順番に見ていきましょう。

解決策①：画像や広告のサイズを事前に指定する

ウェブページの読み込み時、画像や広告のサイズが未定義だと、コンテンツが突然移動し、ユーザー体験を損なう可能性があります。

この問題を防ぐためには、HTMLやCSSで各要素の幅（width）と高さ（height）を明確に指定し、ブラウザが読み込み前に適切なスペースを確保できるようにすることが重要です。

例えば、画像を挿入する際には、<img>タグにwidthとheight属性を設定します。これにより、画像の読み込み前にブラウザが適切なスペースを確保し、他のコンテンツの位置が変わるのを防ぎます。同様に、広告や埋め込みコンテンツ（iframeなど）についても、サイズを事前に指定することで、レイアウトの安定性を保つことが可能です。

解決策②：フォントの読み込み戦略を最適化する

ウェブフォントの読み込みが遅延すると、テキストが一時的にデフォルトのフォントで表示され、その後、指定したフォントに切り替わる際にレイアウトが変わることがあります。

この問題を解決するためには、CSSのfont-displayプロパティを使用して、フォントの表示戦略を制御することが効果的です。例えば、font-display: swap;を指定することで、フォントが読み込まれるまでの間、代替フォントを表示し、読み込み完了後に速やかに指定したフォントに切り替えることができます。

また、フォントファイルのサイズを最適化し、必要な文字セットのみを含めることで、読み込み時間を短縮することも有効です。

解決策③：動的コンテンツの挿入を適切に管理する

JavaScriptなどを使用して、ページ読み込み後に動的にコンテンツを挿入することがあります。例えば、広告バナーや通知バー、ポップアップメッセージなどがこれに該当します。

この問題を防ぐためには、動的コンテンツの挿入前に、あらかじめその表示領域を確保しておくことが重要です。例えば、プレースホルダーを使用して、後から挿入されるコンテンツのスペースを事前に予約しておくことで、レイアウトのシフトを防ぐことができます。

また、アニメーションやトランジションを使用して、コンテンツの挿入をユーザーに視覚的に知らせることで、突然のレイアウト変化による驚きを軽減できます。

さらに、重要な操作エリアの近くには動的コンテンツを配置しないように設計することで、ユーザーの誤操作を防止できます。例えば、購入ボタンや送信ボタンの近くに動的な広告や通知を配置すると、ユーザーが誤ってそれらをクリックしてしまう可能性があるため、配置には注意が必要です。

解決策④：埋め込みコンテンツのアスペクト比を指定する

動画や埋め込みコンテンツ（例えば、YouTube動画や外部のウィジェットなど）のサイズが事前に定義されていない場合、読み込み時にレイアウトがシフトし、ユーザー体験に悪影響を及ぼします。

この問題を解決するには、アスペクト比を明確に指定することが重要です。例えば、埋め込み動画をレスポンシブ対応させる際には、以下のようなCSSを使用してスペースを確保します。

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9アスペクト比 */
  height: 0;
  overflow: hidden;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

さらに、埋め込みコンテンツを動的にロードする場合、プレースホルダーを使用してコンテンツが読み込まれる前に、見た目のスペースを確保することが推奨されます。また、埋め込みコンテンツを使用する際は、他の要素に与える影響を考慮し、必要以上に大きなスペースを割り当てないようにします。

解決策⑤：プレースホルダーやスケルトンスクリーンを適切に設定する

コンテンツが遅れて表示される場合、プレースホルダーやスケルトンスクリーンを活用することで、レイアウトの安定性を向上させることができます。

例えば、画像や動画が遅延ロードされる場合、読み込み中に背景色やシンプルな図形を表示することで、ユーザーに視覚的な安心感を与えることができます。また、動的コンテンツの場合は、スケルトンスクリーンを使用して、コンテンツがどのように表示されるかのヒントを示すことが有効です。

スケルトンスクリーンを設計する際は、シンプルなデザインを心がけ、ユーザーの注意を必要以上に引かないようにします。例えば、読み込み中のテキスト部分には灰色の長方形を表示し、画像には薄いグレーのボックスを使用するのが一般的です。

＼ 10社限定でSEOスポットコンサルを実施中 ／

>>詳細ページはこちら

CLSに関する問題とは？：まとめ

CLS（Cumulative Layout Shift）は、ウェブページの読み込み時に発生するレイアウトの変化を測定する指標で、ユーザー体験やSEOに大きな影響を与えます。主な原因として、画像や広告のサイズが未定義であることや、フォントの読み込み遅延、さらに動的に挿入されるコンテンツが挙げられます。

これらの問題を解決するためには、サイズ指定やプレースホルダーの活用が効果的です。さらに、埋め込みコンテンツのアスペクト比を明確に設定することで、レイアウトの安定性を向上できます。

＼ 10社限定でSEOスポットコンサルを実施中 ／

>>詳細ページはこちら

いいなと思ったら応援しよう！