Question
CLS に関する問題: 0.25 超の改善について
- 賃 賃貸トラブルたすけ隊【公式】
-
いつもお世話になっております。
2月の頭からサーチコンソールで「CLS に関する問題」の表記がされたため、改善策を模索中です。アドバイスいただけないでしょうか？
現在した行動
・プラグインの停止
・キャッシュクリア
・HPの全画像の作り直し
・EWWW Image Optimizerでwebpに変更
・タグマネージャーの再設定
・JINR設定→その他のタグ設置はタグマネージャーのみ
・アドセンス自動の停止
・コノハウィング WEXAL オン
最適化 画像最適化 オン(80)
ファーストビュー 画像 オン
CSS オン
ブラウザキャッシュ オン
ページスピードインサイトでも表示されますが、吹き出しのデザインが一度崩れてから表示されている状況で、アドバイスも「レイアウトが大きく変わらないようにする 」とあります。
CLSの意味や過去の相談も読み、デザインなどの上下左右の数字が安定してないことが原因ではないかと推論し、画像サイズなどの調整をしていますが、改善には至っていません。
よろしくお願いします。- WP 6.1系
- PHP 8.1
- JIN:R 1.0.9
- Conoha Wing
- GoogleChrome
- Windows10
-
こんにちは！
2023/03/21 14:29JIN:R運営チームのtsu_です。
詳細の画像とURLありがとうございます。
念の為、確認させていただきたいのですが、いま現在使っているプラグイン一覧のスクリーンショットをご共有いただけますか？？
お手数おかけしますが、よろしくお願いいたします！
JINのオススメでも紹介している
・EWWW Image Optimizer
・Rich Table of Contents
・Two Factor
・UpdraftPlus - バックアップ/復元
の４つです。画像がwebpに実際になっているのは、F12などで確認済みです。
2023/03/21 19:27こちら、いかがでしょうか？
2023/03/26 17:48返信が遅くなってしまい、申し訳ありません！
2023/03/27 00:54JIN:Rを使っていてるサイトでいろいろ調査したり、賃貸トラブルたすけ隊【公式】さんのサイトのデザインを再現して検証してたのですが、、、吹き出しの件はそこまで大きい要素ではない気がしています。
もし読み込み時に崩れる様子が表示されるようであれば、取り急ぎ、管理画面「外観」>「カスタマイズ」>「 - アニメーション設定」で全体のアニメーションをONにしてみてください！
対処療法的で申し訳ありません。。。
で、賃貸トラブルたすけ隊【公式】さんのサイトを再現しつつ、効果が大きかったのは、リッチメニューで使っている画像のサイズを小さいものに変えることでした。
現状ではリッチメニューを作る時に記事のURLを入力して、アイキャッチがそのまま表示されるようにしてると思うのですが、これだと表示上は幅250くらいなのに対して、読み込まれる画像幅が740とかになるんですよね。。。
こちらの検証では試しに幅260の画像に変えたところ、CLS 0.25を超えていたものが0.0台まで下がりました。
（CLSの考え方とは違うかなとも思いますし、他にもいろいろな要素があるので、これだけでは何とも言えませんが...）
参考になりましたら幸いです！
ご確認よろしくお願いいたします。
アドバイスありがとうございます。
2023/03/27 10:56こちらのリッチメニューのアイキャッチですが、ブログカードなども260サイズのそれ用に変更した方が良いという認識でよろしいでしょうか？
結果はこれだけで判断できないことは理解しております。
2023/03/27 10:58原因の可能性だけでも把握できただけでも大変助かりました。
" こちらのリッチメニューのアイキャッチですが、ブログカードなども260サイズのそれ用に変更した方が良いという認識でよろしいでしょうか？ "
2023/03/28 10:10↓
JIN:R「ブログカード」ブロックの、外部リンクの自分でアイキャッチを設定する部分のことで合っていますか？？
ブログカードの数が多いのであれば、少なからず意味はあると思います！
トップページのリッチメニューに関しては、数がかなり多いので効果もそれなりに大きいんじゃないかなと。
ご確認よろしくお願いいたします！
アドバイスいただき、すぐに変更しました。
2023/04/04 14:15サーチコンソール上ではまだ改善されてませんが、サイトスピードでは数字の改善がみられているので経過観察中です。
ありがとうございました。