コア ウェブ バイタルの「CLS」を誰でも簡単に改善する方法⇒「img要素にwidth、height属性を設定」

コア ウェブ バイタルのCLSをチョー簡単に改善する方法（だれでもできる）

「CLS」にフォーカスした改善で、ウェブのパフォーマンス改善の第一人者であるグーグルのアディ・オスマニ氏がツイッターで共有してくれたTIPSだ。

※筆者補足: CLSはCumulative Layout Shiftの略で、日本語では「累積レイアウト変更」。視覚要素の安定性を示す指標だ。こちらの記事で詳細を解説した。

『img要素に、width属性とheight属性を設定する。そうすれば、モダンブラウザ（Web標準に準拠しているブラウザ）は画像をダウンロードする前に本来のサイズを認識できる。』

1：画像のimgタグにwidth属性とheight属性を追加しておくと、ブラウザはその画像のアスペクト比（横と縦の比率）がわかる。
2：レスポンシブWebデザインであっても、画像のアスペクト比と配置場所がわかっていれば、ブラウザは画像の表示予定サイズを算出できる。
3：表示予定サイズがわかっていれば、ブラウザは画像のダウンロード前にでも画像を表示すべき場所に適切な大きさの領域を事前に確保できる。
4：そうすることで、画像があとからダウンロードされたとしても、レイアウト崩れの発生を抑制できる。

【白石】
このツイートにアニメーション画像がありますが、何もしていない場合は後から画像が表示され先に表示されていたテキストが押し出される動きをします。

『width』の読み方

実は読み方がわからなかったので調べてみました！
『width』の読み方「ウィドゥス」。幅という意味。

『height』の読み方

『height』の読み方「ハイ」。（正確には「ハイ」の後に「ト」の無音があるらしいです）意味は「高さという意味です。」

SEOコンサルタントのまとめ

「CLS」の改善方法⇒「img要素にwidth、height属性を設定」
…まとめますと、昔はimg要素に「width」「height」を記述していました。
しかし、「レスポンシブ」がSEO的に良いとなり、浸透してきて「width」「height」属性をわざわざ記述しなくなってきました。
しかし、そうするとレンダリング（表示）される時に、先に軽いテキストが表示され、遅れて画像が表示されることが多いのですがその時にテキストやレイアウトが一度表示された場所を押しのけて画像が表示されます。
そのことが「コア ウェブ バイタルの」「CLS」では「（ユーザーの利便性として）よろしくない」と評価され、検索順位にも影響がある、と言われているのです。
あらかじめ「width」「height」属性を記述しておけば、画像の表示が遅れても、最初から画像の表示領域が確保されているのでテキストやレイアウトを押しのける事がなくなります。
ですから「img要素にwidth、height属性を設定するとよい」
という訳です。

「img要素に、width属性とheight属性を設定する」だけで「CLS」を改善できる！
これなら私でも作業できます。簡単です。全部の画像にやるのは大変ですが、これからがんばりましょう！

かなーり簡単にCLSを抑制する方法

画像によるCLSを防止するには、height属性とwidth属性を追加すると役に立つことは以前にこのコラムで紹介した。その画像の表示に必要なスペースをブラウザがあらかじめ計算して確保できるからだ。

同様に、（JavaScriptで読み込む）広告やバナーにも対しても事前にスペースを確保しておくことでCLSを抑制できる場合がある。

具体的には、CSSで、サイズを固定したコンテナ（要素を格納するためのボックス）を設定し、高さを明示しておくのだ。たとえば次のようにする：

<style>
.container {
display: block;
width: 720px;
height: 90px;
background: #ccc;
overflow: hidden;
}
</style>

そのコンテナの中に広告などを表示させるのだ。

<div class="container">
<!-- ここに画像や広告を入れる -->
</div>

画像のheight属性やwidth属性と同様に、この施策も難易度は低いはずだ。