CLSを改善してSEO対策
コアウェブバイタル（Core Web Vitals）はGoogleのUX指標としてSEOなどのページ評価で重視される指標の一つです。
コアウエブバイタルは「LCP」「FID」「CLS」で構成されています。その中のCLSについてこのページでは取り扱っていきます。
CLS（Cumulative Layout Shift）は、一度レンダリングされた後に何らかの要因により、再レンダリングしてレイアウトの位置ズレを数値化して評価されます。
例えば、ボタンを押そうとしたら、上の画像が読み込まれて位置がずれて広告をクリックしてしまったことなどないでしょうか？そのようなUXの低下を計測して指標化するのがCLSです。
主な要因は、画像サイズの未指定、画像読み込み、JavaScriptでDOMの挿入やDOMサイズの指定など。
ここではその中でもレスポンシブデザインのサイトの画像についてを主に扱います。
まず画像サイズを指定します。それはどうやるのかというと、昔ながらのタグに直書きのwidthとheightの表記方法です。
<img src="/images/test.jpg" <span class="has-inline-color has-accent-color">width="400" height="300"</span>>Code language:
JavaScript
(javascript)この値は元の画像の大きさを指定します。
これで画像読み込みによるCLSの増加は防げます。
次に、遅延読み込み時の指定の仕方です。
<img src="/images/space.png" data-original="/images/test.jpg" width="400" height="300"
class="lazy">Code language:
JavaScript
(javascript)ここでは画像の遅延読み込みによく用いられるlazy loaderを使用した場合を例にして記述しています。
先ほどと同じく、タグに直書きでwidthとheightを記述します。
そして、ここでsrcで読み込まれている「/images/space.png」についてですが、この画像は後から読み込まれる「/images/test.jpg」と同じサイズの画像である必要があります。
いちいちスペーサー画像をサイズごとに作成するのはめんどくさいので、私の作成した簡単なスクリプトを置いておきます。
スペーサージェネレーターはドメインのルート上のimagesディレクトリにspacerフォルダーごとアップロードすると設定不要で使用できます。spacerディレクトリへは書き込み権限を付与してください。
大したものではないですが、再配布はご遠慮ください。
スペーサージェネレーター使用例
https://www.hogehoge.com/images/spacer/300x120.png
の様に呼び出すことで使用できます。
レスポンシブデザインに対応する
先ほどのimgタグのコードにmax-width:100%;とスタイルを指定すると、レスポンシブサイトの画像遅延読み込みでもCLS評価の低下を防ぐことができます。
<style>img {max-width:100%;}</style>
<img src="/images/space.png" data-original="/images/test.jpg" width="400" height="300" class="lazy">
最後にimgタグにザクっと最大サイズを100%に指定したコードを載せて終わりにしたいと思います。皆様のSEOに貢献できれば幸いです。