【352日目】CLS に関する問題: 0.1 超(モバイル)対応する?
Posted: Last Update:
前回の作業から15日も経過してしまいました…。お久しぶりです!「亀の子」です。前回の作業からなんと15日も経過してしまいました。今日はGoogleに指摘されている「CLS に関する問題: 0.1 超(モバイル)」に対応する日になりそうです!
前回作業の振り返り
前回の作業日はなんと、8月2日!今日が8月17日なので、ずいぶんと日数があいてしまいました。当然のことながら(?)前回の作業内容なんて何も覚えていません。
振り返ってみましょう…。
- 開発小技集に「全記事」というカテゴリーを作成して本番環境に持ってきた
その前の作業からの続きで、カテゴリーのアイキャッチ(画像)を作成して、本番環境に移植するところまでをやったようですね。
前回のブログの最後には「Google Search Consoleに指摘されている「CLS に関する問題: 0.1 超(モバイル)」に対応できるか、調査してみたいと思います!」と書いてありました。よし、今日はこれをやろう。
CLS に関する問題: 0.1 超(モバイル)とは?
まずは「CLS に関する問題: 0.1 超(モバイル)」が何なのかですよね。これ、Google Search Consoleが教えてくれる「あなたのサイトに問題がありますよ」という指摘の一つです。
Google Search Consoleの左側にある「ウェブに関する主な指標」をクリックすると、モバイルとPCに分けて状況を教えてくれます。
で、こちらが「亀の子」のサイトの様子です。
改善が必要なURL、171件…。
171件!
この「CLS に関する問題: 0.1 超(モバイル)」の原因、実はいろいろあるので、自分のサイトに合わせて見ていくしかありません。よし、見てみましょう!
けっきょくGoogleのサービス…
調べ方は簡単。先ほどの「ウェブに関する主な指標」から階層を降りて行って、URLをクリックすると、右側に「PAGESPEED INSIGHT」と表示されるのでここをクリックします。
調べてみると「画像要素で width と height が明示的に指定されていない」とありました。確かに指定していませんね。
レスポンシブ対応しているので、画像サイズはあえて指定していないのですが…。レスポンシブにしろといったのはGoogleさんなのに…。
対応しないことにした
検討しました。
結果、対応しないことにしました!なぜなら、赤信号ではないから!
まだ黄信号の状態なんですよね。それに、5Gになったらデータ量関係なくなるから、そのうちこの問題も問題じゃなくなってくるはずです。
あっという間に時間切れ
調べ物をしている間に今日は時間が来てしまいました。今日はここまで!
今回仕入れた情報の中に「loading="lazy"」で画像の読み込みを後回しにできるという情報があったので、次回はこの対応をしたいと思います!では、また次回。
