CLS に関する問題について

CLS( Cumulative Layout Shift )に関する問題について紹介しています。本や雑誌は全く関係のないページです。注意:このページに関する質問や問い合わせ等は一切受け付けていません。解決方法をシェアするだけのページなので問い合わせしないで下さい。まず、CLS( Cumulative Layout Shift )とは、主にレイアウトに関する指標で、CSS・HTML・JavaScript(レイアウトに関するソースコード)などに問題があると不良(赤色)になります。特に、画像サイズを指定していない(画像を表示するスペースを確保できていない)とエラーになるみたいです。また、レイアウトに問題がなくても、自動広告やグーグル広告を掲載していると改善(黄色)になりやすいみたいです。この記事は、2020年6月に作成し、2020年6月に更新しました。

CLS に関する問題の解決方法

自分が色々試してみて不良から良好にできたので、解決方法をシェアします。最初にやったのが、HTML で画像サイズを指定していない部分を修正しました。次に、CSS で画像サイズを指定できる箇所は数値で指定し、画像サイズを”%”にしている場合は、外枠のブロック要素から必要最低限の縦幅を”min-height”で確保しました。横幅については、親要素で”width”を指定済みでした。それから2~3日後に不良から改善に変わりました。良好にならなかったのは、グーグル広告(レスポンシブ)自動広告”ON”を掲載していたためです。グーグル広告を外した後2~3日経過したら良好になりました。広告サイズを指定すればグーグル広告を掲載したままでも良好になる可能性がありますが、まだ検証していないのでわかりません。SEO 効果についても未検証です。ちなみに、このページ(カテゴリ)はグーグル広告(レスポンシブ)自動広告を有効(ただしページ内広告と記事内広告は無効)にしているため、モバイルの方が改善(黄色)のままです。PC の方は画像サイズを指定(確保)するだけで良好になっています。今後は、グーグル広告を掲載したままでもモバイルの方で良好になるように検証していこうと思っています。

ウェブに関する主な指標レポート( Google )

Google(グーグル)のウェブに関する主な指標レポートの公式ページです。レイアウトに関する問題を解決しても不良(赤色)のままの場合は、その他の指標でも問題が発生している可能性があります。CLS(レイアウトに関する部分)だけではなく、他の指標についても調べてみて下さい。

個人的な分析と感想

当サイトの解決方法を書いただけなので、このページの情報が有用かどうかわかりませんが、自分が最初にこの問題に直面した時にわけがわからなかったので、誰かの役に立つかもしれないと思ってとりあえずシェアしています。色々な解決方法があると思うので、あくまでも参考までにお願いします。また、ちょっとずつ修正して検証しているので、当サイトはまだすべての画像サイズを指定(画像スペースの確保を)していません。ファーストビュー(ページの上部)だけ修正して検証したら不良から良好になったので、もしかしたら重要なのはファーストビュー(ページの上部)だけで、ページの中~下部は修正しなくても良好になる可能性があります。ちなみに、当サイトの CSS や HTML はきちんと書かれているとは言い難い残念なサイトなので、ソースコード自体は全然参考になりません。自分でも訳がわからなくなることがあるくらい、すごい微妙な CSS です(笑)今後また何かわかったら追記や修正をしてシェアできればと思っています。