『CLSに関する問題: 0.1超』って何？対処法を解説！！

数ヶ月前、Google Search Consoleを使っていると「CLSに関する問題: 0.1超」というものが表示されました。

先日、修正が完了し、無事問題が解決しました。

サーチコンソールでは「CLSに関する問題: 0.1超」とか「CLSに関する問題: 0.25超」というのがよく表示されます。

今回はそんな筆者の経験から「CLSに関する問題」とは何か、具体的な対処法まで詳しく解説していきます。

「CLSに関する問題」って何？

CLS（Cumulative Layout Shift）はサイトを読み込む時に「サイトを読み込む間にどれくらい要素が移動してしまうか」を表しています。

サイトを読み込んだ時にクリックしようとすると、それが移動して別のものをクリックしてしまったことはありませんか？

CLSが高いということは、サイトを読み込む間に、画像や文字などがどんどん移動してしまうことを指しています。

CLSが高いと間違ったクリック、特に興味がない広告をクリックしてしまうなどの問題が発生します。

Googleはこれをあまり好ましく思っていないので、GoogleSearchConsoleなどで警告しています。

CLSに関する問題が出る原因

Googleアドセンスなどの広告

一番多い原因がこちらだと思います。
広告を読み込む際に今ある文字を押しのけて表示してしまうため、要素が移動してしまいます。

高さが指定されていない画像がある

画像をサイトに貼るときは大きさが指定できます。

しかし、大きさを指定していないと、画像が表示された時に別の要素を押しのけてしまうことがあり、CLSが高くなる要因にもなります。

CLSの問題の対処法

広告が表示されるスペースを予め確保しておくことで、要素の移動を防ぐことができます。

自分のサイトで広告が表示されている部分にCSSで高さを追加します。

デベロッパーツール等で該当箇所のidやclassがわかる場合は、そこにCSSでmin-height:300pxなどを追加すれば問題ありません。

よく分からない人向けに、ちょっと別のやり方を解説します。

プラグインをインストール

「Widget CSS Classes」というプラグインを導入します。プラグインの検索画面で検索してダウンロードして有効化してください。

ウィジェットの管理画面でクラスを追加

ウィジェットのページで該当の広告のところを選択すると下の方にCSS Classesという項目があります。

ここに google_ad1 と書きます。（HTMLやCSSがわかる方はお好きなものに設定していただいて構いません
そして保存してください。

CSSを追加する

「外観」「カスタマイズ」から「追加CSS」のところに以下のものを追加して下さい。

/* CLS対策用 */
.google_ad1{
	min-height:300px;
}

これでCLSが抑えられるはずです。

もし、複数箇所でやりたい場合はウィジェットに追加するクラスをgoogle_ad2などにして同じことをやってください。

まとめ

今回はGoogle Search Consoleで出てくる、『CLSに関する問題: 0.1超』や『CLSに関する問題: 0.25超』などへの原因や対処法、そもそも「CLSとは何か」について書きました。

CSSで高さを指定することによって、CLSの数値を減らすことができるので、是非やってみてください。