グーグルサーチコンソールの「ウェブに関する主な指標」でステータスが不良となってしまった項目たちの対応をするにあたって、参考になりそうな記事たちを集めておくページ。
PageSpeedInsightsの使い方と分析結果の各項目の意味について
インタラクティブになるまでの時間とはなにか
CLS（Comulative Layout Shift）に対する解決方法
上記記事へたどり着いた方法：「Cumulative Layout Shift（CLS） 対応」でググって上位表示された
上記記事での対応方法ざっくりまとめ：（１）ヘッダーとフッターのロゴ画像に対して width heightを設定する 対象画像にidが振られているならテーマ内HTMLを直接編集せずともCSSで設定すればOK この対応により、ウェブページを表示する際にどれくらいの面積を利用するかがわかっていないために表示位置がズレてしまう問題に対応可能となる
上記記事の対応を実施するためのじぶんのサイトでの課題：PCでもスマホでもどちらの環境においても、どんな画面サイズでもいいように横幅100%と設定してしまっている しかしながらこれによって横幅が決まらず（横幅が決まってから画像のアスペクト比によって縦幅が算出されるので）結果的に縦幅も決まらないということになっている かといって小さいサイズにしてしまったら情報盛りだくさんのロゴが非常に見づらくなってしまった ロゴデザインをシンプルにした上で、リンク先のページのように左端に寄せてワンポイント程度の表示に留めるようにすれば、小さいロゴでも問題ないかもしれない
まずやってみること：（ロゴデザインの刷新は今後やるとして）いまの画像のまま、width heightを設定してみて、CLSの値が改善されるのか否かを確認する
コメント