WebPerformance

CLS はページを表示する最初の段階で決まることが多い

投稿日:

CLS の値は、session window というグループでレイアウトシフトが分けられ(時系列での分割)、その中で一番大きいものが、そのページの CLS値となります。

Webページというのは上の位置であればあるほど、当然その下にある要素が多いため、レイアウトシフトの規模は大きくなるはずです(下の要素がすべてずれるため)。つまり、ページの上部で起きたレイアウトシフトの値が、そのままそのページの CLS値になる(ことが多い)ということが言えそうです。その後にページをスクロールしてレイアウトシフトが再度起きたとしても、ページのCSL値は変わらない(ことが多い)ということです。

参考

📂-WebPerformance

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Vitals

Lighthouse が指摘する「Serves images with low resolution」について

Lighthouse が指摘する「Serves images with low resolution」について。

Web Vitals

Bento (Web Components版) の読み込みパフォーマンスを検証しました

Bento (Web Components版) の読み込みパフォーマンスを検証しました。

Web Vitals

PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

PageSpeed Insights などで指摘される「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」についてです。

Web Vitals

CLS対策:ページ上部にAdSense自動広告を表示させない

CLS対策:ページ上部にAdSense自動広告を表示させないようにしましょう。

Web Vitals

AdSense の自動広告が CLS に与える影響について

CLSと、AdSense の自動広告についての考えを書いています。