技術Labo

気になったことやちょっとした作業の覚書

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; }

といった感じに画像を表示させる親要素で予め画像のサイズ分の領域を確保しておけば画像読み込み前、後でのレイアウト変更を減らすことが出来ます。

関連記事

フリースタイル
WEBシステムエンジニア
制作作業の合間に、情報の整理。ポートフォリオ用まとめサイト
Lancers にてお仕事中

別れが必然ならば
出会ったことを後悔してないか?

STEINS;GATE
by 岡部 倫太郎