CLSエラーの対応方法

いつもお世話になっております。
念のためこちらのサイトでもSANGOを使っているのですがCLSは0.1以下でした。
一応ご確認ですが、CLSの数値に影響を与えそうなプラグインをインストールなどはしていないでしょうか？
スライダーなど要素が大きく動く移動するコンテンツがあるとCLSに影響があるかもしれません。
ご確認よろしくお願いします。

ご返信いただきありがとうございます。
アドバイス頂いた通りプラグインの整理をしていますが、今のところ大きな成果
が出ていません。何かアドバイスを頂けると嬉しいです。

現在インストール中のプラグイン一覧は下記になりますが、clsに悪影響を及ぼし
そうなプラグインはありますでしょうか？

＜サルワカさんのサイトで紹介されているプラグイン＞
・Autoptimize
・EWWW Image Optimizer
・Google XML Sitemaps
・Optimize Database after Deleting Revisions

＜その他プラグイン＞
・Auto Featured Image・・・アイキャッチ画像を自動生成してくれるプラグイン
・Batch Cat・・・カテゴリを一括変更できるプラグイン
・Category Order and Taxonomy Terms Order・・・カテゴリの表示順を変更できるプラグイン
・Classic Editor・・・従来のクラシックエディターに戻すプラグイン
・Compress JPEG & PNG images・・・画像圧縮プラグイン
・Invisible reCaptcha・・・WordPressの各種フォームに認証機能を導入できるプラグイン
・Really Simple SSL・・・設定なしでサイトを SSL 対応にする軽量プラグイン
・Table of Contents Plus・・・自動的に目次を生成するプラグイン

プラグイン以外では個人的に下記２点が気になりますが、clsに悪影響を及ぼす可能性
はありますでしょうか？

①SANGOへ引っ越しした際、アイキャッチ画像をプラグイン（Auto Featured Image）
で設定しました。そのため、アイキャッチ画像の規定サイズ（680px×390px）ではない
ものがたくさんあります。これがcls低下の原因の可能性はありますか？

②当サイトでは、tableを使った下記のようなまとめ記事が多くあります。
これがcls低下の原因の可能性はありますでしょうか？
https://jyanigori.com/?p=482

その他、何か気になることが少しでもあれば、ぜひぜひアドバイスを頂きたいです。
よろしくお願いいたします。

お世話になっております。
Google Search ConsoleでいただいたURLを計測してみたところ特にCLSの問題はみられませんでした。
こちらのサイトで計測してみるといかがでしょうか？
よろしくお願いします。
https://search.google.com/search-console/welcome

Google Search Consolでサイトトップページ（https://jyanigori.com/）を計測すると、
常時エラーが出ています。「ウェブに関する主な指標」でモバイルエラー101、
PCエラー101となっています。レポートを確認すると、モバイル・PC共に
「CLSに関する問題：0.25超（モバイル or PC）」が発生しています。

最初にサルワカさんへ問合せした後、対策として全てのGoogle adsense広告を停止
したことで、エラーが半分ほど減りました。しかし、根本的な解決には至っていません。
CLS問題が解決できれば、広告を元に戻したいです。

PageSpeed Insightsのフィールドデータは、モバイルのCLS0.33、パソコンのCLS0.24
という結果です。Google Search Consolエラーと連動していると思われます。

原因がわからずお手上げ状態のため、ほんの些細なことでもアドバイスをいただけると
嬉しいです。よろしくお願いします。

お世話になっております。

広告の種類によってはCLSに影響を及ぼすものがあります。
Google Adsenseの広告を停止して、エラーが半分ほど減るということは、
半分は広告表示自体が影響していると考えられます。

残りの半分は、アニメーションなどが影響している可能性があります。
試しに以下の様なCSSを記述していただいて、アニメーションを停止するとCLSエラーが改善されるかご確認いただけますでしょうか？

.home #container .header, #divheader, .cardtype__article:first-child, .cardtype__article:nth-child(2), .sidelong__article:first-child, .sidelong__article:nth-child(2) {
    animation: none;
}

よろしくお願いします。

迅速なご返信ありがとうございます。

子テーマのstyle.cssに追記しました。追記場所はここで大丈夫でしょうか？
トップページのアニメーションは変わってない気もしますが。

clsの数値はすぐには変化がわかりませんので、少し様子を見てみます。

お世話になっております。

すみません、一部ソースコードに追加する要素がありました。
こちらのcssに書き換えてみてください。


.home .header,
.mobile-nav ul,
.header-info a,
.post-tab,
.cardtype__article:nth-child(n+1),
.sidelong__article:nth-child(n+1),
#divheader {
animation:none;
}


よろしくおねがいします。

いつも迅速なご対応ありがたいです！
早速上記のコードへcss書き換え、一緒にSANGOのバージョンアップも行いました。

＜css書き換え後気づいたこと＞
・PageSpeed Insightsの分析結果でラボデータのモバイルCSSが0.3を超えてしまう
ようになりました。計測する度に数値は変化しますが、今までは0.3を超えることは
ありませんでした。
・PageSpeed Insightsのスコアは上がっている気がします（70前半⇒70後半）。

もう少し様子を見てみます。

お世話になっております。

そうでしたか。
こちらで確認したところまだサイトにお伝えした内容が反映されていない様なのですが、いかがでしょうか？
よろしくお願いします。

SANGOカスタマイズにある追加CSSに記載したところ、
アニメーションが消えた気がします。これで大丈夫でしょうか。
その後、PageSpeed InsightsのCSS（特にパソコン）は少し改善傾向にありそうです。
このまま様子を見てみます。ありがとうございます。

先日サルワカさんのサイトではアニメーションがある状態で「CLSは0.1以下」との
お話しでしたが、そうなると、CLSの問題は私のコンテンツの問題になりますか？
またはプラグインの問題でしょうか。根本原因を取り除きたいです。

お世話になっております。

正確な理由はわかりかねますが、設置されているreCAPTCHAが影響している可能性はないでしょうか？
一度こちらを無効化していただくと改善されたりしますでしょうか？

よろしくお願いします。

こんなに真摯にご対応いただき本当にありがとうございます！

アドバイス頂いた通りreCAPTCHAを停止してみたところ、
PageSpeed Insightsの点数は向上し、モバイル80点代後半、PCは95点以上です。
しかし、モバイルのclsは改善なく、計測する度に「0」or「0.301」となっています。
悪いときは毎回「0.301」点なのが気になります。。

reCAPTCHAでページが表示されるまでの画面推移を見ていると、
たまにヘッダーアイキャッチ画像が後から読み込まれていることがあります。
毎回ではないのですが、これはclsに関係ないでしょうか？

あと、reCAPTCHAを停止すると、大量のスパムコメントが来てしまうのですが、
サルワカさんはどのように対処してますでしょうか？おススメのプラグインなど
ございましたらご教示下さい。

お世話になっております。

こちらのサイトでは、代わりにAkismet Anti-Spam (アンチスパム)というプラグインを利用してスパム対策をしております。
なるほどですね。モバイルのclsが改善しない件、テーマ側の調査も進めてまいります。
何か分かりましたら共有させていただきますのでよろしくお願いします。

早速おススメのAkismet Anti-Spam設定しました。
教えていただきありがとうございます。助かりました。

>なるほどですね。モバイルのclsが改善しない件、テーマ側の調査も進めてまいります。
調査いただきありがとうございます！よろしくお願いします！
こちらでも何かわかりましたらすぐに報告しますね。

余談ですが、サルワカさんのオンラインサロンなどがあればぜひ参加したいです。
HTML、Photoshop、デザインなど、色々学びたいです。これからも応援しています。

調査してみて分かったのですが、もしかすると画像の遅延読み込みの際にimgタグに対してwidth, heightを指定しておかないとclsに影響があることがわかりました。
まだこれが根本的な原因かどうかはわかりませんが、テーマ側で何かできることはないか少し考えてみますのでお時間いただけますでしょうか？

オンラインサロンなどは現状行っておりませんが、応援いただきとても嬉しいです！
引き続きよろしくお願いします！

>テーマ側で何かできることはないか少し考えてみますのでお時間いただけますでしょうか？
もちろんです！考えていただきありがとうございます。
こちらこそ引き続きよろしくお願いします。

お世話になっています。ジャニごりです。
その後テーマ側での対策はいかがでしょうか。

こちらで１つわかったことがあるので報告します。
3/12よりヘッダーアイキャッチ画像を削除して様子を見ていたのですが、
削除した瞬間からcls数値が少しずつ改善していき、2ヵ月経過した今、
PageSpeed Insightsのclsラボデータは、モバイル0.33⇒0、パソコン0.24⇒0.04
まで改善しました。Google Search Consolのエラーも全て改善しています。

実験結果からヘッダーアイキャッチ画像がclsに悪影響を及ぼしていた
と言えそうですが、いかがでしょうか。

そろそろGoogle AdSenseを元に戻したいと考えているのですが、
clsを下げずに設置する方法がないでしょうか？もし何かわかること
があればご教示ください。よろしくお願いします。

お世話になっております。
おっしゃる通りアニメーションがclsの値を悪化させる原因だったようです。
先日、「カスタマイザー、詳細設定」よりアニメーションを無効化するオプションを追加させていただきました。

Google Adsenseを導入後もclsを下げない方法として、あらかじめ広告が入るスペースを確保しておき、広告が入っても全体のレイアウトが崩れないように工夫していただく必要があります。
よろしくお願いします。

Google Adsense自動広告へ戻したところ、徐々にモバイルのclsが悪化していき、
10日程で0⇒0.12まで上がってしまいました。パソコンには影響なく0のままです。
それに伴い、再びGoogle Search Consoleのモバイル0.25超エラーも大量発生して
います。

サルワカさん仰る通り「あらかじめ広告が入るスペースを確保しておき、広告が
入っても全体のレイアウトが崩れないように工夫」をするしかないようです。
そこで少しヒントを頂きたいのですが、全体のレイアウトが崩れない工夫という
のは、自動広告では不可能でしょうか？ウィジットへ個別adsenseを張る必要が
あるのでしょうか。広告スペースを確保するには、テーマエディターを自分で
いじる必要がありますでしょうか。何かアドバイスを頂けると嬉しいです。

お世話になっております。
自動広告でもあらかじめ広告が挿入される位置がわかっていれば、広告が入るスペースをCSSで確保しておくことによって、Google Search Consoleの値も改善できるかと思います。
確保するためには挿入される箇所に対してのCSSを記述しておく形になるかと思います。
よろしくお願いします。