こんにちは。SaitoKouです。
4月の半ばごろから、Google Search Consoleで表示される「ウェブに関する主な指標」のうちのCLS（
Cumulative Layout Shift）の評価が急に悪化するという現象に遭遇しました。
サイトを立ち上げて間もないころ、Google広告を付けたあたりからCLSの評価が悪かったので、「画像の高さをあらかじめ指定しておく」のような対策は実施してありましたので、なぜだろうと疑問に思っていました。
今回その状況が改善されましたので、同じように困っている人のためにメモを残します。
そもそもCLS（Cumulative Layout Shift）とは？
CLSとは、ユーザーが操作していないにもかかわらず、勝手にWebページのレイアウトが変わってしまう現象のことです。よくある例としては、ページのテキストが表示された後、その上に配置されていた画像の読み込みが遅かった時などに、画像の高さの分だけテキストの位置が後でずれてしまうなどです。
↓参考文献
https://web.dev/articles/cls?hl=ja
この指標は、Googleの定める「ウェブに関する主な指標（Core Web Vitals）」の一つで、この評価が悪いと検索順位が悪化する可能性もあります。高評価に保っておくのは必須と言えます。
今回の改善方法が当てはまる（かもしれない）方
今回のCLS改善方法は、Pagespeed Insightでの「実際のユーザーの環境で評価する」でのみ評価が悪い方に当てはまる可能性が高い内容になります。「パフォーマンスの問題を診断する」での評価も悪い場合は、本記事で紹介する内容のみでは改善しない可能性が高いです。
両者のざっくりとした相違点ですが、「測定期間」です。
- パフォーマンスの問題を診断する：診断している今その時の評価。
- 実際のユーザーの環境で評価する：複数日かけて何回かアクセスしたときの評価
上記からすると、「実際のユーザーの環境で評価する」のときのみ評価が悪い場合、アクセスするタイミングによって、それぞれ表示内容が異っている可能性があります。
対策
私が行った対策は、「Google広告の全画面広告をOFFにする」です。CLSが1.00と評価された方は特にこれが怪しいです。自身のブログにGoogleの全画面の自動広告を設定している場合、この広告が表示されるタイミングが良くなく、CLSの評価を悪化しているものと思われます。
全画面広告を表示しつつ評価を改善したい場合は、ボタンクリックをした後に広告を表示するなどの制御ができればよいかもしれません。
この対策を実施した後は、その評価が改善されるまでに数日待つ必要があります。1週間もあれば再評価されると思いますので、それでも評価が変わらなければ別の原因を疑いましょう。
まとめ
ウェブに関する主な指標のうちのCLSが「実際のユーザーの環境で評価する」の時だけ悪化した場合、Google広告の設定を疑ってみることで改善できるかもしれません。皆さんももしこの状況で困っている場合は参考にしてみてください！
