【Luxeritas】CLSに関する問題:0.25越(モバイル)が出た時の原因と対処方法【WordPress】【簡単解決】
ここに来られたということはCLS問題でお困りのことでしょう。
私も出たり出なかったりで、原因が分からず困っていたところ急に解決したので紹介します！
発生した事象
Google Search Consoleの「ウェブに関する主な指標＞ モバイル ＞ CLSに関する問題: 0.25越え (モバイル)」といった部分が完全にアウトになってました。。。
不良として判断されてしまったページの中で一つを抜粋して「PageSpeed Insights」を開いてみましょう。
PageSpeed Insightsを開いてみるとまず最初に、「実際のユーザの環境で評価する」といった項目でウェブにかんする主な指標の評価が出てきます。
悲しいことに不合格ですね。。。
ここに関しては過去28日間の統計情報から評価を出しているので、一旦置いときます。
下にスクロールすると、「パフォーマンスの問題を診断する」といったリアルタイムで評価された項目が1～2分ほどで表示されます。
ここのCumulative Layout Shift(CLS)というページのズレなどの視覚的観点で評価している項目で不良と判断されています。
例えば、記事を読んでいる途中でいきなりレイアウトがズレて広告が表示されて間違えて押してしまったなどの経験はありませんでしょうか？
こういったズレを利用した広告費稼ぎなどを防ぎ、ユーザの快適さを保つために設けられている評価項目なのですが、はやなLabにはそういった機能は無くモバイルのみ不良扱いになっているので困ってしまいました。
0.25がボーダーラインに対して0.318なので中々にアウトですね…
CSLの評価基準
ここではざっくり説明しますが、ページを表示している画面(スクロールなしの状態)でほぼ全ての画面にズレやスライドインがあった際を1としたとき「どのくらいの面積で影響があったのか？」×「どのくらいの高さで影響があったのか？」で算出しており、Google推奨の基準値は以下の通りです。
-
良い：CLS ≤ 0.1
-
改善が必要：0.1 < CLS ≤ 0.25
-
悪い：CLS > 0.25
はやなLabが0.3越えということは、画面に対して大体3割ほど影響があった感じなのかなぁと思います。
CLSが不良になってしまった原因と対処方法
SNSシェアボタン
CLSに影響が出るのは基本的には、画像のサイズが画面サイズに対して可変的な調整ができるように設定されている場合や、機能として意図的に用意している場合などがありますが、、、
WordPressの人気テーマLuxeritas(ルクセリタス)を使用している場合は、SNSシェアボタンが影響している場合があります。
見た目も変になってになってますね。。。
不良URLの原因の一部になっているので、消してしまいましょう。
削除方法はWordpress管理画面から「Luxeritas ＞ カスタマイズ(外観) ＞ SNSシェアボタン(1) 」まで遷移し、「記事上の SNS ボタン表示」のチェックを外して、「公開」を押下して設定を適用します。
Googleアドセンス
サイトに遷移してすぐに出てくるタイトルなどが映っている部分周辺では、広告が映らないようにしましょう。
特にアドセンスの自動広告設定をONにしている場合は、除外設定などを使ってタイトル周辺に広告が出ないように設定する必要があります。
異常なまでに仕込もうとしてくるので徹底的に除外設定してください。
設定された除外エリアは他の記事ページにも反映されるので、全ページで設定する必要はありません。
なんなら自動広告設定は切った方がいいかもしれないです。
除外エリアの設定が出来たら、「サイトに適用」を押下すれば必要以上かつSEO的に邪魔な広告はなくなります。
Gooleアドセンスのアンカー広告
アドセンスのアンカー広告を使っているサイトはCLS影響大の設定があります。
赤色の部分がアンカー広告によるレイアウトシフトです。
明らかに影響があるのでCLSの問題解決としては、アンカー広告を使用しないというのが正解です！
アンカー広告を消す方法は、Googleアドセンスの管理画面から左側の「広告」を押下 ＞ 「サイトごと」タブを押下 ＞ 編集 ＞ オーバーレイ フォーマット ＞ アンカー広告のチェックを外す > 「サイトに適用」で完了です。
解決確認
再度、PageSpeed Insightsで不良対象であったページの分析を再度してみます。
CLSを確認すると。。。
CLSは0になっていたので、無事解決しました！
これで近いうちにGoogle Search Console側の不良URLもなくなることでしょう！
他のイエロー項目は、、気が向いたらやります！