pagespeed insightsのCLS対策。
画像じゃなくて、テキストの読込が原因で、CLSが発生している場合はどうすればいいんだろう。
テキストが50文字の場合と、500文字の場合で行数が変わるので、heigthが変わる。
事前に文字数を元に推定の行数を計算して、それを渡してheghtをHTMLで指定する感じかな。
あと、画像のサイズが事前にわからない場合、どうすればいいんだろうか。
事前に計算してDBで持っておけってことなのかな。。
PHPで画像の高さなどを取得できるのであれば、それをHTMLに渡せばいいかな。
Core Web Vitals対応：CLS主な原因である画像と広告の修正方法
- HTML読み込み時には高さが確定しない要素がある（画像や広告。例えば画像のURLからは、実際の高さや幅はわからない。）
- この時点では要素の高さは0扱いされている。
- HTMLレンダリング後に、実際の要素（画像や広告）のロードが発生、高さが決まる
- もともと0の高さだったところに要素が「挿入」され、コンテンツ全体がシフトしたように見える
SearchConsoleの「CLSに関する問題」とは何かや、改善方法を解説します | 駒鳥のエンジニア日誌
2020年11月10日のGoogleブログの中で、CLSを含むCore Web Vitals2021年5月より検索ランキング算定ロジックに組み込まれることが宣言されています。
Timing for bringing page experience to Google Search
やることは結構シンプルです。
ページが読み込まれてから動的に高さが変わってしまう処理を無くすか、事前に高さを指定しておくことにつきます。
Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方 - 製造業ホームページ制作・Web戦略・SEOなら│WebRocket
HTMLで画像の絶対値、CSSで相対値を指定する
HTMLで縦横の絶対値が書き込まれた状態で、CSSにも縦横の情報を書きます。横は100%、max-width付き、縦はautoとします。これでCLSエラーが無くなりました。
https://www.web-keiei.com/webkk2019/wp-content/uploads/2020/06/200628-13.jpg
徹底的にいろいろとやった結果、
原因はフッターが先に読みこまれて、その後でメインが読み込まれた結果、フッターが下にズレてCLSとして判定されてたみたい。
ちなみに、LighthouseではCLSが0で、 PagespeedInsightsだけでCLSが検出されるからテスト環境で検証できなかった。
フッターを削除することで改善したけど、削除してしまって良いのだろうか。
フッターを遅延読込しようか。。
とにかく、heightを色々と計算して出力してたのは撤去しようかな。
初期表示時のみフッターを非表示にするという回避策を取ったんだけど、
いまいちだから、再度調べてたら原因を発見した。
何故か知らないが、自分が書いたソースコードには書いてないんだけど、
Google Chromeで表示される際に、footerに自動で style="float: none;" が設定されてることが原因だった。
float none だから、footerが画面の一番上にある扱いになっていたという。
でも一番下にあるから、それがCLSの数値に計上されているという。
footerのCSSに clear: both; を付けることで解決。
これだけ。
この1行のために、どれだけの労力を割いたことか。。
7人日は割いた気がする。
そもそも、Speed Insightsのためにここまでする必要があるのか。どうなのか。
Amazonのページを測ってみたら、がっつり赤色だった。
