Cumulative Layout Shift (CLS)とは？累積レイアウトシフト

日本語役は累積レイアウトシフト (CLS)のようです。グーグルのページによると

Cumulative Layout Shift (累積レイアウトシフト数、CLS) は、視覚的な安定性を測定するための重要なユーザーを中心とした指標です。これは、ユーザーが予期しないレイアウトシフトに遭遇する頻度の数値化に役立つ指標であり、CLS が低ければ低いほど、そのページが快適であることが保証されます。

インターネットで記事を読んでいて、突然ページのレイアウトが変わってしまったことはありませんか？私の場合は大手サイトで結構あるなと思ってました。何の警告もなく文字が移動してしまい、自分がページ内のどこを読んでいたのか分からなくなってしまうことがあります。さらにひどい場合には、リンクやボタンをタップしようとしてから画面に指が触れるまでのほんの一瞬の間に “パッ” とリンクが移動してしまい、結局別のものをクリックしてしまう場合もあります。

ほとんどの場合、こういったユーザー体験は単に煩わしいだけなのですが、中には実害をもたらしてしまう場合もあります。

Googleの記事ですがGoogle広告はどうなのでしょう。

ページコンテンツの予期しない移動は、一般的にリソースが非同期的に読み込まれたり、ページ上の既存のコンテンツの上側に DOM 要素が動的に追加されたりする場合に発生します。原因としては、サイズが明示されていない画像や動画、フォールバックとして用意されているフォントよりも大きく、または小さくレンダリングされるフォント、動的にサイズが変更されるサードパーティ製の広告やウィジェットなどが考えられます。

この問題をさらに深刻なものにしているのは、開発段階でのサイトの機能が、実際にユーザーが体験するものとはかなり異なる場合が多いという点です。カスタマイズされたコンテンツやサードパーティ製のコンテンツは開発段階では本番環境と同じように動作しませんし、テスト画像については開発者のブラウザーキャッシュにすでに保存されている場合が多く、ローカル環境で実行される API コールも遅延に気付くことができないほど高速である場合が多いです。

Cumulative Layout Shift (CLS) 指標は、実際のユーザーに対するこの現象の発生頻度を測定することにより、この問題への対処をサポートします。

Cumulative Layout Shift (CLS)とは？

CLS は、ページの表示中に発生した予期しないレイアウトシフトごとにレイアウトシフトスコアの最大バーストを測定します。

レイアウトシフトは、表示された要素がレンダリングされたフレームから次のフレームへと位置を変更する際に発生します。(個々のレイアウトシフトスコアの計算方法に関する詳細については、以下を参照してください)。

セッションウィンドウと呼ばれるレイアウトシフトのバーストとは、それぞれが独立した 1 回以上のレイアウトシフトが、1 回のシフトが 1 秒未満、ウィンドウ全体で最大 5 秒間の長さで急速に連続して発生することを指します。

そして最大バーストとは、そのウィンドウで発生したすべてのレイアウトシフトを累積したスコアが最大となるセッションウィンドウのことを指します。

CLS における良いスコアとは？

良好なユーザー体験を提供するために、サイトは CLS スコアが 0.1 以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイルデバイスとデスクトップデバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。

レイアウトシフトの詳細

レイアウトシフトは Layout Instability API によって定義されており、ビューポート内に表示されている要素が 2 つのフレーム間で開始位置 (たとえば、デフォルトの writing-mode での top と left) を変更すると、layout-shift エントリがレポートされます。こういった要素は、不安定な要素としてみなされます。

レイアウトシフトは、既存の要素がその開始位置を変更する場合にのみ発生することにご注意ください。新しい要素が DOM に追加されたり、既存の要素のサイズが変更されたりしても、その変更が表示されている他の要素の開始位置の変更を引き起こさない限りはレイアウトシフトとしてカウントされません。