有効期間が長いページに対する公平性を高めるために、CLS 指標を改善するための計画。
Google（Chrome 速度指標チーム）では先日、 長時間開いたページに対して CLS 指標を公平にするためのオプション あります。これまで非常に多くの 大規模な分析を終えたところで、 次のように指標に加える予定の最大セッション ウィンドウは、1 秒です。 上限は 5 秒です。
詳細をお読みください。
オプションをどのように評価しましたか？
デベロッパー コミュニティから寄せられたすべてのフィードバックを確認し、 考慮に入れる必要があります
また、トップ オプション 何百万ものウェブページで指標の大規模な分析を行いました。水 各選択肢がどのタイプのサイトを改善し サイトによってスコアが異なるサイトを調べて 。全体として、以下のことが明らかになりました。
- すべてのオプションで、ページ滞在時間と Layout Shift のスコアです。
- どのページでもスコアが「悪い」という選択肢はありません。そのため この変更によってサイトのスコアが悪化することを心配する必要があります。
意思決定のポイント
セッション ウィンドウが必要な理由
以前の投稿では、 いくつかの異なるウィンドウ処理を 戦略 スコアが増大しないようにしながらレイアウト シフトをグループ化する あります。デベロッパーの皆様から寄せられたフィードバックは圧倒的に「 レイアウト シフトがグループ化され、 直感的に理解できます
セッション ウィンドウを確認する例を次に示します。
<ph type="x-smartling-placeholder">上記の例では、レイアウト シフトの多くは、 できます。それぞれが青いバーで表されます。上の青色のバーと 体高はさまざまです。これらは次のスコアを表します: 調整できますセッション ウィンドウは最初のレイアウト シフトから始まる レイアウト シフトのないギャップが生じるまで拡大し続けます。次の レイアウト シフトが発生すると、新しいセッション ウィンドウが開始されます。3 つのギャップがあるので、 レイアウト シフトがない場合、この例では 3 つのセッション ウィンドウがあります。類似の 各シフトのスコアが加算され、各シフトの ウィンドウのスコアは、個々のレイアウト シフトの合計です。
初期の 調査に基づき、 セッション ウィンドウ間に 1 秒のギャップがありました。このギャップは、 使用できます。つまり「セッションギャップ」は1 に設定されます。 なります。
最大セッション ウィンドウが必要な理由
Google は要約を絞り込みました。 戦略を 選択肢は 2 つあります
- 非常に大規模なセッションのすべてのセッション ウィンドウの平均スコア ウィンドウ（5 秒間隔のキャップなしのウィンドウ）。
- すべてのセッション ウィンドウの最大スコア（小さいセッション ウィンドウの場合） （上限 5 秒、間隔 1 秒）。
初期調査の後、各指標を Chrome に追加して、 大規模に分析できます。大規模な分析では、 で、次のようなレイアウト シフトのパターンを含む URL が多数見つかりました。
右下を見ると、レイアウト シフトが 1 つだけ セッションウィンドウ 2 は、非常に低いスコアです。これは平均スコアが かなり低額ですしかし、デベロッパーがこのわずかなレイアウト シフトを修正するとしたらどうでしょうか。次に、 スコアはセッションウィンドウ 1 でのみ計算され、 ほぼ倍増します。開発者にとって本当に混乱し、意欲を削ぐでしょう レイアウト シフトを改善しましたが、スコアが悪化しました。そして このわずかなレイアウトシフトをなくすことで、ユーザーにとっては スコアが低下することはありません
このように平均値に問題があるため、 より小さく制限された最大ウィンドウを 提供します上の例では、セッションウィンドウ 2 は は無視され、セッション ウィンドウ 1 のレイアウト シフトの合計のみが 報告されることはありません。
なぜ 5 秒なのでしょうか。
複数のウィンドウ サイズを評価したところ、次の 2 つのことがわかりました。
- 計測期間が短いと、ページの読み込みとユーザー操作への応答が遅くなります レイアウト シフトを複数のウィンドウに分割して、スコアを改善する。水 ウィンドウを十分な大きさにして、速度低下に見合わないようにする必要があります。
- 小規模なレイアウト シフトが継続的に発生するページもあります。対象 たとえば、スコアが更新されるたびに少しずれるスポーツのスコアページなどです。これらの 時間の経過に伴う煩わしさは増すばかりです。そのため、 この種のレイアウト シフトに対してウィンドウを制限する必要がありました。
この 2 つを念頭に置いて、複数のデバイスでさまざまなウィンドウ サイズを比較し、 制限時間には 5 秒が最適であると結論付けました。 選択します。
ページの CLS スコアへの影響
この更新はページの CLS を制限するため、スコアが低下するページはありません 影響しています
Google の分析によると、オリジンの 55% で CLS に変化はまったく生じません。 確認できますこれは、ページにまだ Google がアクセスしていないか、 レイアウトシフトがあったり、シフトが 単一セッションウィンドウを使用します
それ以外のオリジンでは、75 パーセンタイルでスコアが改善され、 おすすめしますほとんどの組織はわずかな改善のみで、約 3% の 「改善が必要」から、スコアが向上している「悪い」など評価先 「良い」状態を評価。これらのページでは、無限スクローラーが使われているか、 ユーザー インターフェースの更新に時間がかかることがないよう、 投稿をご覧ください。
どうすれば試すことができますか？
近日中にツールを更新して、新しい指標の定義を使用できるようになります。それまでは、 CLS の更新版は、 JavaScript 実装 またはWeb Vitals のフォーク 拡張機能を使用します。
前回の投稿をお読みいただき、貴重なお時間を割いていただいた皆さま、 フィードバックをお寄せください。