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

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

Addy Osmani
Addy Osmani
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

本日は、Chrome の多くのウェブツール サーフェスにおける 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 レポートなど、Chrome の多くのウェブツール サーフェスに展開されました。以下に、CLS ウィンドウ調整のロールアウトの概要と、元の実装に対するベンチマークを引き続き利用できるツールを示します。

ツール CLS ウィンドウ処理調整「ライブ」 「旧」CLS の提供状況
Lighthouse DevTools パネル Canary チャンネル、2021 年 6 月 2 日 なし
Lighthouse CLI v8（2021 年 6 月 1 日リリース） Lighthouse v8 では totalCumulativeLayoutShift として利用可能
Lighthouse CI バージョン 0.7.3、2021 年 6 月 3 日 なし
PageSpeed Insights（PSI） 2021 年 6 月 1 日 なし
PSI API 2021 年 6 月 1 日 lighthouseResult で totalCumulativeLayoutShift として利用できます。フィールド「loadingExperience」のデータでは使用できません
Chrome UX レポート（CrUX） - BigQuery 202105 年データセット（2021 年 6 月 8 日公開） 2021 年まで experimental.uncapped_cumulative_layout_shift で利用可能
Chrome UX レポート（CrUX） - API 2021 年 6 月 1 日 2021 年 6 月 1 日以降、 experimental_uncapped_cumulative_layout_shift 2021 年 12 月 14 日で利用可能

ウィンドウ処理の調整に対応するように、Chrome DevTools もまもなく更新されます。CLS の更新は Search Console にも行われており、2021 年 6 月 1 日から反映されます。

ほとんどのデベロッパーにとって、この変更はシームレスに行われることが想定されており、修正によって取得されたデータを利用するためのアクションは必要ありません。

「旧」CLS

「旧」CLS では、ページの存続期間全体でレイアウト シフトが測定されます。一部のデベロッパーは、ウィンドウ調整とあわせて CLS の以前の定義をモニタリングしたいと考えているかもしれませんが、Lighthouse と CrUX で「古い CLS」を公開しました。

Lighthouse v8 では、JSON で audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift として使用できます。

CrUX API では experimental_uncapped_cumulative_layout_shift、CrUX BigQuery では experimental.uncapped_cumulative_layout_shift です。

6 月 1 日以降、CrUX API リクエストは「以前の CLS」指標を返します。

{
  "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

「以前の CLS」は 2021 年 12 月 14 日に廃止されますが、最大 6 か月間はこのデータを引き続き利用できます。

Lighthouse での CLS の重み付けの更新

Lighthouse に初めて導入された CLS は キラキラする新しい指標でしたそのため、デベロッパーがテスト、ベンチマーク、最適化に時間をかけられるように、CLS のパフォーマンス スコアへの影響が小さくなりました。

そして、Lighthouse のスコアによって CLS の重みが 5% から 15% に引き上げられました。これは、Lighthouse スコアの中で最も重み付けの大きい指標として Core Web Vitals を最も重視する手法と整合しています。

Lighthouse v8 で更新された指標の重み付けは、スコア計算ツールで確認できます。

Lighthouse のスコア計算ツール

Lighthouse 8.0 の CLS 実装には、ウィンドウ処理とサブフレームからの CLS の両方が含まれます。8.0 より前の Lighthouse の CLS では、サブフレームの CLS が指標の計算に含まれていませんでしたが、含まれるようになりました。念のため、CrUX で測定されたフィールド CLS はウィンドウ処理とサブフレームも同様に処理します。

ラボ 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 のトライビニングのしきい値を次のように更新しました。 良い: [0-1.8s]、改善が必要: (1.8-3s)、悪い: [3s-∞]

まとめ

この変更は、ほとんどのサイトでスムーズな移行を反映するものと予想されます。レイアウト シフトを測定して最適化するためのヒントについては、ウェブに関する指標と CLS の最適化をご覧ください。指標に関するフィードバックや、ツール固有のフィードバック フォーラム（Lighthouse）や Chrome UX レポート（ツールに関する問題）については、通常どおり web-vitals-feedback グループからお気軽にご連絡ください。乾杯！

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

ヒーロー画像（投稿者: Barn Images / @barnimages、Unsplash）