CLS | SEO対策研究室

CLS

更新日:

CLSとは

CLS(Cumulative Layout Shift)は、ページの読み込み中に発生するレイアウトの変動量を数値化したものです。
これは、ウェブページがどれだけ安定しているかを示す指標であり、ユーザー体験の質に直接影響します。

CLSの意義

  • ユーザー体験の向上
    ページ内の要素が予期せず動くことで、ユーザーが誤ってクリックするなどの不快な体験を与えることがあります。
    CLSはこのような体験を減少させることを目指します。
  • ウェブパフォーマンスの評価
    Googleは、CLSを含むCore Web Vitalsをウェブサイトのパフォーマンス評価の基準としています。
    これにより、検索ランキングにも影響を与えます。

CLSの計算方法

CLSスコアは、ページ上のすべてのレイアウトシフトのスコアを合計して計算されます。
各レイアウトシフトの影響を受けるビューポート内の面積の割合と、要素がどれだけ移動したかに基づいています。
スコアが低いほど、ページはより安定していると評価されます。

CLSの改善策

  • 画像や動画のサイズ指定
    ページ読み込み時にサイズが変わらないように、画像や動画には高さと幅を指定します。
  • フォントのフラッシュを防ぐ
    フォントの読み込みによるレイアウトシフトを防ぐため、フォントの表示を最適化します。
  • 広告や埋め込みフレームの安定性
    広告や埋め込みフレームに固定サイズを設定し、ページ内での動的な変更を最小限に抑えます。
  • CSSの使用
    CSSの特性を利用して、要素の変化を予測しやすくします。

CLSの目標値

  • 良好(Good)
    0.1未満
  • 改善が必要(Needs Improvement)
    0.1から0.25
  • 不十分(Poor)
    0.25以上

CLSの測定ツール

  • Google PageSpeed Insights
    ウェブページのURLを入力してCLSを含むコアウェブバイタルの分析結果を得られます。
  • Chrome DevTools
    ブラウザ内で直接CLSを測定し、レイアウトシフトを識別することができます。

CLSの改善は、ウェブサイトのユーザー体験を向上させるだけでなく、検索エンジンによる評価を高める上で重要です。
ページの安定性を確保することで、訪問者に快適な閲覧体験を提供しましょう。

この記事は役に立ちましたか?

送信ありがとうございます。

記事が気に入ったらシェアをお願いします!