Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS)とは
Cumulative Layout Shift (CLS)の基礎知識
Cumulative Layout Shift (CLS)は、Core Web Vitals指標の1つであり、Google は基準を満たしていないサイトにペナルティを与えることができます。この指標では、表示されているコンテンツがビューポート内でどの程度移動したか、および影響を受けた要素の移動距離が測定されます。読み込み時間に基づいて結果を測定せず、サイトの視覚的な安定性を測定する計算するWebパフォーマンス指標です。
Cumulative Layout Shift (CLS)はみなさんも日常的に経験があるかもしれません。例えば、Webサイト上のボタンをクリックしたら、動いた経験はありませんか。 それはCumulative Layout Shift (CLS)が悪いサイトもしくページかもしれません。
Cumulative Layout Shift (CLS)の数字が悪いと、表示されている要素の位置やサイズが変更され、その周囲のコンテンツが移動してしまいます。 実際に読み込みがいつ完了するかわからないかもしれません。 こういったユーザー体験のほとんどは煩わしいだけなのですが、コンテンツが移動することにより、間違ったページにアクセスしたり、誤って間違った製品をカートに追加したり、時間を無駄にする可能性さえあります。そうなると、ユーザーは目的を達成することを、すぐに辞めてしまう可能性が高いです。
予期せぬレイアウトの変更はユーザー エクスペリエンスが低下する可能性があるため、Cumulative Layout Shift (CLS)を最小限に抑えることが重要です。
Cumulative Layout Shift (CLS)が低下する原因
ページの予期しないレイアウト変更が起こる原因は下記になります。
非同期でJavaScript と CSS が読み込まれると画像が移動し、画像のサイズが変更される
サイズが明示されていない画像や動画
サイズが明示されていない広告と埋め込み
ページの作成後に読み込まれるフォント（カスタムフォント）
動的に挿入されるコンテンツ
DOM を更新するためにネットワーク応答を待つ必要があるサードパーティ
一般的にリソースが非同期的に読み込まれたり、ページ上の既存のコンテンツの上側に DOM 要素が動的に追加されたりする場合に発生します。それぞれ解決方法がありますが、CLSも含めてCore Web Vitals指標に関して、開発段階では気づくことができなかったり、逆に開発環境では本番では起こらない遅延が発生したりする可能性もあります。テスト環境では余計なjsを読み込んでいて、本番では読み込まない仕様の場合もあります。
クライアント企業に対して、CLSを加味して制作すべきかどうかも説明することはほとんどありません（必要最低限は実施する前提である場合が多いとは思います、説明することでより煩雑になると考える制作サイドも多いでしょう）。 価格帯的に押し込まれた状態でSEOまで対応できる企業は少ないでしょう、さらに企業規模やフェーズによってはマーケティング判断で対応しない判断することもあるでしょう。あまり効果がない、too Muchすぎる対応であるという判断もあるでしょう。
予算や期間、プライオリティにも寄りますが、すべて最初から完璧に行うことは現実的ではないので、より良いレベルにするためにはアジャイルで改修を行うことが現実的かもしれません。
Cumulative Layout Shift (CLS)の計測方法
レイアウト シフト スコアはインパクト係数と距離係数により計算されます。
layout shift score = impact fraction（インパクト係数）× distance fraction（距離係数）
ユーザーがページを表示すると、時間の経過とともに多くのレイアウトシフトが発生します。次のレイアウトシフトが発生すると、新しいセッションウィンドウ[※1]が開始されます。 CLS は、最大 500 ミリ秒以内の複数のセッションウィンドウにわたるレイアウトシフト係数を平均することによって計算される単位のないスコアです。
Cumulative Layout Shiftの計算例
前のフレームと現在のフレームにおけるすべての不安定な要素の表示領域の合計が、ビューポートの総領域の一部として、現在のフレームのインパクト係数となります。
要素がビューポートの 50% を占め、その後さらに 25%分下方に移動する場合、インパクト係数は0.75になります。
インパクト係数 0.5+0.25=0.75
ビューポートの最大サイズは高さであり、不安定な要素はビューポートの高さの 25% 分移動したことになります。
距離係数 0.25
CLS スコアは「layout shift score = impact fraction（インパクト係数）× distance fraction（距離係数）」です。数字を当てはめると下記が算出されます。
レイアウトシフトスコア 0.75 X 0.25 = 0.1875
理想的なCumulative Layout Shift (CLS)のスコア
Googleによると、優れたユーザーエクスペリエンスを提供するために、CLS スコアが 0.1 以下にするように推奨されています。
良好なユーザー体験を提供するために、サイトは CLS スコアが 0.1 以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します
マーケティング活動において、Cumulative Layout Shift (CLS)どのような影響がありますか？
下記はLighthouse V10のパフォーマンス スコアのウエイトです。
FCP: 10%
SI: 10%
LCP: 25%
TTI:削除されました
TBT: 30%
CLS: 25%
Lighthouse V9では15%でしたが、V10 では TTI (Time to Interactive) が削除され、CLSが占めるスコアのウエイトが増加しました。Cumulative Layout Shift (CLS)は約25%のパフォーマンススコアを占めます。
また、Core Web Vitals のランキング要素の一部となっているため、その意味と仕組みを理解することが重要です。
Cumulative Layout Shift (CLS)の測定方法
Googleによると、ラボ測定を実施するためのツールが指定されたページについてレポートする際の CLS の値は、ユーザーが実際の環境で体験する値よりも小さくなる可能性があるようです。
ラボデータ
Chrome DevTools
Lighthouse
PageSpeed Insights
WebPageTest
フィールドデータ
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals Report)
web-vitals JavaScript
Cumulative Layout Shift (CLS)を向上させるポイント
画像のwidthやheightを明示し、レスポンシブ画像にはアスペクト比を使用するなど、レイアウトシフトに対しての解決策はあります
しかし、レイアウトシフトを改善するには、エンジニアリングスキルが必要な改修が発生することがほとんどです。
Cumulative Layout Shift (CLS)がWeb サイトのパフォーマンスを決定する唯一の指標ではないことは注目に値します。Largest Contentful Paint、Speed Index、Time to Interactive、Total Blocking Time などの他の指標も、Web サイトとページ エクスペリエンスの全体的なパフォーマンスを決定する上で重要な役割を果たします。
弊社では、Web サイトのパフォーマンスに関するクライアントの状況に応じたサポートを提供しています。現在お困りの場合、またはこれからSEOやWebサイトの再設計、Webサイトの定期的な最適化どうしたら良いか悩んでいるケースでもまずはお気軽にお問合せください。