有効期間が長いページに対して公平性を高めるために CLS 指標を改善する計画。
Chrome Speed Metrics Team は先日、長期間公開されているページに対して CLS 指標をより公平なものにするための方法に関する最初の調査の概要をお伝えしました。非常に有益なフィードバックが多数寄せられており、大規模な分析の完了後、指標を変更する予定である「最大セッション ウィンドウ、ギャップを 1 秒、上限は 5 秒」という変更を確定しました。
詳しくは以下をご覧ください。
オプションをどのように評価しましたか？
デベロッパー コミュニティから寄せられたすべてのフィードバックを検討し、検討しました。
また、Chrome に主要なオプションを実装し、数百万のウェブページにわたって指標の大規模な分析を行いました。各オプションで改善されたサイトの種類と比較結果を調べ、特にオプションごとにスコアが異なるサイトについて調べました。全体として、次のことがわかりました。
- すべてのオプションを選択することで、ページ滞在時間とレイアウト移動スコアの相関関係が減少しました。
- どのページでも、スコアが低下したオプションはありません。そのため、この変更によってサイトのスコアが悪化することを心配する必要はありません。
決定ポイント
セッション ウィンドウを使用する理由
以前の投稿では、スコアが無限に増加しないようにレイアウト シフトをグループ化するためのいくつかのウィンドウ処理戦略について説明しました。デベロッパーからのフィードバックでは、セッション ウィンドウ戦略はレイアウト シフトを最も直感的にグループ化するため、圧倒的に好評でした。
セッション ウィンドウを確認するには、次の例をご覧ください。
上記の例では、ユーザーがページを表示すると、時間の経過とともに多くのレイアウト シフトが発生します。それぞれが青いバーで表示されます。上の図では、青いバーの高さが異なります。これらのバーは、個々のレイアウト シフトのスコアを表しています。セッション ウィンドウは、最初のレイアウト シフトから開始し、レイアウト シフトがないギャップになるまで拡大を続けます。次のレイアウト シフトが発生すると、新しいセッション ウィンドウが開始されます。3 つのギャップ（レイアウト シフトなし）があるため、この例には 3 つのセッション ウィンドウがあります。CLS の現在の定義と同様に、各シフトのスコアが加算されるため、各ウィンドウのスコアは個々のレイアウト シフトの合計になります。
最初の調査では、セッション ウィンドウの間隔を 1 秒に設定しましたが、このギャップは大規模な分析ではうまく機能しました。そのため、上記の例の「セッション ギャップ」は 1 秒です。
なぜセッション ウィンドウが最大なのですか？
最初の調査では、要約戦略を次の 2 つの選択肢に絞り込みました。
- 非常に大きなセッション ウィンドウ（間に 5 秒間のギャップがある、上限のないウィンドウ）のすべてのセッション ウィンドウの平均スコア。
- 小さいセッション ウィンドウのすべてのセッション ウィンドウの最大スコア（制限は 5 秒で、間隔は 1 秒です）。
初期調査の後、数百万の URL に対して大規模な分析を実施できるように、各指標を Chrome に追加しました。大規模な分析では、次のようなレイアウト シフトのパターンを持つ URL が多数見つかりました。
右下を見ると、セッション ウィンドウ 2 にはわずかなレイアウト シフトが 1 つしかなく、非常に低いスコアになっています。つまり 平均スコアは かなり低いということですしかし、デベロッパーがあの小さなレイアウト シフトを修正したらどうなるでしょうか。この場合、スコアはセッション ウィンドウ 1 でのみ計算されます。つまり、ページのスコアは 2 倍近くになります。レイアウト シフトを改善すると、スコアが悪くなるだけで、デベロッパーにとって混乱を招くだけでなく、意欲を削ぐことになります。この小さなレイアウト シフトを削除すると、明らかにユーザー エクスペリエンスが向上するため、スコアは悪化しません。
平均に関するこのような問題により、より小さく、上限のある最大ウィンドウを使用することにしました。したがって、上記の例では、セッション ウィンドウ 2 は無視され、セッション ウィンドウ 1 のレイアウト シフトの合計のみがレポートされます。
なぜ 5 秒なのか
複数のウィンドウ サイズを評価したところ、次の 2 つのことがわかりました。
- ウィンドウが短い場合、ページの読み込みが遅く、ユーザー操作に対するレスポンスが遅くなると、レイアウト シフトが複数のウィンドウに分割され、スコアが向上する可能性があります。ウィンドウは、速度低下を考慮しても十分な大きさにしたいと考えました。
- 一部のページでは、レイアウトが少しずつずれています。たとえば、スポーツのスコアページがスコアが更新されるたびに少し変化します。このようなシフトはイライラしますが、時間が経つにつれてイライラすることはありません。そのため、このようなタイプのレイアウト シフトに対してウィンドウを制限する必要がありました。
これら 2 つを念頭に置いて、実際のウェブページのさまざまなウィンドウ サイズを比較した結果、ウィンドウ サイズの制限は 5 秒が適切であるという結論に至りました。
ページの CLS スコアにはどのような影響がありますか？
今回の更新でページの CLS が制限されるため、スコアが下がるページはありません。
また、Google の分析によると、送信元の 55% では、75 パーセンタイルで CLS の変化がまったく発生しません。これは、ページに現在レイアウト シフトがない、またはシフトがすでに単一のセッション ウィンドウに制限されているためです。
この変更により、残りのオリジンでは 75 パーセンタイルのスコアが改善されます。ほとんどのケースではわずかな改善しか見られませんが、約 3% の場合、評価が「改善が必要」または「低い」から「良好」に向上します。このようなページでは、以前の投稿で説明されているように、無限スクローラーが使用されているか、UI の更新が低速になる傾向があります。
どうすればよいですか？
新しい指標定義を使用するようにツールをまもなく更新する予定です。それまでは、JavaScript 実装の例または Web Vitals 拡張機能のフォークを使用して、任意のサイトで最新バージョンの CLS をお試しいただけます。
前回の投稿を読んでフィードバックをお寄せくださった皆さん、ありがとうございました。