『CLSに関する問題：0.25超』が発生した場合の対処方法

写真系ブログを謳いつつ、本トピックはどうかな？と思うのですが、これも忘れてはいけない思い出として記載しています。

Search Console上に、ある日突然表示されたステータス不良の通達『CLSに関する問題：0.25超』。

モバイルは問題ないがPCで大量のエラーが発生している様子。
172件も発生とは、これにはビビります。

個人的な趣味ブログだし、細かいことにあまり囚われずに好きな様に記事を書こうと思っているのですが、これはどうにも無視出来ない雰囲気が・・・

非IT系人間が対処した日々の一部始終を記していきます。

✳︎ワードプレスのテーマはCocoonを使用させて頂いております。

CLS（Cumulative Layout Shift ）とは？

Search Console内のSLSについての詳細から飛ぶweb.dev.の説明（英語ですが自動翻訳で読んでも一番わかりやすいと思う）によると、

「ユーザー視点で、ウェブページのビジュアル面での安定性はとっても重要。レイアウトがガクガク動く様なページは快適とは言えず、動きが少ない程ユーザーにとって良いページです」

みたいな概略が冒頭に記されています。

ページの動きが”レイアウトシフト”と言われても初めはピンと来なかったのですが、Serch Console内での問題指摘を見て納得。
確かに見たことのある現象でした。

本サイトページの問題点：PCページでの広告の現れ方

以下の画像はSearch Console内で”レイアウトシフト”の状況を明示した部分のスクショです。小さな表示で見づらいですが、ページが表示されていく過程が表されています。

これらの画像から直接原因を特定出来ませんが、重大なヒントにはなってくれます。

修正作業前のスクショを撮っていなかったので、上の画像（１０枚目）を活用したのが下の画像。

記事タイトル上とサイドバートップ部分に大きなバナー広告が入っているのですが、これらが出現するのが遅くなっています。

ページの表示過程の画像だと８枚目から漸く広告が出現。

そして実際のサイトで目を凝らしながら見ていると記事タイトルやアイキャッチ画像の位置が広告出現を境に若干シフト（レイアウトシフト）していることが判明。

この現象によるユーザー側の弊害としては、『自分の意図しない要素をクリックしてしまう恐れがある』ということ。

つまり『販売店Aのリンク』をクリックしたつもりが、実際にはページ要素のシフト（動き）により『販売店Bのリンク』をクリックしてしまった・・・このような意図しない結果を招く可能性が発生します。

確かにこれはまずいですよね。

対処したこと

おそらくの原因は特定出来たので、後は対処するのみ。

アドセンスの自動広告を停止

広告のサイズをしっかりと設定しておけば良いのかと思いつつも、自動広告での広告位置がどうもイマイチでうるさく思えたので、記事タイトル上とサイドバー上部の広告は止めることに。

自動広告停止後の状態です。タイトル上は確かに広告一等地なのでしょうが、やはりスッキリなってよかった。

自動広告　停止前と停止後の比較

Search Console内のPage Speed Insightで計測された値は以下の通り。

自動広告の停止前のCLSは0.197に対して停止後は0.015と数値はかなり改善されました。

無事合格になった

ページの修正完了後、確認を申請、無事合格になりました。

確認をお願いしてから直ぐに”合格”が出たわけではなく、私の場合１週間ほどかかりました。

まとめ：でも”改善が必要”な状態

CLSに関する問題：0.１超（パソコン）

ほっとしたのも束の間。

次は『CLSに関する問題：0.１超』がやっってきました。

ここまで来ると自力（自分のレベル）ではどうしようもない感じなので、しばらくは記事を書くことに注力することにします。