CLS メソッドは、ページ レンダリング サイクルのライフサイクル全体を通じて Web ページ上のコンテンツがどの程度移動するかを測定するために、つまり、Web サイトの外観がどの程度安定しているかを測定するために使用されます。.
メニュー項目をクリックした際に誤って広告をクリックしてしまい、サードパーティのウェブサイトに飛ばされてしまうことや、操作中にウェブページのコンテンツが切り替わってしまうことの苛立ちを、人生で何度も目の当たりにしたことがあるでしょう。もちろん、レイアウトのずれはユーザーにとっても煩わしいものです。しかし、ウェブパブリッシャーにとっても、レイアウトのずれによる誤クリックによる直帰率の上昇や広告ポリシー違反など、より深刻な問題を引き起こす可能性があります。.
さらに、GoogleはCLSを3つの「 Core Web Vitals 」の1つとみなしているため、CLSスコアが低いとCore Web Vitals全体のスコアに悪影響を与え、ユーザーに不合格の評価が下される可能性があります。Googleの検索アルゴリズムの最近の変更により、Core Web Vitals評価で合格点を取得したサイトは、検索結果でより有利な順位に表示されるようになりました。
CLS スコアの向上、全体的なユーザー エクスペリエンスの向上、Google ランキングの向上の可能性、Google のオーガニック トラフィックの増加の間には直接的な相関関係があります。.
累積レイアウトシフトはどのように測定されますか?
ビューポートに表示されている要素が何らかの理由で開始位置を移動した場合、その移動は記録されます。したがって、開始位置が変更された場合は不安定とみなされます。レイアウトシフトを作成できるのは、ページ上で何らかの事象が発生して表示されている要素がページ上の別の場所に移動した場合のみであり、新しい要素や既存の要素が拡大または縮小した場合はレイアウトシフトを作成できないことに注意してください。.
CLSスコアは、レイアウトのずれを追跡するために設計された2つの具体的な指標、すなわち影響度と距離度で構成されています。これら2つの指標はCLSスコアを決定するために使用されます。影響度は、元の要素とずれを2つのフレーム間のビューポートの合計表示領域と比較できる比率として組み合わせることで、不安定な要素が2つのフレーム間のビューポートにどの程度影響を与えるかを測定します。水平または垂直に移動する不安定な要素の場合、距離度は、その要素がビューポート内（水平または垂直）を移動した距離を表します。.
CLS スコアを向上させるにはどうすればよいでしょうか?
不安定な要素/シフト動作を減らすための推奨事項をいくつか示します。
- サイトの構造によっては、ウェブページごとに異なるCLSスコアが付与される場合があります。例えば、記事ページのCLSスコアはホームページよりも高くなる場合があります。そのため、まずはサイトの主要なページテンプレートのCLSスコアを測定することが重要です。.
- 画像と動画には必ず幅と高さの属性が必要です。アスペクト比を定義したレスポンシブな画像を作成しましょう。.
- あるいは、CSSのアスペクト比ボックスを使用して、要素に必要なスペースを確保することもできます。これにより、読み込みプロセス中にブラウザがドキュメントに適切な量のスペースを割り当てることが保証されます。.
- 配置が適切に最適化されていない場合、広告配信はレイアウトのシフトに大きく影響する可能性があります。.
- ユーザーの操作に応じてレイアウトが変更される場合を除き、既に読み込まれたコンテンツの上に動的なコンテンツを挿入しないでください。.
サイト最適化サービスで WordPress のパフォーマンスを高速化しましょう!
