Google Search Console CLSに関する問題
CLSに関する問題ってどういう問題？
CLS（Cumulative Layout Shift）の略 Google Search Consoleではウェブに関する主な指標レポートの項目で警告、エラーとして表示されますが一体何が問題なのでしょうか？
CLS とはページが読み込み完了するまでにコンテンツの位置がどれだけ移動するかを示したスコアとなり画像など表示領域が確保されていないエリアで読み込み前、読み込み後でコンテンツの表示位置が移動しているということを示しています。
ページを見ていてリロードする度に表示位置またはテキストの位置が変わったりするページです。
ページのCLSのスコアを確認するには？
PageSpeed Insightsを使用して確認することが出来ます。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
「CLSへの影響」スコアの合計が1以上になると「改善が必要」、2.5を超えると「不良」判定になってしまいます
CLSの問題を改善するには？
- PageSpeed Insightsにてスコアの高い部分を確認。
- その表示エリアがレイアウト変化が発生しているかを確認。
- CSSでズレの発生しているエリアの領域を予め確保する記述を追加しレイアウト変化が少なくなるように修正
- 再度PageSpeed Insightsでスコアを確認し改善されたかを確認する
上記の流れで対応を行うことで改善ができます。
CSSで領域を予め確保するには
.img_area { height: 20vw; }
といった感じに画像を表示させる親要素で予め画像のサイズ分の領域を確保しておけば画像読み込み前、後でのレイアウト変更を減らすことが出来ます。
