「CLSに関する問題:0.1超(パソコン)」になり続ける意外な原因

PC&スマートフォンの記事

本記事はアフィリエイト広告およびリンクを含みます。

Google Search Console にて「CLS に関する問題: 0.1 超(パソコン)」となっていて「この問題がある URL のページ エクスペリエンスは改善が必要です」と怒られ続けていた。

CLS低下原因の確認

CLSのスコアは、レイアウトシフトにおける、影響の割合 と 距離の割合 の積 で表しますが、移動する要素が画面内に占める割合が大きいほど、また、移動する距離が大きいほどスコアは低下します。

CLSに関する問題とは:指標の概要と確認方法、改善方法を解説します : テクニカルSEO BLOG より引用

表示する要素が何らかの原因でズレてしまうのがいけないらしい。

多分、クロールされた記事すべてがズレている判定になっている。
パソコンのみ、この問題が起こっていて、モバイルの方は良好。

CSSやプラグインが悪さしている?
だが、片方だけというのが、よく分からない。

引用したサイト記事によるCLS低下の原因をまとめると

  • 画像の読み込みが遅い
  • CSSの読み込みが遅い
  • ウェブフォントの読み込みが遅い

など。

ひとつずつ確認していった。

画像の読み込みが遅い

記事内に画像を載せることはあるが、品質を損なわない程度に圧縮したものを載せている。
出来るだけ軽いサイズにしているので、読み込み速度は問題なさそうだが……。

HTML上の画像を扱うタグにheight属性(高さ)width属性(幅)を直接指定しておくことで、あらかじめ画像を表示する領域が確保されるようになり、レイアウトシフトを防ぐことができます。

CLSに関する問題とは:指標の概要と確認方法、改善方法を解説します : テクニカルSEO BLOG より引用

とあるので、読み込み速度というより、置く場所自体が確保されていないのが原因?
んー、わからん。

CSSの読み込みが遅い

ほとんどデフォルトの状態のテーマ( Luxeritas )をそのまま使っているので、問題なさそう。
何か問題があれば、更新があるだろうし。
子テーマのCSSやその他もろもろも確認したが、ほとんど追記はなかった。

ウェブフォント読み込みが遅い

サイトタイトルにウェブフォントを使っている(はんなり明朝)。
だいぶ昔に設定したままだったので、確認して設定し直してみたが、変わらず。

なんだろうなぁ……。

Search Console の検査が1~2週間程度かかるので、変更した結果をすぐに分からないのがネック。
結局解決できずに1~2ヶ月くらいは経っていた。

WordPress の設定

一通り見て、関連がありそうな設定を探したが収穫なし。

プラグインのON/OFF

関連がありそうなプラグインを探したが、こちらも収穫なし。
試しに入れているプラグインを順次OFFにしてみて、どうなるかやってみたが、変わらず。

うーん。分からない。
それからしばらくして、もうずっと放置でもいいかと思っていた矢先。

原因これじゃない?

Google AdSense 自動広告

サイトタイトルの下に自動広告が入っている。
その下にあるものすべてがズレていることになる。

だが Search Console も AdSense も同じ Google のサービスである。
そのため Search Console が怒っていた原因が AdSense にあるなんて考えもしなかった。
同じ会社のサービス、しかも自動広告なので、その辺りも調整してくれているのかと。

毎回表示されるわけでもなかったので、気付くのがさらに遅れてしまった。
表示されていなくても、ズレている判定になっているのだろうか?

引用した記事には広告コンテンツが原因で起こる場合があると書いてあった。
ここにヒントがあったなあ。
CLSに関する問題とは:指標の概要と確認方法、改善方法を解説します : テクニカルSEO BLOG

自動広告の設定を見直す

AdSense にログインして、自動広告の設定を見直す。
ずっと前に設定したきり、そのままだった。

表示する広告の種類を設定したり、表示しない場所(除外エリア)を選べるらしい。
設定したときも出来たのだろうか?
まったく覚えていない。

とりあえず、ヘッダー周辺はすべて除外エリアにした。
ついでにオーバーレイフォーマットの広告もすべてオフに。

これで様子を見る。

すべて「良好URL」に

1ヶ月後くらいに Search Console を見たら、PCとモバイル両方とも、すべて「良好URL」になっていた。
やはり AdSense の自動広告が原因だったようだ。

それにしても、モバイルは良好URLだったのはなぜなのだろう。

モバイルではヘッダー周辺に入る広告自体がなかったのだろうか。
だが、広告が表示されていなくても、CLSのズレにはカウントされているはずである。

結局分からないが、まあいいか……。