ウェブツールにおける Cumulative Layout Shift の進化

本日より、Lighthouse、PageSpeed Insights、Chrome UX レポートなど、Chrome の多数のウェブツール サーフェスで CLS への変更がリリースされました。

Addy Osmani

Elizabeth Sweeny

本日は、Google がどのようにして Cumulative Layout Shift（CLS） 指標を確認できます。 デベロッパーにとって、これらの変更は、 有効期間が長いページ （無限スクロールやシングルページのアプリなど）。 これらの CLS の更新は、Lighthouse、 PageSpeed Insights、Chrome UX レポートなどです。

ウェブでのレイアウト シフトが少なくなったらと思いますが、 ここで、CLS 指標がウェブページの視覚的な安定性を測定するのに役立っています。 サイトでコンテンツのディメンションをより適切に設定できるようになり、 画像や広告など コンテンツの驚くべき飛躍につながる可能性があります。

指標の名前は「累積」です。 各シフトのスコアがページのライフサイクルを通じて合計されるためです。 ウェブ上でのレイアウト変更はすべて ユーザーエクスペリエンスの低下につながりますが シングルページ アプリ（SPA）や無限スクロール アプリなど、存続期間が長いページでは、時間の経過とともに多くの CLS が自然に蓄積されます。 集計を最も悪い「ウィンドウ」に制限するシフトの セッション継続時間に関係なく、CLS をより一貫性のある方法で測定できるようになりました。

CLS 指標の進化でお知らせしたとおり、CLS 指標を ギャップ 1 秒の最大セッション ウィンドウ、上限 5 秒 この更新は、有効期間の長いページのユーザー エクスペリエンスをより正確に反映するものです。 この変更を導入したことで、 オリジンの 70% では、75 パーセンタイルで CLS の変化は見られない。 残りの 30% のオリジンには改善が見られます。

ウィンドウ処理の調整を CLS にロールアウトする

更新後の CLS の定義では、1 秒間のギャップがある最大セッション ウィンドウと定義されましたが、 5 秒としていますこれはツールにとって何を意味するでしょうか。

本日より この CLS への変更は、 Lighthouse、PageSpeed Insights、Chrome UX レポートなどです。 CLS ウィンドウ調整のロールアウトの概要を以下に示します。 どのようなツールが元の実装に対するベンチマークを 引き続き利用できるかを確認します

ウィンドウ処理の調整をサポートするため、Chrome DevTools も近日中に更新される予定です。CLS の更新は Search Console にも行われており、2021 年 6 月 1 日から反映されます。

ほとんどのデベロッパーにとって この変更はシームレスに実施されるものと想定されており、修正で得られたデータを活用するために必要な操作はありません。

「旧版」CLS

なお、「古い」テーブルはCLS は、ページの存続期間全体でレイアウト シフトを測定します。一部の開発者はウィンドウ調整とともに古い CLS の定義をモニタリングしたいと考えるかもしれませんが、 お知らせがあります。「古い CLS」を公開します。いくつかご紹介します

Lighthouse v8 では、 JSON 形式で audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift。

これは次のように表示されます。 experimental_uncapped_cumulative_layout_shift CrUX API に用意されており、 CrUX BigQuery の experimental.uncapped_cumulative_layout_shift。

6 月 1 日以降、CrUX API リクエストでは「古い CLS」が返されます。metric:

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

6 月 8 日以降 CrUX BigQuery 新旧の CLS:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

このデータは最大 6 か月間、引き続き利用できます。 「old CLS」2021 年 12 月 14 日に退職します

Lighthouse で CLS の重み付けを更新する

CLS が Lighthouse で初めて導入されたときは、 まったく新しい指標になりました そこで、開発者が十分な時間をかけてテスト、ベンチマーク、 パフォーマンス スコアで CLS の重み付けが軽くなりました。

開発者の手に渡ってから Lighthouse のスコアでは CLS の重みが 5% から 15%に Core Web Vitals の実装方法と Lighthouse スコアの中で最も重み付けの高い指標になる。

Lighthouse v8 における指標の重み付けの更新は、 スコア計算ツール。

Lighthouse 8.0 の CLS 実装には、ウィンドウ処理とサブフレームからの CLS コントリビューションの両方が含まれます。8.0 より前のバージョンでは、Lighthouse の CLS にサブフレームが含まれていなかったCLS が使用されますが、現在は実行されています。確認ですが、CrUX によって測定されるフィールド CLS も、ウィンドウ処理とサブフレームを同様に処理します。

それでも、ラボとフィールド CLS の主な違いは、ラボ CLS の観察期間は「完全に読み込まれた」時点で終了する点です。これに対して、フィールドでの観測期間は、読み込み後のアクティビティを含むページ全体の期間に及びます。とはいえ、ウィンドウ処理を調整することで、この差は大幅に軽減されます。

現場での測定

最新の CLS 実装を測定する場合は、 また、こちらの PerformanceObserver スニペットを使用して、RUM でフィールド データのこれを記録することもできます。

または、 Web Vitals JavaScript ライブラリ この変更で更新されました。

その他の最新情報

Cumulative Layout Shift のアップデート以外に、 ウェブツールにも以下の指標関連の更新が行われました。

• 更新中 Largest Contentful Paint 指標の最新の定義をご覧ください。 CrUX API、PSI、PSI API、Search Console が 2021 年 6 月 1 日に更新されます。CrUX BigQuery が 2021 年 6 月 8 日に更新されます。
• CrUX で、First Contentful Paint の 3 ビニングしきい値が次のように更新されました。 良い: [0 ～ 1.8 秒]、改善が必要: (1.8 ～ 3 秒)、悪い: [3 秒～∞]

まとめ

今回の変更により、ほとんどのサイトがスムーズに移行されることが予想されますので、 Web Vitals CLS を最適化する をご覧ください。 ご不明な点などございましたら、 web-vitals-feedback グループ 指標に関するフィードバックや、Google のツールに関する Lighthouse Chrome UX レポート 確認しましょう乾杯！

フィードバックをいただいた Johannes Henkel、Rick Viscomi、Vivek Sekhar、Rachel Andrew、Miliica Mihajlija、Jeff Jose、Paul Irish に感謝します。

ヒーロー画像提供: Barn Images / @barnimages、Unsplash より