CLS対策

曇り自分の作ったサイトのSEOの指標の一つになる予定の「CLS」対策を行った。 CLSって、ページが読み込まれてから、コンテンツがガクッとしたに下がる現象のことで、主にサイズ未指定の画像とか、後から差し込まれる広告が原因で下に下がっていく。 これがユーザビリティを損ねるとして、今後指標になる予定にされている。
それのスコアが非常に悪かったので、指標になる前に改善しなくては、ということで色々やっていた。
画像に関しては、単純にimgタグのwidth, heightにサイズを入れればいいだけ。 HTML4とかの時代でwidth=”50″ height=”30″みたいな感じで入れていたけど、まんまそれ。 サイズは実際の表示サイズでもオリジナルサイズでも比率さえあっていれば何でもいいので、オリジナルサイズで入れた。

で、そのままだと、指定した値で画像が表示されてしまうので、後はCSSで調整をする。
これも簡単で、基本的にはwidth: 100%, height: autoでOK。 ただ、注意しないといけない点があって、width, height共にautoだと、高さが計算されないのでNG。 width: 100%になっているので、ブロック幅をしてない場合は想定外のサイズで表示される、という感じだった。
スマホは基本的には大丈夫だったのだけど、自分のサイトではPC側で少し調整が必要だった。 で、CLSのスコアは一番悪いページで0.98、だいたいが0.5くらいだったのが、0~0.012まで改善された。

ついでに、ブラウザネイティブの機能として実装されたlazy loadや、今までやってこなかったdns prefetchなども実装した。 ついでに、.css, .jsを廃止し、全てインラインでHTML内に書き込むことにした。
外部ファイル化するメリットも特に無いような感じがしてしまったので、試しに全部インラインで。 プログラムで上手くやってるので、cssやjs変更した際の手間も全く無いし、その処理による読み込みパフォーマンスの悪さもほぼ無いので、やるデメリットが特になさそう。
imgのwidth, heightやCSSなどのインライン化など、WEBの世界が20年くらい前に戻っているような錯覚に陥る。