CLS に関する問題について

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

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

自分が色々試してみて不良から良好にできたので、解決方法をシェアします。最初にやったのが、HTML で画像サイズを指定していない部分を修正しました。次に、CSS で画像サイズを指定できる箇所は数値で指定し、画像サイズを”%”にしている場合は、外枠のブロック要素から必要最低限の縦幅を”min-height”で確保しました。横幅については、親要素で”width”を指定済みでした。それから2~3日後に不良から改善に変わりました。良好にならなかったのは、グーグル広告(レスポンシブ)自動広告”ON”を掲載していたためです。グーグル広告を外した後2~3日経過したら良好になりました。ただし、人(サイト)によっては1週間~2週間程度待たないと変わらないみたいです。ちなみに、PC の方は画像サイズを指定(確保)するだけで良好になっています。更新追記:以下はグーグル広告の検証結果です。検証結果はモバイルの方で、PC の方は広告を掲載してもずっと良好のままです。
― ディスプレイ広告 ―
・ページ上部にレスポンシブ広告:改善=黄色
・ページ上部に固定サイズの広告:改善=黄色
・記事中にレスポンシブ広告:改善=黄色
・記事中に固定サイズの広告:問題なし
― グーグルの自動広告 ―
・ページ内広告:未検証
・関連コンテンツ:未検証
・アンカー広告:ページにより:改善=黄色
・モバイル全画面広告:指標的には問題なし
当サイトの検証結果は以上です。ただし、当サイト独自の検証結果になっているので、あくまでも参考までにお願いします。サイトやブログによっては、全く違う結果になる可能性があります。特にアンカー広告が不良にも改善にもならないのが個人的には疑問なので、まだ検証するつもりです。からの、やっぱり改善になりました(笑)ギリギリアウトでした。記事中に固定サイズも再度検証してみます。また、ディスプレイ広告については”広告を表示するスペースを確保した上で”掲載したのですが、なぜか改善になるんですよね。ググると、広告を表示するスペースを確保できていれば問題ないという記事を見かけるので、ある程度アクセスのあるサイトで検証した結果から問題ないと言っているのかどうかわかりませんが、当サイトも再度検証してみようかなと思っています。★ 最終的に全部改善になりそうで怖いです。

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

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

個人的な分析と感想

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