サーチコンソール「CLSに関する問題：025超」の原因と対処法
こんにちは、ヒデハルです。
さていきなりですが、サーチコンソールで「CLSに関する問題：025超」というエラーでお困りですか？
この指摘を放っておくとSEO的にマイナスですので、早めに対処した方がいいですよ。
とはいえ、なんのこっちゃこれって感じですよね？
というわけで本記事では、「CLSに関する問題：025超」というエラーが出る原因とその対処法を解説します。
ブログ制作の参考にどうぞ。
サーチコンソール「CLSに関する問題：025超」とは？
まず今回のエラーの現象を見てみましょう。
今回のエラーの現象
サーチコンソールの左メニューから「エクスペリエンス」>「ウェブに関する主な指標」をクリックします。今回はPCの不良URLが発生しているので、PCの方の「レポートを開く」をクリックします↓
すると下図のとおり、「CLSに関する問題：025超」というエラーが指摘されています↓
上記をクリックすると、CLSが0.35と表示されてます↓
上記が今回のエラー指摘です。
それにしても真っ赤。汗
以下では、このエラーがどういうものかを解説していきます（引用元：サーチコンソールヘルプ、Google検索セントラル、Web Vitals）。
CLSとは？
まずページエクスペリエンスについて説明します。
ページエクスペリエンスとは、ユーザーがウェブページで操作を行った際の、情報そのものの価値以外に関するエクスペリエンスの尺度となるシグナルのセットです。
グーグル検索セントラル
かみくだいて言うと、「記事内容を除いた、Webサイトの価値を表すもの」という感じです。
このページエクスペリエンスには、
・ウェブに関する主な指標
・モバイルフレンドリー
・セーフブラウジング
・HTTPS
といったシグナル（指標）が含まれます。
上記の「ウェブに関する主な指標」として、LCP・FID・CLSがあり、「Core Web Vitals」と呼ばれます。この３つの指標は以下のとおり。
- LCP：Largest Contentful Paint
- FID：First Input Delay
- CLS：Cumulative Layout Shift
順に説明しましょう。
LCP
読み込みパフォーマンスの尺度。URLが実際に読み込まれていることが読み手にわかるという点で、この指標は重要です。
FID
インタラクティブ（=双方向にやりとりできる）性の尺度。ユーザーがリンクのクリックやボタンのタップなどをしたら、すぐに反応するかってこと。ユーザーが操作を行う必要があるページで重要です。
CLS
視覚的安定性の尺度。ページのレイアウトのずれがどれくらいあるかってこと。ユーザーが操作しようとしたときにレイアウトシフトが起きると、ユーザーエクスペリエンスが低下するので、この指標は重要です。
レイアウトシフトによってユーザーが困る例：
・ページが表示され本文を読み始めたら、画像や広告が時間差で出現し、本文が下にずれて困惑した。
・リンクをタップしようとしたら、予期せず現れた広告によってそのリンクが下に追いやられ、誤って広告をタップしてしまった。
そんなレイアウトシフトをチェックする指標が「CLS」というわけです。
CLSの評価基準とは？
LCP・FID・CLSの評価基準は以下のとおり。
| 良い | 改善が必要 | 良くない | |
| LCP | 2.5秒以下 | ４秒以下 | ４秒を超える |
| FID | 100ミリ秒以下 | 300ミリ秒以下 | 300ミリ秒を超える |
| CLS | 0.1以下 | 0.25以下 | 0.25を超える |
話が見えてきたでしょうか？
今回サーチコンソールの「エクスペリエンス」>「ウェブに関する主な指標」にて、「CLSに関する問題：025超」というエラーが表示されたのは、CLSの評価基準（0.25）より悪いページがあったからです。
※私の例でいえば、CLSが0.35となってるURLが123個あるということで、かなり良くないってこと…。
サーチコンソール「CLSに関する問題：025超」の影響度とは？
復習しましょう。ページエクスペリエンスとは以下でした。
・ウェブに関する主な指標（LCP・FID・CLS）
・モバイルフレンドリー
・セーフブラウジング
・HTTPS
グーグルは、検索結果のランキングを決めるうえで、上記のページエクスペリエンスも考慮に入れると発表しました。
具体的には、2021年の6月からページエクスペリエンスの更新を段階的に展開するとのこと。
このようにページエクスペリエンスはSEO的に重要な指標なので、今回指摘されたCLSの問題は早めに対処した方がいいです。
とはいえ、コンテンツの質が同程度のページが複数あるときは、このページエクスペリエンスの出来が検索ランキングの結果に影響してきます。
よって今回のサーチコンソールの指摘を機に、CLSの問題をきっちり解消しておきましょう。グーグルが定める推奨値0.1以下を目指して。
※引用元：Google検索セントラル
サーチコンソール「CLSに関する問題：025超」の原因を特定する方法
「CLSに関する問題：025超」を解消するには、まず原因を特定しないといけません。
CLSを悪化させている原因を特定するには、PageSpeed InsightsやLighthouseというツールを使うといいでしょう。
以下では、PageSpeed Insightsを使う方法を紹介します。
手順１：
サーチコンソールで、「CLSに関する問題：025超」が指摘されてるURLをクリックすると、右側に列が表示されます。
この列の中にある「PAGESPEED INSIGHTS」をクリックします↓
手順２：
すると分析結果が表示されます。ごらんのとおり、今回指摘のCLSが0.35と表示され、不合格となっているのを確認してください↓
手順３：
ページの下を見ていくと、ページ読み込み時の連写キャプチャがが表示されています。左から右に見ていき、レイアウトがずれている箇所を探します↓
手順４：
連写キャプチャの下に表示されてる診断結果を確認します↓
上記の指摘全てに対処できるのがベストですが、それは割とハードルが高いでしょう。Webの知識も必要ですし、時間もそれなりにかかりますから…。
よってCLSを大きく悪化させてる箇所を中心に対処するのがおすすめです。
なお、今回紹介したPageSpeed Insightsは、わざわざサーチコンソール上で起動しなくても、以下のURLから単独で起動できます。参考にどうぞ。
» PageSpeed Insights
以上、サーチコンソール「CLSに関する問題：025超」の原因を特定する方法でした。
サーチコンソール「CLSに関する問題：025超」の対処法
では最後に、「CLSに関する問題：025超」の対処法をいくつか紹介します。
CLS問題の対処法で代表的なのは、以下のとおり。
- プルダウンメニュー削除
- 広告の表示位置を変える
- 動的コンテンツの最適化
- 画像のサイズを指定する
CLSの改善に効果が大きいのは、１〜３あたり。４は効果は小さいかもですが、SEOとして定石なので対処しておくのが吉。
ちなみに私のケースだと対処したのは１と４で、改善効果が大きかったのは１です。
順に見ていきましょう。
対処法①：プルダウンメニュー削除
私のケースだと、CLSの改善に最も効果が高かったのがこの「プルダウンメニュー削除」です。
改善前
私のブログサイトはグローバルメニューを設けていて、そのグローバルメニューにはサブメニューを展開するようにしてました↓
ところがこのサブメニューがページ読み込み時にレイアウトシフトを引き起こしてました。
PageSpeed Insightsでの連写キャプチャを見ると、ページ読み込み時にいったんサブメニューが展開されるがゆえに、赤線で示したようにレイアウトがガクッと上にずれてしまってます↓
PageSpeed Insightsの診断結果を見ても、このプルダウンによるレイアウトのずれがCLSへの影響大とのこと↓
CLSのスコアもごらんのとおり、0.35と悪い↓
ちなみにページ全体の採点は88点です↓
改善後
対処法として、グローバルメニューに設けていたプルダウンメニューを削除しました↓
その結果、ページ読み込み時のレイアウトシフトが解消されました。
PageSpeed Insightsでの連写キャプチャを見ると、レイアウトのずれがなくなってるのがわかるでしょう↓
レイアウトずれへの影響が大と診断された箇所も、０になりました↓
CLSのスコアもごらんのとおり、0に改善しました↓
ページ全体の採点も88点から99点にアップしました↓
なお上記の修正を行ったら、サーチコンソールに検証を依頼します。すると以下のように、検証待ちの状態へ↓
グーグルに正式に承認されるまでは、PageSpeed Insightsの診断結果の上段の表示は0.35と不合格のままです↓
グーグルに承認されるのは数週間かかるので、気長に待ちましょう。
対処法②：広告の表示位置を変える
ページの上部に大きなバナー広告を入れてる場合、レイアウトシフトが起きて、CLSを悪化させることがあります。
もしPageSpeed Insightsで測定してみてCLSが悪ければ、バナー広告の表示位置を変更するといいでしょう。具体的には、バナー広告の位置をページの下方に変更することです。
そうすればCLSも良くなるし、ユーザーエクスペリエンスも改善します。
対処法③：動的コンテンツの最適化
Javascriptを用いるなどによって、ページ読み込みに遅れて表示されるコンテンツ（動的コンテンツ）はCLSを悪化させることが多いです。
対処として、以下のような動的コンテンツの最適化をしましょう。
・Javascriptを使用せずに表示させる
・プレースホルダを設定する
・表示位置を下方に移動する
対処法④：画像のサイズを指定する
ページ内の画像に対して、widthとheight要素を記述していないと、CLSが悪化します。ブラウザは画像のダウンロードが完了するまで画像の高さを知ることができないからです。
対処として、画像のwidthとheight要素を記述しましょう。加えてCSSで比率を指定しておきましょう。こうすることで、画像のダウンロードが完了しなくても、ブラウザがあらかじめ画像のためにどれくらいの領域を確保すればよいかを判断することができるようになります。
HTML上の記述例
<img src="○○.jpg" width="750" height="500">
CSS上の記述例
img {
width:100%;
height:auto;
}私が行った実例を紹介します。
私のサイトではどのページでもアイコンを表示させています。この画像のサイズを記述しておらず、PageSpeed Insightsで以下のように指摘されました↓
対処として、先ほど紹介したようにwidthとheight要素を記述すると、指摘が無くなりました。
※参考：私のサイトで画像のサイズ指定がなかったのはこのアイコンだけだったので、この対処によるCLSの改善はそれほどではなかったです。私のサイトで効果が最も大きかったのは、対処①のプルダウンメニュー削除でしたね。
以上、「CLSに関する問題：025超」の対処法でした。
まとめ：サーチコンソール「CLSに関する問題：025超」の原因と対処法
記事のポイントをまとめます。
- CLSとは視覚的安定性の尺度で、ページレイアウトのずれ具合
- グーグルはウェブに関する主な指標として、CLS（他にLCP・FIDがある）を2021年の６月から展開する。検索ランキングにも影響あり
- サーチコンソールで「CLSに関する問題：025超」が指摘される原因は、CLSの評価基準0.25より悪いページがあるから
- 対処法は、PageSpeed Insightsを使って原因を見つけ、解消すること
- 対処例：プルダウンメニュー削除／広告の表示位置を変える／動的コンテンツの最適化／画像のサイズを指定する
といった感じです。
CLSを含むCore Web Vitalsは、グーグルの検索ランキングを上げるための要素として今後ますます重要になっていきます。
よって今回のサーチコンソールの指摘を機に、CLSをぜひ改善しておきましょう。
なお、SEOに関する記事は以下にまとめてますので、参考にどうぞ。
» 【ブロガー向け】SEO対策の完全マップ
今回は以上です。