Web技術の基礎
Webページの体験を表す指標であるCore Web Vitalsのうち、CLS(Cumulative Layout Shift)が表すものはどれか。
- Aページの読み込みで、画面の中で最も大きな画像や文章のかたまりが表示されるまでの時間
- B利用者のクリックやキー入力から、その結果が画面に描画されるまでの遅れ
- C表示の途中で、後から読み込まれた画像や広告などによって、要素の位置が予期せずずれた量
答えと解説を見る
正解：C. 表示の途中で、後から読み込まれた画像や広告などによって、要素の位置が予期せずずれた量
Core Web Vitalsは、読み込みの速さを表すLCP(Largest Contentful Paint)、操作への応答の速さを表すINP(Interaction to Next Paint)、表示の安定性を表すCLSの3つの指標からなります(INPは2024年3月にFIDに代わって加わりました)。CLSは、後から現れた画像や広告によって文章などが押し下げられるような、予期しない位置のずれを数値にしたものです。画像や動画に width と height を指定して、表示する場所を先に確保しておくと、CLSを小さくできます。
- A. これはLCPです。読み込みの速さを表す指標です。
- B. これはINPです。操作への応答の速さを表す指標です。
- C. 正しい。CLSは表示の安定性、つまり予期しないレイアウトのずれを表します。