Web表示スピード研究会

【CLS】 Cumulative Layout Shift(レイアウトのずれ)を対策する方法

CLS (Cumulative Layout Shift)について

CLSは何を測るのですか?
・どうやって計算していますか?
・実際のユーザー体験とは何ですか?
・測定可能な方法で、ユーザー行動やビジネス指標と関連していますか?
・(避けられない) 落とし穴は何ですか。
・CLSにはどの程度の注意を払うべきでしょうか?

CLSは何を測定しますか?

Cumulative Layout Shift  は、ページの視覚的な安定度を測定します。これは数式ベースの測定基準で、簡単にいえば「ビューポート内での視覚的な内容の移動量とそれらの視覚要素が移動した距離」を考慮します。どのように計算されているのか、深く掘り下げることもできますが、優しい定義としては「CLSはいかにページがダメで、いかにユーザーに不快な体験を与えているか」を理解するのに役立ちます。

Googleによると、モバイルとデスクトップのデバイスで、CLSスコアは75パーセンタイルで0.1以下の維持すべきだとしています。スコアが0.25を超えると、不良とみなされます。CLSは無限の尺度であり、1より大きくなる場合には、注意が必要です。

数値指標を理解する一方で、一般には、グラフや表計算ソフトの数字では、そこまで関心は注げません。可能な限り、そのスコアが何を教えようとしているのか、なぜそれがユーザーエクスペリエンスとビジネスインパクトの点で実際に重要なのかをビジュアルを見たいと思っています。幸いなことに、これらのことをシンセティック(合成)で行うことも、リアルユーザー・モニタリング (RUM) で行うこともできます。

スコアが低いCLSとはどのような場合ですか。

Cumulative Layout Shiftについて、気に入っている1つは、シンセティック(合成)とRUMの両方で測定できることです。最初にやりたいことの1つはシンセティック(合成)データを見ることです。このデータを使うと、ページのフィルムストリップビューを生成し、レイアウトが実際にどのように変化しているかを見ることができます。

SpeedCurveのIndustry Benchmarksダッシュボードは、小売、メディア、旅行、その他の業界のトップサイトのパフォーマンスを追跡するものです。ここでは、CLSスコアでランク付けされた、高速デスクトップ接続に関する現在の米国メディアのベンチマークを示します

これらのフィルムストリップでわかるように、Cumulative Layout Shift の良し悪しは、初期レンダリングの高速化とは関係ありません。Washington Post (一番下のストリップ)のCLSスコアは最低ですが、スタートレンダリング最速です。これはいいユーザー体験でしょうか?それとも悪いユーザー体験でしょうか?

The Washington Postの詳細ページでは、CLSスコアは0.8417。Google推奨の0.1よりかなり悪いのです。以下のレイアウト変更の図が示すように、大きな原因は次の2つが考えられます。

Webフォント – 特に、デフォルトフォントとカスタムフォントのサイズに重大な不一致があること。

ページの編集本文全体がシフトする広告。CLSの計算では、シフト要素のサイズが重要になります。(ここでは、CLSスコアに影響する可能性のあるページの問題点と、トラブルシューティング方法について説明します

これらのフレームを見ると、このページのCLSスコアが高くなった原因がわかります。こうしたレイアウト変更が、実際にユーザーの知覚パフォーマンスや、最終的にはビジネスにどれくらいの影響を与えるのかを理解するのは難しいことかも知れません。

CLSは、ユーザーエンゲージメントやビジネス指標とどう関連するか?

実際のユーザー・データを調べると便利です。直帰率やコンバージョンレートなどの指標をすでに取得している場合は、Cumulative Layout Shiftスコアをそれらの指標と相関させて、傾向を特定できるかどうかを確認できます。(相関グラフの詳細については、ここをクリック)

次のグラフでは、4種類の小売サイトの一ヶ月分の匿名化されたリアルユーザーモニタリング (RUM)の データを見てみました。結果はとても興味深いものです。

 Site 1:CLSスコアが低下すると、コンバージョン率が低下します。

このサイトでは、コンバージョン動作はGoogleのCLSガイドラインにとても近しいものとなりました。コンバージョンレートは「良い」ゾーンで最も高く、0.1に辺りで、大きく低下することがわかります。コンバージョンレートは「ニーズの改善(Needs Improvement)」で横ばいとになり、0.25以降は「Poor」ゾーンで再び急落します。

このサイトでは、CLSは間違いなく購入者の行動と相関しています。このサイトオーナーは、迷惑行為を起こし顧客を遠ざけている可能性あるページを調査すべきでしょう。

Site 2 :CLSスコアが低下すると、直帰率が悪化する。

上のグラフと同様に、下のグラフは、ユーザー行動が予測どおり、CLSスコアの低下と相関していることを示しています。 このサイトでは、CLSが悪化すると直帰率も悪化します。

Site 3:CLSスコアが低下ほど、バウンスレートは変化しない。

先の2つの相関チャートを見た後は、CLSは間違いなくユーザー体験と行動の予測因子であると確信できるかもしれません。しかし、下のグラフではCLSスコアが低下しても、直帰率はやや悪化するのみです。

Site 4: CLSスコアが低下すると、直帰率が「向上」します。

このグラフはCLSスコアが悪化するにつれて、実際には「直帰率」が向上することを示しています。

これらのグラフを見てもらったのは、CLS指標の有効性と有用性に対して疑問を投げかけるためではありません。重要なのは、他のすべての指標と同様に「CLSスコアは自分のサイトのコンテキスト内で検証する必要がある」ということです。

検証方法ですが、さまざまなツールを使用してCLSを測定できます。

ツール間でCLS数値に違いがでるかもしれない理由

CLSの計算方法はツール間で一貫していますが、各種ツールのデータを比較する際に注意すべき点があります。

  1. CLSは、ページのライフサイクル中に発生するレイアウトシフトの累積です。ただし、ライフサイクルの測定はテクノロジーによって異なる場合があります。

ページのライフ・サイクルの期間の違いは、CLSで見られた大きな違いのいくつかを説明することができます。

 CrUXは、オプトイン・ユーザーのChromeからデータをキャプチャします。しかし同期パスフレーズを設定せず、統計レポートを有効にします。

  1. シンセティック(合成)モニタリングは、測定間の変化がほとんどない「実験室 」環境を作り出すことで知られています。ブラウザのバージョン、デバイス、ビューポートのサイズ、ネットワーク・スロットリング、CPUスロットリングはすべて一定です。これにより、対象アプリケーションのベースラインをより正確に設定できます。

しかし、実際の世界では、さまざまなデバイスや環境条件が複雑に分散しています。このため、レイアウトのずれを累積するときに、多少のばらつきが生じる可能性があります。ビューポートが非常に小さい場合は、スクロールしないでシフトが発生することがあります。ネットワーク状態が異なると、フォントの読み込みが遅い/速いなどの理由で、CLSに違いが生じる場合があります。

ポイントは、実際の測定値は、ベースラインのシンセティック(合成)測定(Lighthouseのテストランでも)と比較すると異なるということです。

CLSスコアは、ユーザーがサイトから離脱する可能性を常に反映しているわけではありませんが、パフォーマンス問題を調査するには有効な指標です。Cumulative Layout Shiftの最大利点の1つは、通常の時間ベースの指標外で考えることができ、その代わりに、最適化されていないページ要素がユーザーエクスペリエンスを低下させるほかの方法について考えさせられます。

自分のサイトでCLSを追跡し始める際には、ページがどのように構築されているか、どの測定ツールを使用しているか、RUMデータを参照しているか、シンセティック(合成)データを参照しているかによって、結果が異なる可能性があることに注意してください。シンセティック(合成)とRUMモニタリングの両方を使用する場合:

シンセティック(合成)データを使用して、シフトが発生している場所を視覚的に識別し、そこから改善します。まず、最も大きなレイアウトにフォーカスします。シフトの中には、追いかけたくないほど小さいものもあります。


※この記事はSpeedCurve社の英文情報を元に、内容を分かりやすく編集、翻訳した記事です。

Copyright © 2021 SpeedCurve Limited. All Rights Reserved.

PSI、表示スピード、コアウエブバイタル INPの各対策については