Optimize Cumulative Layout Shift | Articles | web.dev

Published: May 5, 2020, Last updated: Feb 7, 2025 Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved. Layout shifts can be distracting to users. Imagine you've started reading an article when all of a sudden elements shift ar

[wdscratch]

“ラウザーの UA スタイルシートは、要素に設定されている既存の width と height 属性に基づいてデフォルトのアスペクト比を追加します。”

[yuki_2021]

CLSの具体的な修正手順。

[d4-1977]

CoreWebVaitalの話。

[efcl]

CLSはユーザ操作でレイアウトの大きな変化が500ms間発生しないかをスコア化したメトリクス。 0,1以下が目標値。 レイアウトのガタッ、FOUT、画像読み込み、動的なコンテンツの追加など。 最初からサイズの規定しておくこと