Googleが発表した、WebページUX指標「コアウェブバイタル」には、「LCP」「FID」「CLS」の3つの指標があります。詳しくは Web担当者フォーラムの【重要】コアウェブバイタルとは? グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】に書かれています。 この中のCLS(Cumulative Layout Shift)とは「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。例えば画像を読み込む際、その画像サイズが指定されていなく、画像の次にはテキストが書かれていたとします。この場合、テキストの方が軽いため先に読み込まれます。まずテキストが読み込まれ、その間に画像が読み込まれますが、ブラウザは画像サイズが分かりません。読み込みながら「あ、この画像は500 x 500の画像だったのか」と理解し、テキストの上に縦横500の余白を作り、
![Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方](https://cdn-ak-scissors.b.st-hatena.com/image/square/d8bff663d47c5cd309da8a83d570a6ff7307f1e4/height=288;version=1;width=512/https%3A%2F%2Fweb-keiei.com%2Fwp-content%2Fuploads%2F2020%2F06%2F200628-15-208x138-1.jpg)