「CLS に関する問題: 0.1 超（モバイル）」「CLS に関する問題: 0.25 超（パソコン）」
↑みたいに、サーチコンソールで不良の URL として赤く表示されると焦りますよね。
私も正直焦りました笑
今回はこのCLS（Cumulative Layout Shift）累積レイアウト変更のエラーについて、解消できたので解説します。
ごり子結論から言うと、画像サイズ（widthとheight）を指定するだけだったよ。
✓CLS（Cumulative Layout Shift）？累積レイアウト変更？とはなにか
✓エラーが出る原因
✓解消方法
CLS（Cumulative Layout Shift）・累積レイアウト変更とは？
Googleが新しく導入した指標
ウェブページUXの重要指標として「コアウェブバイタル」が導入されました。
その中で特に重要視されるのが「LCP」「FID」「CLS」3つの指標です。
ウェブにおけるユーザー体験の向上を目的したもので、今後のSEOにもかなり影響があるようです。
そういうわけで、今回問題を起こしたCLS：Cumulative Layout Shiftは結構重大な問題なのです。
累積レイアウト変更ともいいます。
https://web.dev/vitals/
| 良好 | 改善が必要 | 低速 | |
| LPC | ２.５秒未満 | ４秒以下 | ４秒を超える |
| FID | １００ミリ秒未満 | ３００ミリ秒以下 | ３００ミリ秒を超える |
| CLS | ０.１未満 | ０.２５以下 | ０.２５を超える |
Cumulative Layout Shiftとは？
ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかを表します。
これはいわゆる誤クリックを誘うズレのこといっています。
リンクをクリックしようとしたら突然現れた広告をクリックしてしまった。
そんな経験ありませんか？
画像が突然現れて、本文が下にいってしまった。
よくありますよね。
こういったズレを表す指標が「CLS」なわけです。
エラーの原因：私の場合
アイキャッチと広告が原因だった
アイキャッチとサイドバー広告にサイズ指定がされてなかったことが原因でした。
とりあえずアイキャッチ画像は、heightだけ指定がなかったので、適当にテーマエディターで追加。
.eye-catch img{
height:360px;
}
@media screen and (max-width: 768px) {
.eye-catch img{
height:auto;
}
}
スマホだと比率がおかしくなるので、こっちはautoにしておきました。
単純な変更ですが、これで劇的に改善しました笑
サイドバートップの広告はやめました。
あってなくてもそんなに変わらない気がしたので、いったん停止に。
どうやってエラーを見つける？
CLSはズレを表す指標です。
PageSpeed Insightsを使えば、ページがどう表示されるのか、その過程をスクショで見れるかと思います。
それでわかります。
明らかにずれが生じている個所があるはずです。
そこがエラーの原因です。
拡張機能Web Vitalsを活用する！
クローム利用者なら、Web Vitalsという拡張機能を使うと捗ります。
いつでも3つの重要指標の値が確認できるなる拡張機能です。
便利です。
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
終わりに
2021年以降に検索ランキングに関係してくるため、そろそろ準備がいりますね。
少しでも検索結果がよくなるよう頑張りましょう！
コメント