Cumulative Layout Shift（CLS）
(web.dev)画像/広告の読み込み遅延、非同期動作、動的なDOM変更などによって
Webページのレイアウトがどの程度変化するかを測定し、
ユーザーの誤クリックを誘発しうる視覚的な不安定さをチェックするユーザー中心のパフォーマンス指標
「良いCLSスコアは0.1以下」
Layout Instability API により、Layout Shift Score という測定値を提供
- Layout Shift Score = impact fraction（どの程度の大きさのオブジェクトが移動するか）* distance fraction（どれだけ大きく移動するか）
- ユーザーの操作によってレイアウトが変わるのは問題ない - 500ms以内にユーザー入力があった場合は hadRecentInput が設定されるため、計算から除外可能
- height/width を変える代わりに、transform:scale() を使用
- top,right,bottom,left を変える代わりに、transform: translate() を使用
CLSを改善する方法
- 画像/動画には常にサイズを指定するか、CSS Aspect Ratio Boxes などで位置をあらかじめ確保しておくこと
- ユーザーインタラクションを除き、コンテンツの上に新しいコンテンツを追加しないこと
- 状態間の変化は CSS Transform などでアニメーション処理すること
4件のコメント
押そうとした瞬間に突然レイアウトが少し変わって誤タップしてしまうことがよくあって、イラッとすることが多いのですが、これを定量的に測定する方法がついに出てきたんですね。個人的には、ニュースサイトのホームページでこれを測ってみたら、悲惨な数値が出るのではないかと思います。
韓国国内のメディアは広告が多すぎるうえ、その広告自体も遅くてちらつくので、これを測定すること自体あまり意味がないように思います…。
別の話ですが、私は https://github.com/disjukr/just-news と Tampermonkey を使って、韓国国内メディアは本文だけ見ています。Webサイトがあまりにもごちゃごちゃしています。
以前、Pythonで[新聞社の記事リンクを入れると自動でポータルのニュース記事リンクに変換してくれるプログラム]を書こうとしたこともありました。ちょっと間抜けなことにソースコードを吹き飛ばしてしまって（保存先を誤ってRAMドライブにしていて、そのまま再起動）、賢者タイム（？）が来てやめてしまいました。
ユーザー中心のパフォーマンス指標
https://web.dev/user-centric-performance-metrics
https://developers.google.com/web/fundamentals/…
従来の load、DOMContentLoaded は良い指標ではない
First contentful paint (FCP): 画面に最初のコンテンツが表示され始めるとき
Largest contentful paint (LCP): ページ内で最も大きいテキストブロックまたは画像が表示されるとき
First input delay (FID): ユーザー入力が可能になってから、実際にブラウザがそれに反応するまでにかかる時間
Time to Interactive (TTI): ロード開始から、ユーザーインタラクションが可能になるまでにかかる時間
Total blocking time (TBT): FCP と TTI の間の合計時間
Cumulative layout shift (CLS): レイアウト変化の指標