サーチコンソールに、CLS に関する問題: 0.1 超（パソコン）と言う表示が出る方いませんか？
自分のブログにもこの表示がけっこう長いこと出ていたのですが、そろそろ解決しといた方が良いかな‥と思い立って今回直すことにしました。
いったいどういう問題が起こっているのか、どういう風に修正できるのかについてまとめてみましたので、同じ問題が起こってる方の助けになればと思います。
サーチコンソールを確認
確認方法は以下の通りです。
サーチコンソール＞ページエクスペリエンス＞ウェブに関する主な指標まですすみ、改善が必要とされているほうのデバイスをクリックします。
すると、ページの下の方に下記のような表示が出てきます。
なお、上記の「改善が必要」の部分をクリックすると、具体的な問題ページも表示されるので、こちらも具体的に検証しておいた方が良い。
CLS（Cumulative Layout Shift）とは？
簡単に言うと、ページの閲覧中にレイアウトが変わってしまう度合いを示す指標になります。
昔のインターネットだと良くありませんでしたか？
Googleではページ閲覧中にページのレイアウトが変わってしまう事象を問題視しており、閲覧中にレイアウトが変わらないページを良いページ、変わるページを悪いページとしているのです。
これは検索結果にも反映されてきますので、ブログの運営をしている人は確認必須の項目になります。
以下はGoogleに掲載されている内容です。
Core Web Vitalsとは、後述のページスピードインサイトで表示される「LCP」「FID」「CLS」を指します。
今回はこのうちのCLSを改善しようとしています。
具体的な原因調査
ページスピードインサイトにて、具体的な発生事由を調べます。
ウェブページのURLを入力にURLを入力して分析を押します。
すると下記のようなページが表示されます。
（携帯電話とデスクトップに分かれて表示されます）
ウェブに関する主な指標の評価が不合格と表示されていて、Cumulative Layout Shiftの数値がオレンジ色のところに示されていますね。
この部分が不合格だとGoogleは判定しているということになります。
このページを下の方にスクロールすると、下記のような表示が出てきます。
診断と書かれているところの上から７つ目に「レイアウトが大きく変わらないようにする」という項目があります。
ここの詳細を確認して改善を進めることになります。
右側の方の下向きの＞を押すと詳細が表示されます。
すでに改善しているので大きな問題は出てきませんが、５つ合計で、0.072という数値になります。
数値が0.1以下になるように改善すると合格になります。
サーチコンソールにて、ページの検証をしてもらいましょう。
最大で28日かかりますが、サイトの改善をしたという報告をしておいた方が早く確認してくれてページ評価が上がる可能性があります。
CLS（Cumulative Layout Shift）の悪化要因
私の場合パソコンの方のCLSの数値が悪かったです。
理由を調べてみると、以下のような要因がありました。
- 記事タイトルが長すぎる
- サイドバーの画像表示
記事のタイトルが長すぎるとレイアウトシフトの原因になります。
１段で表示されている記事タイトルが２段で表示されたりするとレイアウトがずれるからです。
なのでタイトルの文字数は長すぎたり短すぎたりしないよう注意が必要です。
また、サイドバーの画像はレイアウトシフトの最大原因です。
画像が多ければ多いほど読込遅延⇒レイアウトシフト発生となるためです。
画像の大きさをそろえるなどいろいろな対策方法がありますが、私の場合はバッサリとサイドバーの画像をカットすることにしました。
だって、よく考えるとブログのサイドバーの情報って、そんなに役立ってないから。
トップページからブログに来てくれる人ってかなり稀で（みんなGoogle検索から来るから）、正直自分以外はほぼ見ないページなんだから、こだわるよりシンプルにしといた方がGoogleの評価も高いしGooglebotも回遊しやすいんじゃない？
というわけでほとんど文字情報だけのサイドバーに変更しました。
ほぼ文字情報だけなんですが、記事には写真とか図は張り付けてあるし、これはこれでおしゃれなんじゃないかと思ってます。
