サーチコンソールのエラー修正方法について

Question

お願い致します。
サーチコンソールのページエクスペリエンスのエラーを修正していこうと考えています。
修正の流れとして、以下の進め方は正しいでしょうか？

①サーチコンソールの左メニュー「ページエクスペリエンス」をクリックする

②モバイルの「ウェブに関する主な指標」をクリックする

③添付画像001のような画面が表示されます

④「良好なURLと判断されなかった理由」というところに、5行問題が書かれています。
ここの内容を改善していく。

⑤赤線の一つをクリックすると、添付画像002が表示されます。URLグループに２つURLがある為、
赤線のURL（https://aoyama-garden.com/lp/garden_light_h.html）をコピーして、PageSpeed Insightsでレポートを開く

⑥表示されたレポートの中間部分にある赤丸部分をクリックする（添付画像003）
https://pagespeed.web.dev/analysis/https-aoyama-garden-com-lp-garden_light_h-html/wtz89yzw8u?hl=ja&form_factor=mobile

⑦結果が表示されて、診断内容が表示されます。
上から「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」があって、合格した監査、該当なし、以外の部分を解決していくで間違いないでしょうか。###HR######IMG0fbc836647a204677c1776502b49ec191.jpegIMG0### ###IMG1aa5537220026be7b7e9debf66cb11bd8.jpegIMG1### ###IMG2c03b2ea318895846ed6ab96dd60b5b29.jpegIMG2###

Answer

ECマスターズの山本です。

そうですね、その手順で問題ないかと思います。

LCP（Largest Contentful Paint）：ページの表示速度
FID（First Input Delay）：ユーザー操作への応答速度
 CLS（Cumulative Layout Shift）：描画要素のレイアウトの安定性

ですので、問題と評価されたページを
順番に修正して、再度評価を実行して
クリアになるまで繰り返してください。

よろしくお願いいたします。

Answer

ご回答ありがとうございます。
見方の点で、お伺い致します。

■サーチコンソール
添付ファイル01の「グループの総数」という数値がありますが、これはどういうグループですか？
同じようなエラー内容のページをまとめたという事でしょうか？

■ページスピードインサイト
URLに　https://aoyama-garden.com/shop/default.aspx
を入力して、問題箇所を見ると、添付画像02のようにあります。
内容は、画像要素で width と height が明示的に指定されていない　とのことです。
現状はサイズを100％にして、ボックスでサイズ指定しています。ただ、具体的にwidth="200" height="200"のように入れた方がいいという事でしょうか？
その場合、スマホとPCでサイズが異なりますが、正しい方法はございますか？

次のエラーで添付画像03です。内容はページの CLS への影響が特に大きい DOM 要素です。

　のエラーは、このボックス要素は大きいので、0.092時間がかかっているという問題でしょうか？
この解決方法として、wrapper_を小分けにするや、wrapper_内の要素の表示スピードを上げるなどがありますが、
どういう風に解決方法を見つければよろしいでしょうか。

その下ののエラーは、その上の500円クーポンの水色の画像が、会員かどうかで表示非表示
に切替わります。その影響で、その下の緑のLINEバナーの開始位置が変更になり不安定要素として捉えられているという事でしょうか。
この場合の解決策は何かございますか？###HR######IMG07d0ed90d195fed0125d84278d5341308.jpegIMG0### ###IMG1e645af940998becd1447aacc487a65fc.jpegIMG1### ###IMG218e921ff5b699fcac62e7637a246f33f.jpegIMG2###

Answer

ECマスターズの伊藤です。

> ■サーチコンソール
> 添付ファイル01の「グループの総数」という数値がありますが、これはどういうグループですか？
> 同じようなエラー内容のページをまとめたという事でしょうか？

おっしゃるとおりです。

> 現状はサイズを100％にして、ボックスでサイズ指定しています。ただ、具体的にwidth="200" height="200"のように入れた方がいいという事でしょうか？

おっしゃるとおり、Googleでは、
width="200" height="200"のように入れることを
推奨しています。

imgにwidth="200" height="200"を設定しつつ、
CSSにてレスポンシブ対応していただくことで、
CLSの改善が期待できます。


> 　のエラーは、このボックス要素は大きいので、0.092時間がかかっているという問題でしょうか？

CLSの値は、時間ではなく、低いとレイアウトの
ずれによる影響を受けた範囲が少なく、CLSの値が大きいと
レイアウトのずれによる影響を受けた範囲が
大きいということになります。

wapper内のコンテンツの高さ等が決まれば、
必然的に全体のずれがなくなるので、
まずは
width="200" height="200"
を対応して様子を見てみてはいかがでしょうか。

> その下ののエラーは、その上の500円クーポンの水色の画像が、会員かどうかで表示非表示
>     に切替わります。その影響で、その下の緑のLINEバナーの開始位置が変更になり不安定要素として捉えられているという事でしょうか。

そうですね、表示されるまでに
かなり時間がかかっているのが原因かと思います。

ページ全体が重いので、JSが読み込まれるまでに
時間がかかっている印象を受けます。

まずは
https://aoyama-garden.com/img/usr/aoyama/visual/H_TOP_h231011.jpg
などのような、大きすぎる画像を減らして、
全体の読み込み速度を改善頂いたくのが
よろしいのかと思います。

Answer

ありがとうございます。

＞mgにwidth="200" height="200"を設定しつつ、
＞CSSにてレスポンシブ対応していただくことで、
＞CLSの改善が期待できます。
レスポンシブにもいくつか方法はあるかと思いますが、どういう方法がよろしいでしょうか。
お勧めの方法を教えてください。記述しているサイトなどあれば教えてください。

＞まずは
＞https://aoyama-garden.com/img/usr/aoyama/visual/H_TOP_h231011.jpg
＞などのような、大きすぎる画像を減らして、
＞全体の読み込み速度を改善頂いたくのが
＞よろしいのかと思います。
減らしかたですが、PCもスマホも考慮しないといけないと思います。
この一つの画像の例で構いません。
減らし方について教えていただけますでしょうか。減らし方の考え方について
知りたいです。

Answer

ECマスターズの伊藤です。

> レスポンシブにもいくつか方法はあるかと思いますが、どういう方法がよろしいでしょうか。

画像に%を利用して表示させるのが一般的かと思います。
管理が楽なのと、どのサイズでもキレイに表示されます。

他の方法としては、ブレイクポイントを設ける方法が
考えられますが、あまり画像に対して
ブレイクポイントを設けるといったことは
無いかと思います。

前者についてはすでに対応されているかと思いますので、
CSSについてはこのままのご対応でよろしいかと思います。

> この一つの画像の例で構いません。
> 減らし方について教えていただけますでしょうか。減らし方の考え方について
> 知りたいです。

先日よりサイズが小さくなったようですが、
ご対応済みでしょうか。

画像サイズとしては、現在の表示サイズから考えて
このくらいでよろしいかと思いますが、
ファイルサイズについては388.90 KBあるようですので、
200KBを目安にできる限りで圧縮いただいた方がよろしいです。

ファイルサイズの圧縮には

Squoosh
https://squoosh.app
などをご利用ください。

こちらははGoogle Chrome Labsが開発、
提供している画像圧縮サービスで
ブラウザ上からドラック＆ドロップで
簡単に画像を圧縮することができます。