【サーチコンソール】「CLS に関する問題: 0.1 超（パソコン）」を改善するために行ったこと

サーチコンソールの「ウェブに関する主な指標」を見てみると、PCの方に初検出日: 2021/03/29で「CLS に関する問題: 0.1 超（パソコン）」というメッセージが…。

けっこう長い間放置していたせいで、対象URLが144件にもなっていました…。モバイルの方はAMPのお陰？もあって問題ないようです。ついつい仕事や他のブログの方を優先して、おざなりになっていました…。反省。

こんな状態でこのサイトの評価が大丈夫かどうか、ちょっと気になったので「site:lucklog.info」で、新しい記事のインデックス登録状況を確認してみると、なんと今年の7月くらいから増えていない感じがします。

検索結果にまだ表示されていないだけの可能性もありますが、何かしら影響が出てるのかもしれないですね…。

気づいたからには放置できないので、調べて対処しました。その結果、CLSの値が0.2前後から0.001～0.02くらいにまで減少できました。
※CLSの値は低い方が良いです
※サーチコンソールで「類似のURL」として問題が起きているURLを最大20個リストアップされています。それを全てチェックしました

嬉しいご報告！12/23に「0件」になりました！

実は一度「検証：失敗」になっていました。Twitterの埋め込みがどうしてもCLSの値を少し上げてしまうみたいで…。対象URLが増える状況に…。

ということで、Twitterの埋め込みをウィジェットから外して再度検証のお願いをしたところ、無事「CLS に関する問題: 0.1 超（パソコン）」の「改善が必要」が0件になりました！検証も合格となり、嬉しい限りです。

これでサーチコンソールで指摘があった問題を一つ解決することができました。これを機に「【検出 – インデックス未登録】調査＆改善方法を考えてみた（結果は随時追記予定）」なども少しずつ改善されていくと嬉しいのですが…。

備忘録ではありますが、もし、同じ問題で悩んでいる方の参考になれば幸いです。それでは本編にいきます。

改善のために行ったこと

「CLSって何？」とか「問題点はどこを見れば分かるの？」という方へ

「CLSって何？」とか「問題点はどこを見れば分かるの？」という方は、「改善のために行ったこと」の後に書いていますので、そちらをご覧ください。

それでは、最初に改善のために行った2点をご紹介します。

ちなみに、どれくらい効果があったかというと、CLSのスコアが「0.2」⇒「0.001」～「0.003」に改善できたパターンが多かったです。中には「0」だったり「0.015」くらいのものもありましたが、大体は改善できたのかなと思います。

それでは実際に試したことを見ていきます。

画像サイズを指定

上記のとおり、imgタグにwidth、height属性が指定されていない個所が問題だと分かりました。

<img src="img/img1.png" alt="画像" width="1024" height="512">

上の赤字のようにimgタグに「width=”1024″ height=”512″」←この2つの属性を追加しました。ちなみに、画像の幅や高さはcssでも記述しているのでレイアウトが崩れる心配もありません。

※僕の場合は、問題があったのがページあたり1つの画像だけでしたので、あまり効果はありませんでした

要素にあらかじめ高さを指定する

上記の問題点を改善します。「レイアウトが大きく変わらないようにする」…分かるような分からないようなという感じですが対応は簡単です。ちなみに、僕の場合ですが、こちらの改善の効果は大きかったです。

Twitterのタイムラインを例に対応方法を説明します。

Twitterのタイムライン問題

■サイト表示時

■数秒経った後

Twitterのタイムライン部分は上のとおり、読み込まれた時点では要素の高さが低く、タイムラインが読み込まれると高くなります。これが「レイアウトが大きく変わっている」という問題点です。

これを改善するために、タイムラインを表示する要素をdivタグで囲み、タイムラインが読み込まれた後の高さをあらかじめ指定することでレイアウトは最初から高さのある状態になります。よって、Twitterのタイムラインが読み込まれたとしてもレイアウトは変わりません。

実際には、上のように対応しました。

対応後、Twitterのタイムライン

■サイト表示時

■数秒経った後

対応後のページを見てみると、上記のように「サイト表示時」既にタイムラインが読み込まれた後の高さなので、タイムラインが読み込まれてもレイアウトが変わらないよう改善できています。

このように読み込みが遅い部分の最終的な高さが分かりさえすれば簡単に対処できます。といっても全て対応する必要はありません（できればベストだと思いますが）。問題が複数個所にある場合は、CLSの数値が大きい箇所から対応していくと効果が大きいです。

実際に僕も点数が高い箇所を対応しただけで、ほとんど問題がない（CLSの値がかなり低い）と判断されている箇所はそのままにしています。

本題はここまでになります。以下、「CLSとは何か？」「CLS に関する問題: 0.1 超（パソコン）の改善方法の調べ方」「Googleサーチコンソールへのご報告方法」などを参考までに書いています。興味のある方は是非ご覧ください。

（参考）CLSとは？

CLSとはCumulative Layout Shiftの略で「レイアウト変更の累積値」という意味です。何のこっちゃ？って感じですが、「ある現象に対する評価」だと考えて大丈夫かなと思います。

どういった現象かというと、サイトを開いた後、時間差で画像が読み込まれたり、ツイッターのタイムラインが読み込まれたりして、サイトのレイアウトが変わっていく（高さが変わるなど）現象のことです。

具体例

イメージしやすいように具体例を見てみます。

サイトを開いた時点では下記のように「真っ白の箱（赤枠）」でした。

ですが、1秒～数秒経つと、Twitterのタイムラインが開いて、箱の高さが変わってしまいました。

このように「時間の経過とともにレイアウトが変わってしまう」という現象です。

CLS評価

この現象が頻繁に起きるサイトは、「読みにくかったり」「間違ってボタンをクリックしてページ遷移してしまったり」「広告をクリックしてしまったり」など、あまり良いサイトとは言えません。それを評価したのがCLSのスコアというわけです。

スコアの付け方は問題の箇所が多かったり、影響が大きいものがある場合に、加点されていく方式です。つまり、CLSのスコアが高いほど悪いということです。

評価基準は、0.1以下なら良い、0.1～0.25なら要修正（僕がこれでした）、0.25以上は悪い、というように分類されています。

CLS に関する問題: 0.1 超（パソコン）の改善方法を調べる

CLS に関する問題: 0.1 超（パソコン）の改善方法の調べ方を確認します。

PAGESPEED INSIGHTSを開く

サーチコンソールの左メニューにある「ウェブに関する主な指標」をクリックすると下記のように「モバイル」と「PC」が評価されたものが表示されます。

僕の場合は、赤枠のとおり、PCの方に「改善が必要なURL：144件」とありますので、PCの「レポートを開く」をクリックします。

クリックすると、レポートが表示されます。

さらに「改善が必要」（青枠）をクリックすると改善が必要なURLがグラフに図示されます。また、続いて詳細の「改善が必要」という列（赤枠）をクリックします。

クリックすると、↑のようにCLSの集計値が載った表とグラフが表示されます。「0.19」なので「0.1～0.25なら要修正」に該当しますね。

ここで更にURL（の列）をクリックします。

クリックすると、CLSの集計値が0.19（あたり）のURLが20件表示されます。1つ目のURLの下の「PAGESPEED INSIGHTS」をクリックすると「PAGESPEED INSIGHTS」が開きます。開かれた「PAGESPEED INSIGHTS」にはURLが指定されていて、分析も自動で開始されます。

その他の「類似のURL（最大20件）」の各URLもカーソルを合わせると、「PAGESPEED INSIGHTS」が開きます。開かれた「PAGESPEED INSIGHTS」にはURLが指定されていて、分析も自動で開始されます。

ここで問題を解決していきます

ここで問題があるページをチェックできます。次に書きますが、「PAGESPEED INSIGHTS」内でCLSの原因が何かを調べることができます。

それを改善して、ここで表示されている計21個のURLで改善されたかチェックしてOKなら、サーチコンソールに「修正を検証」してもらうという流れになるかと思います。