Cumulative Layout Shift (CLS) 対策する!

どうも、かつひで です

今回はこのサイトについてです

ウェブサイトを表示の速さ、見やすさなど様々な観点から
評価するサイト「PageSpeed Insights」があるのですが

Cumulative Layout Shiftという項目のラボデータは 0 なのにもかかわらず

フィールド データのみに赤い三角で印がつき、0.82という数値になっていました

このサイト「かつデジ」の評価を上げるために、

Web Vitals」というChromeの拡張機能を使い、調べてみると

スクロールしているうちに、数字がどんどん大きくなっていることに気が付きました

試しに、まずスクロールに追従するものすべて(グローバルナビ、目次)を解除してみたので、
それによりどうなるか、一ヶ月ほど検証していきたいと思います

変更前の Cumulative Layout Shift (フィールド データ)

現在検証中…