Cumulative Layout Shift(CLS)
Layout Shiftの総和
ページが読み込まれ始めてから領域がずれた場合のズレ幅の和
viewport内が対象(それがLeyout Shiftの定義なので)
視覚の安定性を測る指標
予期せぬレイアウトのズレや崩れを独自に指標化
公式、詳しい
評価
スコアの値は小さいほど良い
0.1以内のLayout ShiftならGood
0.25以上ならPoor
計測する
やたらある
2021では、SPAのように裏側で生きているページも、評価の対象になるらしい #??
ユーザーの入力(クリックなども含む)から500ms以内に発生するLayout SfhitはCLSから除外される ref
視覚的に「ここがアウト」感を見るツールないんか？
あったとて改善方法がわからなければ微妙か
nextjs
原因
画像の縦横幅を指定してない
動画やiframeの縦横幅を指定していない
WebfontもFOUTやFlash Of Invisible Text(FOIT)により僅かだがLayout Shiftが起きる
動的にサイズ変更されるサードパーティの広告やウィジェット
改善する
詳しい
ズレるぐらいならLoadingを表示したほうがいいのか #??
これホンマにuserのためになっているのか微妙だが
youtubeのサイトとかとりあえず動画を爆速で表示させてるの、かなり良い気するし
書いてた