Google Search Console「ウェブに関する主な指標:CLSに関する問題」対処方法

あるとき、Google Search Consoleを開いてみると、「ウェブに関する主な指標」に「不良」!!となっている項目がありました。

詳細を見てみると、「CLSに関する問題」だそうです。

今回は、「CLSに関する問題」を対処するための方法を解説します。

なお、こちらのブログはWordPressにCocoonがテーマなので、具体的な対処方法はそれらを使っていますが、原理がわかれば応用ができると思います。

CLSに関する問題とは何か?

まず、Google様の言うCLSとは、Cumulative Layout Shiftの略語です。

こちらに解説がありますが、

英語なので良くわかりませんね。

端折った解説をすると、ウェブページを表示するときには、まずテキスト部分を表示します。

その後、画像をはめ込みますが、テキスト表示時に仮置きした画像の大きさと違っていると、テキストのレイアウトがズレてしまいます。

そのズレの大きさをCLSとして数値化しています。

ズレが大きいと、誤クリックの原因となるので、Google様は0.1以上で「改善が必要」、0.25以上で「不良」としています。

CLSの数値を確認する方法

まずは、自分のウェッブページのCLSの値を確認してみましょう。

それは、PageSpeed Insightsで確認できます。

こちらのページで、調べたいURLを入れてみてください。

結果で表示される「ラボデータ」の「Cumulative Layout Shift」がそのページのCLSの値です。

Origin Summaryにも「Cumulative Layout Shift」がありますが、

こちらは、過去28日間で集計した結果なので、現在の値ではないです。

CLSの数値を小さくするには?

先ほどの解説で「その後、画像をはめ込みますが、テキスト表示時に仮置きした画像の大きさと違っていると、テキストのレイアウトがズレてしまいます。」と書きました。

WordPressのCocoonというテーマやGoogle Adsenseの広告はレスポンシブという技術を使って、パソコンやスマホのさまざまな画面の大きさに合わせて、画像の大きさを変えています。

そのために、テキスト表示時には画像の大きさが確定できないため、どうしてもズレが出てしまいます。

そこで、レスポンシブをやめて、画像の大きさを固定にすればCLSの数値は小さくなります。

ただし、レスポンシブをやめるのは、一番最初に画面に表示されている部分だけで、スクロールをしないと見えないところは、レスポンシブのままでOKです。

このブログのホームページを例にすると、ヘッダーとカルーセル、Googleの広告がレスポンシブになっています。

最初に表示される画像はこれだけなので、そこだけ対処します。

CLSに関する問題の対処方法

まずは、ヘッダー画像を固定化しましょう。

WordPressの「Cocoon設定」→「ヘッダー」に「高さ」と「高さ(モバイル)」があります。

初期値は何も入っていませんが、ここに適当な数値を入れましょう。

次にカルーセルです。

WordPressの「Cocoon設定」→「カルーセル」に設定するところがあります。

Cocoonのカルーセルは画像を固定化できないので、「表示しない」にします。

最後に、Google広告です。「Cocoon設定」→「広告」で、本文上にレスポンシブの広告を表示していましたが、これを外します。(外すのは最初の画面に表示される本文上だけで、それ以外はそのままでOKです)

次にGoogle Adsenseで、広告サイズ固定のディスプレイ広告を作成し、

そのコードをウィジットで本文上に貼り付けます。

そのようにして、ブログのホームページは以下のようになりました。

CLSに関する問題の対処の効果は?

劇的に改善されました!

モバイルで対応前:0.408 → 対応後:0.020

パソコンで対応前:0.170 → 対応後:0.014

です。ともに1/10以下ですね。

これで、Google Search Consoleでの評価もよくなるでしょう。

ちなみに、それ以外のTime to InteractiveとかSpeed Indexとかの数値が非常に悪くなっていますが、この原因はわかっています。Google Adsenseが遅いためです。対処のしようがないので、放置です。

コメント