Cumulative Layout Shift 指標を改善する計画について学び、フィードバックをお寄せください。
Cumulative Layout Shift（CLS）は、ウェブページの視覚的な安定性を測定する指標です。この指標は、ページのライフスパン全体で個々のシフトのスコアが合計されるため、累積レイアウト シフトと呼ばれます。
レイアウトの変更はすべてユーザー エクスペリエンスの低下につながりますが、ページを開いている時間が長いほど、その影響は大きくなります。そのため、Chrome の速度指標チームは、ページに費やした時間に左右されないように CLS 指標を改善することにしました。
ページの読み込み後、スクロールやページ間の移動中に、ユーザー エクスペリエンスが低下することがよくあるため、この指標ではページの全期間にわたるユーザー エクスペリエンスに焦点を当てることが重要です。ただし、長時間表示されるページ（ユーザーが長時間開いているページ）への影響について懸念の声が寄せられています。長時間開いたままになるページにはいくつかの種類があります。最も一般的な例としては、無限スクロールのソーシャル メディア アプリやシングルページ アプリケーションなどがあります。
CLS スコアが高い有効期間が長いページを社内で分析したところ、ほとんどの問題の原因は次のパターンにあることがわかりました。
- ユーザーがスクロールするとコンテンツが移動する無限スクロール。
- プレースホルダやスケルトン パターンを使用せずに、入力ハンドラがユーザー操作への応答として UI を更新するのに 500 ミリ秒以上かかる場合。
Google は、こうしたユーザー エクスペリエンスを改善するようデベロッパーに推奨するとともに、指標の改善にも取り組んでおり、可能なアプローチについてフィードバックを募集しています。
新しい指標の方が優れているかどうかを判断するにはどうすればよいでしょうか？
指標の設計に進む前に、さまざまな実際のウェブページとユースケースでアイデアを評価することを重視しました。まず、小規模なユーザー調査を実施しました。
まず、さまざまなウェブサイトを経由する 34 件のユーザー ジャーニーの動画と Chrome トレースを記録しました。ユーザー ジャーニーを選択する際には、以下の点を重視しました。
- ニュースサイトやショッピング サイトなど、さまざまな種類のサイト。
- さまざまなユーザー フロー（最初のページ読み込み、スクロール、シングルページ アプリのナビゲーション、ユーザー操作など）。
- サイト上の個々のレイアウト シフトの数と強度の多様性。
- レイアウトのずれ以外に、サイト上での不快なエクスペリエンスはほとんどありません。
41 人の社員に、一度に 2 つの動画を視聴し、レイアウトのずれに関してどちらが優れているかを評価してもらいました。これらの評価に基づいて、サイトの理想的なランキング順序を作成しました。ユーザー ランキングの結果から、当社の同僚は大部分のユーザーと同様に、読み込み後のレイアウト シフト、特にスクロールやシングルページのアプリ ナビゲーションに不満を感じているようです。こうしたアクティビティ中のユーザー エクスペリエンスが他のサイトよりもはるかに優れているサイトがあることがわかりました。
動画とともに Chrome のトレースも記録していたため、各ユーザー ジャーニーにおける個々のレイアウト変更の詳細をすべて把握できました。これらのデータを使用して、各ユーザー ジャーニーの各アイデアの指標値を計算しました。これにより、各指標バリエーションによるユーザー ジャーニーのランキングと、各ランキングが理想的なランキングとどの程度異なるかを把握できました。
テストした指標のアイデア
ウィンドウ戦略
新しいコンテンツが少しずつ追加されるにつれて、要素が複数回移動する可能性があるため、ページのレイアウトが短い時間に複数回シフトすることがよくあります。そこで、シフトをグループ化する手法を試すことにしました。そのために、次の 3 つのウィンドウ アプローチを検討しました。
- タンブリング ウィンドウ
- スライディング ウィンドウ
- セッション ウィンドウ
これらの例ではいずれも、ページのレイアウトが時間の経過とともに変化し、その程度はさまざまです。青い棒は 1 つのレイアウト シフトを表し、長さはそのシフトのスコアを表します。これらの画像は、さまざまなウィンドウ処理戦略で、時間の経過に伴うレイアウトのずれをグループ化する方法を示しています。
タンブリング ウィンドウ
最も簡単な方法は、ページを同じサイズのチャンクのウィンドウに分割することです。これらはタンブリング ウィンドウと呼ばれます。上記のグラフでは、4 番目の棒は 2 番目のターミナル ウィンドウにグループ化されるように見えますが、ウィンドウがすべて固定サイズであるため、代わりに 1 番目のウィンドウに含まれます。ページの読み込みやユーザー操作のタイミングにわずかな違いがある場合、同じレイアウト シフトがターニング ウィンドウの境界の異なる側に分かれることがあります。
スライディング ウィンドウ
同じ長さのより多くのグループ化を検出できるアプローチとして、時間の経過とともに候補期間を継続的に更新する方法があります。上の図は、一度に 1 つのスライディング ウィンドウを示していますが、可能なすべてのスライディング ウィンドウまたはそのサブセットを調べて指標を作成することもできます。
セッション ウィンドウ
レイアウト シフトが急増しているページの領域を特定する場合は、各ウィンドウをシフトで開始し、レイアウト シフト間に特定のサイズのギャップが見つかるまでウィンドウを拡大できます。このアプローチでは、レイアウトの変化をまとめてグループ化し、変化しないユーザー エクスペリエンスのほとんどを無視します。レイアウト シフトにギャップがない場合、セッション ウィンドウに基づく指標は、現在の CLS 指標と同様に無制限に増加する可能性があります。そのため、最大ウィンドウ サイズでも試してみました。
ウィンドウのサイズ
この指標は、実際のウィンドウのサイズによって結果が大きく異なる可能性があるため、複数のウィンドウ サイズを試しました。
- 各シフトを個別のウィンドウとして表示（ウィンドウなし）
- 100 ミリ秒
- 300 ミリ秒
- 1 秒
- 5 秒
要約
さまざまな期間をまとめる方法を数多く試しました。
パーセンタイル
最大ウィンドウ値、95 パーセンタイル、75 パーセンタイル、中央値を調べました。
平均
平均ウィンドウ値を確認しました。
予算
ユーザーが気づかないようなレイアウト シフトの最小スコアはあるのではないかと考え、その「予算」に対するレイアウト シフトをスコアにカウントしてみましょう。そこで、想定されるさまざまな「予算」値について、予算に対するシフトの割合と、予算に対するシフトの合計スコアを調べました。
その他の戦略
また、ウィンドウに関係のない多くの戦略（合計レイアウト シフトをページ上の時間で除算したものや、最悪の N 個の個々のシフトの平均など）も検討しました。
最初の結果
全体として、上記のアイデアの組み合わせに基づいて、145 種類の指標定義をテストしました。各指標について、その指標のスコアですべてのユーザー ジャーニーをランク付けし、理想的なランキングとの近さで指標をランク付けしました。
ベースラインを取得するため、すべてのサイトを現在の CLS スコアでランク付けしました。CLS は 13 の他の戦略と並んで 32 位にランクインしました。これは、上記の戦略のほとんどの組み合わせよりも優れた結果です。有意な結果が得られるように、3 つのランダムな順序も追加しました。予想どおり、ランダムな順序付けは、テストしたすべての戦略よりもパフォーマンスが低下しました。
データセットに対して過学習になる可能性があるかどうかを把握するために、分析の後、新しいレイアウト シフトの動画とトレースを記録して手動でランク付けし、新しいデータセットと元のデータセットで指標のランキングが非常に類似していることを確認しました。
ランキングでは、いくつかの戦略が目立ちました。
最適な戦略
入札戦略をランク付けした結果、上位 3 つの戦略が見つかりました。いずれもパフォーマンスがほぼ同じであったため、3 つすべての詳細な分析を進める予定です。また、デベロッパーの皆様からフィードバックをお寄せいただき、どちらを選択するかを決める際に考慮すべきユーザー エクスペリエンス以外の要素があるかどうかを把握したいと考えています。（フィードバックの送信方法については、以下をご覧ください）。
長い時間枠のパーセンタイルが高い
長いウィンドウ サイズでうまく機能したウィンドウ処理戦略は次のとおりです。
- 1 秒のスライディング ウィンドウ
- セッション ウィンドウは 5 秒で、1 秒のギャップがある
- セッション ウィンドウに上限なし、ギャップ 1 秒
これらはすべて、95 パーセンタイルと最大の両方で非常に優れています。
しかし、このような大きなウィンドウサイズでは、95 パーセンタイルを使用することに懸念がありました。多くの場合、4～6 つのウィンドウしか検討しておらず、そのうちの 95 パーセンタイルを取得するには、多くの補間が必要でした。指標値の点で、補間がどのように行われているのかが不明確です。最大値の方がはるかに明確であるため、Google は最大値を確認することにしました。
長いギャップがあるセッション ウィンドウの平均
5 秒間隔で区切られた、制限なしのすべてのセッション ウィンドウのスコアを平均すると、非常に良い結果が得られました。この戦略には次のような特徴があります。
- ページにレイアウト シフト間のギャップがない場合、最終的には 1 つの長いセッション ウィンドウとなり、現在の CLS とまったく同じスコアになります。
- この指標では、ページ上で発生したシフトのみが考慮され、ページがシフトしていない時点は考慮されませんでした。
短いウィンドウの高いパーセンタイル
最大 300 ミリ秒のスライディング ウィンドウは非常に高く、95 パーセンタイルです。ウィンドウサイズが小さいほど、パーセンタイル補間は少なくなりますが、スライディング ウィンドウの「繰り返し」も懸念されます。2 つのフレーム間にレイアウトのずれが生じた場合、それを含む 300 ミリ秒のウィンドウが複数存在します。最大値を求めるほうが、95 パーセンタイルの場合よりもはるかに明確でシンプルです。そこで今回も、上限数を確認することにしました。
効果的でなかった戦略
レイアウト シフトなしの場合とレイアウト シフトありの場合の両方で費やした時間の「平均的」なエクスペリエンスを確認しようとした戦略は、非常に良くありませんでした。どのウィンドウ処理戦略においても、中央値や 75 パーセンタイルのサマリーで、サイトを高く評価するものではありませんでした。時間の経過に伴うレイアウト変更の合計も変わりませんでした。
許容できるレイアウトのずれについて、さまざまな「予算」を評価しました。
- レイアウト シフトが予算を超えてシフトした割合。どの予算も低評価でした。
- 平均的なレイアウト シフトがやや過剰。この戦略のほとんどのバリエーションはうまくいかなかったものの、ギャップの大きい長いセッションの平均的な過剰な場合は、ギャップの長いセッション期間の平均とほぼ同じでした。後者の方がシンプルであるため、後者のみを実装することにしました。
次のステップ
大規模な分析
Google は、上記の主要な戦略を Chrome に実装しました。これにより、はるかに多くのウェブサイトの実際の使用状況に関するデータを取得できるようになりました。今後は、同様の手法で指標スコアに基づいてサイトをランク付けし、より大規模な分析を行う予定です。
- CLS と新しい指標候補ごとにすべてのサイトのランク付けを行います。
- CLS と各候補者でランク付けが最も異なるのはどのサイトですか？これらのサイトを調べると、予期しない問題は見つかりますか？
- 新しい指標候補の最大の違いは何ですか？特定の候補者の長所や短所として際立っている違いはありますか？
- 上記の分析を繰り返し、各ページの読み込みに費やした時間でバケット化します。レイアウト シフトを許容することで、長時間のページの読み込みで期待される改善は見られますか？存続期間の短いページで想定外の結果は発生していますか？
Google のアプローチに関するフィードバック
これらのアプローチについて、ウェブ デベロッパーの皆様からフィードバックをお寄せいただければ幸いです。新しいアプローチを検討する際には、次の点にご注意ください。
変更されない点
なお、新しいアプローチでは多くの点が変更されません。
- どの指標アイデアでも、個々のフレームのレイアウト シフト スコアの計算方法は変更されず、複数のフレームの要約方法のみが変更されます。つまり、レイアウト シフトの JavaScript API は変更されず、デベロッパー ツールで使用される Chrome トレース内の基盤となるイベントも変更されません。そのため、WebPageTest や Chrome DevTools などのツールのレイアウト シフトの矩形は引き続き同じ方法で機能します。
- Google は、web-vitals ライブラリへの指標の追加、web.dev でのドキュメント化、Lighthouse などのデベロッパー ツールでのレポート作成などを通じて、デベロッパーが指標を簡単に導入できるように引き続き取り組んでまいります。
指標間のトレードオフ
上位の戦略の 1 つは、レイアウト シフト ウィンドウを平均として要約し、残りの戦略は最大ウィンドウを報告します。長時間開いているページでは、平均値の方が代表的な値になる可能性がありますが、一般的には、発生したタイミングや移動した要素などをログに記録できるため、1 つのウィンドウで操作する方がデベロッパーにとって簡単です。デベロッパーにとってどちらが重要かについて、フィードバックをお寄せください。
スライド式のウィンドウとセッション ウィンドウのどちらがわかりやすいですか？違いは重要ですか？
フィードバックを送信する
新しいレイアウト シフト指標は、JavaScript 実装の例または Core Web Vitals 拡張機能のフォークを使用して、任意のサイトで試すことができます。
フィードバックを web-vitals-feedback Google グループにメールでお送りください。件名は「[Layout Shift Metrics]」です。ご意見をお待ちしております。