CLSエラーが出てる！原因特定と対処法｜Search Consoleエラー
CLSエラーについて
CLSエラーが出たとき、Search Consoleが何を言っているかと言うと、
「おめーのWEBサイトのページは読み込み始めてから0.25（単位はない）以上もボタンが動くから、誤クリックとかしやすく使いづらいぞ。だから評価を下げてやるからな。」
ということです。
詳しく説明していきます。
Core Web Vitalsを理解しよう
CLSはCore Web Vitals（コア ウェブ バイタル）の一つです。
Core Web Vitalsとはまあそのままですが、健康診断の指標の一つだと思ってください。HDLコレステロールみたいなイメージです。
ほかにも
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
があります。
CLSとは
Cumulative Layout Shiftの略です。なんじゃそりゃ。
Googleが提供しているWebサイト分析ツールweb.dev「 Cumulative Layout Shift (CLS) 」で解説されています。
例えば、次のようなことが挙げられています。
・注文申込ボタンとキャンセルボタンが並んでいて、キャンセルボタンを押したッ瞬間に、レイアウトがずれて注文申込された
・記事本文を読もうとしたら、レイアウトがずれて、出現した広告を誤クリックした
簡単に言えば、CLSは予期しないレイアウトのずれを数値化したものです。 ユーザーにとって、誤クリックは不利益を生みますし、予期しない広告の出現やレイアウト変更は困惑しますよね。そのため、視覚的安定性はより良いユーザー体験は重要であると判断されているようです。
SEO対策で重要！サーチコンソール「CLSに関する問題」の原因と対処法 - NISA SCHOOL
これはわかりよいね。
悪質な広告バナークリックで商売しているサイトだと、あえて画面を動かすことでDSPのクリックをさせて収益性を上げているWEBサイトがあったりするし、これをUXの指標にするのはとてもいいね。
エラーの指標
Search Consoleのエラーで以下のような文言が出ることがある。
CLS に関する問題: 0.25 超 →不良（Poor）
CLS に関する問題: 0.25 以下 →改善が必要（Needs improvement）
CLS に関する問題: 0.1 未満 →良好（Good）
Search Console上ではそれぞれ「パソコン」と「モバイル」で別れて表示されるけど、Googleの検索結果では今はモバイル優位なので、モバイルを中心に対策すればOKだと思います。（両方いいに越したことはないよ）
エラー指標の単位
この「0.25」などの数の単位は
viewport内で、（影響を受けた面積）×（移動した距離）で表されます。
Core Web Vitals（ウェブバイタル）とは？ 3つの重要指標であるLCP・FID・CLS | ecbeing
ぱっと聞き、非エンジニアには何を言っているかさっぱりです。
ざっくりいうとviewportとは、スマホ（に限らずですが）ページで画面が表示されるために指定した範囲のことを言います。
その中で画面がどのくらい動いたかを指標化しています。
エラーが出てると何が問題か
2021年5月「Core Web Vitals」が正式に検索ランキング要因になり、そのCore Web Vitalsのなかに、CLSが含まれています。
2021年5月「Core Web Vitals」が正式に検索ランキング要因に
つまりどうゆうことか
つまり何を言っているかと言うと
「おめーのWEBサイトのページは読み込み始めてから0.25秒以上もボタンが動くから、誤クリックとかしやすく使いづらいぞ。だから評価を下げてやるからな。」
ということです。
原因特定ツール
じゃあ原因を特定しよう。
1、Lighthouse
チームでは灯台と呼んでいます。みんな英語が苦手だからね。
LighthouseのPerformanceがこの項目に該当します。
具体的に点数が知りたい場合は、Lighthouse Scoring Calculatorが便利です。
２、PageSpeedInsights
これを使って原因を特定します。
Lighthouseととても似ている（ように見える）ツールですが、違いはここを参照してください。
PageSpeed InsightsとLighthouse。よく似てるツールの違いを比較表でチェック！ - アイデアマンズブログ
抜粋すると、
Lighthouseは自分の環境で動作しますが、PageSpeed InsightsはWebサービスです。
実行環境が違うのでエンドポイントがかなり違います。
となります。
字数が多くなってしまうので、とりあえず1記事目はこんな感じで。
