【Googleサーチコンソール】「CLSに関する問題：0.25超」の改善方法を徹底解説！

Webサイトを運営しているならば、日々、Googleサーチコンソールを活用して分析をしていると思います。そのなかでサーチコンソールの「WEBに関する主な指標」に「CLSに関する問題：0.25超」と表示されたことはないでしょうか。

CLSは「Cumulative Layout Shift」の頭文字を取った略称であり、ユーザー体験向上のための指標のひとつです。SEOにも多少ながら影響してくると考えられます。よって、「CLSに関する問題：0.25超」を放置していると、検索順位が下がることもあるでしょう。

そこで本記事では「CLSに関する問題：0.25超」に関して、概要や解決策などをご説明します。

「CLSに関する問題：0.25超」とは

「CLSに関する問題：0.25超」とは、ページ閲覧中に発生する描写要素のレイアウトのずれを数値化したものです。数値では0.25を超えると改善が必要という意味です。

CLSは2021年6月以降、モバイル検索のランキングを決定する要因であるコアウェブバイタルの要素のひとつになっています。よって、CLSが0.25を超えている場合は迅速に対応すべきでしょう。

CLSの数値が0.25を超える場合、ユーザーがページを読み込んでいるときや画面スクロールをしているときに、レイアウトがズレるなど使いにくさが現れている状態かもしれません。また、ページ内のリンクをタップしたとき誤って広告をタップする状態なども考えられます。

「CLSに関する問題：0.25超」と表示されたら、次のことを行ってみてください。

まずはGoogleサーチコンソールにログインして、問題ページを特定します。問題のあるページはGoogle側でグループに分けられていますのでひとつずつ確認してみましょう。問題のあるページの例としてあがっているものを「PageSpeed Insights」などで原因とを探っていきます。

PageSpeed Insightsで対象のページを調べていくと、読み込み時にズレの原因になる要素が特定できます。何枚かのキャプチャが表示されますので、どの画像がズレているか判明します。

画像だけではなくSNSボタンのずれも発生していることもあるので、細かくキャプチャを見渡してみてください。なお、PageSpeed Insightsで調べても1回で原因が特定できないことがありますので、何度かPageSpeed Insightsにかけて調べてみましょう。

PageSpeed Insightsだけでは原因を特定できない場合もあるため、Chromeの拡張機能を使って調べることも大事です。これはPageSpeed Insightsのラボデータはファーストビューのみを対象としているからです。

しかし、実際のユーザーの行動はページを上下にスクロールしたりページ内のリンクをクリック（タップ）したりします。そのため、ファーストビューだけでは本来の問題が特定できないわけです。

そこで活用したいのがGoogleの拡張機能です。「Web Vitals」という拡張機能を使うと、ページのセッション中に計測されたコアウェブバイタルが表示されます。ほかにも、Chromeのデベロッパーツールである「performanca機能」を使う方法もあります。

デベロッパーツールを起動するには、Chromeメニューの「表示」「開発/管理」「デベロッパーツール」と進みます。（Macの場合）WindowsならばChromeメニューから「Google Chromeの設定」「その他のツール」「デベロッパーツール」と進んでください。

CLSに関する問題が特定できたら、以下の方法で改善してみましょう。

画像に関しては最もCLSの原因となる要素といっていいでしょう。特にレスポンシブルデザインならば、widthとheightの要素が与えられていないことも多いです。この場合、実際にダウンロードしないと画像の高さがわからないので、ダウンロード時にCLSが発生してしまいます。

これを改善するにはHTMLで原寸の画像サイズを指定しましょう。また、CSSで比率の指定もしてみてください。

広告の最適化としては、ファーストビュー内の上部に広告があるならばページ下方に移動させましょう。そもそも、ファーストビュー内の上部に広告があることはSEOでは望ましくありません。

ユーザーエクスペリエンスを低下させるとして、Googleからの評価を下げてしまいます。広告を取り除くことが難しいならば、<div>タグなどでプレースホルダを設定してみましょう。また、自動広告を設定しているときは外すことでCLSが改善することがあります。

ページ読み込み速度の遅れには、ページ内の埋め込んでいる動画コンテンツが影響していることがあります。広告と同様でページ上部に動画コンテンツを埋め込んでいると、CLSの原因となることも考えられます。

その際はプレースホルダの設定、JavaScriptを使用せずに表示、表示位置を下方にするなどの対処をしましょう。

「Autoptimize」はWordPressのプラグインであり、サイトの表示速度の改善ができるものです。インストールしたら、設定ページで「JS、CSS &HTML設定」を行います。

「JavaScriptコードの最適化」「JSファイルを連結する」にチェックを入れて、「CSSオプション」では「CSSコードを最適化」「CSSファイルを連結する」「インラインのCSSも連結」「CSSのインフラ化と遅延」にチェックを入れて保存してください。

以上のような設定をすることでCLSの改善につながることもあります。

CLSに関する指標などウェブに関する主な指標に関するエラーは、検索順位の決定に多少なり影響が考えられます。また、ユーザーエクスペリエンス、ユーザービリティにも悪い影響を与えますので、できるだけ早く改善したいところです。本記事で紹介した方法を参考にしながら、ページの改善に努めてみてください。