Cumulative Layout Shift 指標の改善計画の詳細やフィードバックをお寄せください。
Cumulative Layout Shift（CLS）は、ウェブページの視覚的な安定性を測定する指標です。この指標は「累積レイアウト シフト」と呼ばれます。個々のシフトのスコアはページの存続期間全体で合計されるためです。
レイアウト シフトはユーザー エクスペリエンスに悪影響を及ぼしますが、ページを開く時間が長くなると、その影響も増えます。そのため、Chrome Speed Metrics チームは CLS 指標を改善し、ページの閲覧時間に対してよりニュートラルなものにすることにしました。
この指標では、ページの全期間を通じたユーザー エクスペリエンスを重視することが重要です。読み込み後に、ユーザーがページをスクロールまたは移動している間にネガティブな体験をすることが多いことがわかっています。しかし、このことが有効期間の長いページ、つまりユーザーが長時間開いているページにどのような影響があるかについて、懸念の声も寄せられています。ページの種類は複数あり、長く開いたままになる傾向があります。最も一般的なものは、無限スクロールを使用するソーシャル メディア アプリやシングルページ アプリケーションです。
CLS スコアが高い、存続期間が長いページを内部で分析したところ、ほとんどの問題が次のパターンに起因することがわかりました。
- 無限スクローラーがコンテンツをスクロールする。
- ユーザー操作に対する UI の更新に 500 ミリ秒を超える入力ハンドラで、プレースホルダやスケルトン パターンが存在しない場合。
Google はデベロッパーにこうしたユーザー エクスペリエンスの改善を奨励すると同時に、指標の改善にも取り組んでおり、可能なアプローチについてのフィードバックを求めています。
新しい指標が適切かどうかはどのように判断すればよいのでしょうか。
指標の設計に入る前に、実際のさまざまなウェブページとユースケースでアイデアを評価したいと考えました。まず、小規模なユーザー調査を設計しました。
まず、さまざまなウェブサイトを経由する 34 のユーザー ジャーニーの動画と Chrome のトレースを記録しました。ユーザー ジャーニーを選択する際は、以下の点を重視しました。
- ニュースサイトやショッピング サイトなど、さまざまな種類のサイト。
- 最初のページの読み込み、スクロール、単一ページのアプリ ナビゲーション、ユーザー インタラクションなど、さまざまなユーザー ジャーニー。
- サイトでの個別のレイアウト シフトの数と強度はさまざまです。
- レイアウト シフト以外は、サイトでネガティブなエクスペリエンスはほとんどありません。
41 名の同僚に一度に 2 本の動画を見てもらい、どちらのペアがレイアウト シフトの点で優れているかを評価しました。これらの評価から、サイトの理想的なランキング順序を作成しました。ユーザー ランキングの結果から、Google の同僚もほとんどのユーザーと同様に、特にスクロール時や単一ページのアプリ ナビゲーション時に、読み込み後のレイアウト シフトに非常に不満を感じているのではないかと確信しています。これらのアクティビティで、他のサイトよりもはるかに優れたユーザー エクスペリエンスが得られるサイトがあることがわかっています。
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 パーセンタイルを取得するには多くの補間が必要です。指標の値という点では、補間によって何が行われるのかが不明確です。最大値が明確になったため、最大値を確認することにしました。
ギャップの長いセッション ウィンドウの平均
上限のないすべてのセッション ウィンドウ（間に 5 秒のギャップがある）の平均スコアは、非常に優れたパフォーマンスを発揮しました。この戦略には次のような興味深い特徴があります。
- ページのレイアウト シフト間にギャップがない場合、現在の CLS とまったく同じスコアを持つ 1 つの長いセッション ウィンドウになります。
- この指標ではアイドル時間を直接考慮していません。ページが移動していない時点ではなく、ページで発生した変化のみを考慮しました。
短い時間枠のパーセンタイルが高い
最大スライディング ウィンドウである 300 ミリ秒と、95 パーセンタイルは非常に高くランク付けされています。短いウィンドウ サイズの場合、大きなウィンドウ サイズよりもパーセンタイル補間が少なくなりますが、「繰り返し」スライディング ウィンドウについても考慮しました。つまり、一連のレイアウト シフトが 2 つのフレームで発生する場合、それらを含む 300 ミリ秒のウィンドウが複数存在することになります。最大値を取る方が、95 パーセンタイル値を使用するよりもはるかに明確で簡単です。繰り返しますが 最大数を確認することにしました
失敗した戦略
レイアウト シフトなしと、レイアウト シフトありのどちらも費やされる時間の「平均的」なエクスペリエンスを調べようとする戦略では、結果はまったく得られませんでした。どのウィンドウ処理戦略でも、中央値や 75 パーセンタイルのサマリーでは、サイトのランキングが優れているわけではありませんでした。時間の経過とともにレイアウトが変化することもありませんでした。
許容されるレイアウト シフトについて、さまざまな「予算」を評価しました。
- 予算を超過したレイアウト シフトの割合。予算によって、これらはすべてかなり低い順位でした。
- 平均レイアウト シフトがある程度超過しています。この戦略のほとんどのバリエーションでは成果が低いものの、ギャップの大きい長いセッションの平均超過時間は、ギャップの長いセッション ウィンドウの平均とほぼ同じでした。今回は、よりシンプルな後者のみを採用することにしました。
次のステップ
より大規模な分析
Google は、Chrome に上記の戦略を実装して、はるかに多くのウェブサイトでの実際の使用状況に関するデータを取得できるようにしています。Google は、同様の手法で指標スコアに基づいてサイトをランク付けし、より大規模な分析を行う予定です。
- すべてのサイトを CLS でランク付けし、新しい指標の候補ごとにランク付けします。
- CLS と各候補によって最も異なった順位のサイトはどれか？これらのサイトを確認した際に、予想外の発見はありましたか？
- 新しい指標の候補間の最大の違いは何ですか？特定の候補者の長所または短所として際立った違いはありますか。
- 上記の分析を繰り返しますが、各ページの読み込みにかかった時間でバケット化します。許容可能なレイアウト シフトで、有効期間が長いページ読み込みで改善は期待できますか？有効期間が短いページで予期しない結果が発生しましたか？
Google のアプローチに関するフィードバック
こうしたアプローチについて、ウェブ デベロッパーの皆様からのフィードバックをお待ちしています。新しいアプローチを検討する際は、次の点に留意してください。
変更されない点
多くのことは、新しいアプローチでも変わりません。
- どの指標アイデアも個々のフレームのレイアウト シフト スコアの計算方法を変えるものではなく、複数のフレームを要約する方法を変えるだけです。つまり、レイアウト シフト用の JavaScript API に変更はありません。デベロッパー ツールで使用される Chrome トレースの基になるイベントも変わりません。そのため、WebPageTest や Chrome DevTools などのツールのレイアウト シフト長方形も同じように機能します。
- Google は、web-vitals ライブラリへの追加、web.dev でのドキュメント化、Lighthouse などのデベロッパー ツールへのレポートなど、デベロッパーが容易に導入できる指標の構築に引き続き尽力していきます。
指標間のトレードオフ
上位の戦略の 1 つはレイアウト シフト ウィンドウを平均値としてまとめ、残りは最大ウィンドウを報告するものです。開いている時間が長いページの場合、平均ではより代表的な値が報告される可能性が高くなりますが、一般的に開発者は単一のウィンドウで行動する方が簡単な可能性があります。つまり、いつ発生したか、シフトした要素などを記録できます。デベロッパーの皆様にとって重要度の高い項目について、ぜひフィードバックをお寄せください。
スライディング ウィンドウとセッション ウィンドウのどちらがわかりやすいと思いますか。その違いはご自身にとって重要ですか。
フィードバックを送信する
JavaScript 実装の例または Core Web Vitals 拡張機能のフォークを使用して、任意のサイトで新しいレイアウト シフトの指標を試すことができます。
件名に「[Layout Shift Metrics]」と記入して、web-vitals-feedback Google グループにフィードバックをお送りください。皆様からのご意見、ご感想をお待ちしております。