【サーチコンソール】「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個リストアップされています。それを全てチェックしました

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

スポンサーリンク

改善のために行ったこと

それでは、最初に改善のために行った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のタイムライン部分は上のとおり、読み込まれた時点では要素の高さが低く、タイムラインが読み込まれると高くなります。これが「レイアウトが大きく変わっている」という問題点です。

これを改善するために、タイムラインを表示する要素をdivタグで囲み、タイムラインが読み込まれた後の高さをあらかじめ指定することでレイアウトは最初から高さのある状態になります。よって、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の原因を確認する

過去28日のデータより算出されたスコア

分析結果の「デスクトップ」を確認すると↑のような結果でした。

これは、過去28日間のデータに基づいて算出されたスコアです。CLSの値が「0.21」で要修正であることが分かります。

現在のスコア

少しスクロールすると、現状のスコアを確認することができます。「0.166」になっていますね。

これを「0.1」以下にしていきます。

監査をCLSだけに絞り込む

更にもう少し下にスクロールすると、「次に関連する監査を表示」という項目があるので、ここの「CLS」をクリックすると、「CLS」に関連するものだけを表示することができます。

このようにCLSにだけ絞り込むことができ、更にタイトル部分（赤枠）をクリックすると、詳細を開くことができます。

ここを確認して、対応を行っていきます。

 

Googleサーチコンソールにご報告

このリストに表示されていた21件のURLは「PAGESPEED INSIGHTS」でCLSのスコアを確認したところ、すべて「0.1」未満に改善できていました。

ということで、「Google Search Console」で「修正を検証」を依頼しました。ある程度の件数が改善されていると良いのですが…

まあ、やれることはやったので後は待つのみです。どうやら28日以内に検証してくれるみたいです。

まとめ

今回「CLS に関する問題: 0.1 超（パソコン）」という問題点を改善してきました。

• 指摘があった imgタグにwidth、height属性を設定する
• 指摘があった要素に最終的な高さ（heightもしくはmin-height）を最初から設定しておく

上記2点によって、一先ずCLSのスコアを「0.1」未満にすることができました。

皆さんそれぞれ原因は異なるかと思いますが、同じ問題点の方もいらっしゃるかと思います。少しずつでも是非お試しください。

スポンサーリンク