CLS

更新日: 2024年4月2日

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

柏崎剛

この記事の執筆者・監修者。当サイトの運営者で、目からウロコのSEO対策「真」常識の著者。主にSEOの考え方について、現場での経験から、どのようにGoogle検索エンジン対策を行えばよいかを具体的に解説できるよう努めています。再検索キーワード調査ツール、トピッククラスター構築ツール、共起語検索ツール、競合キーワード調査ツール、キーワード候補調査ツール、検索ボリューム調査ツール、見出し抽出ツール、サジェストキーワード取得ツール、MEO順位チェックツールの考案者であり開発者。更に詳しくはプロフィールをご覧ください。SEO対策のお仕事に関するご依頼・お申し込みは、こちらのフォームから承っております。