#64 CLSに対応する

2年ぶりにnote開いたらUI変わっててビビる。
完全　浦島太郎なので一歩ずつ

CLSとは

Cumulative Layout Shift（累積的なレイアウト変化）。
要するに、読み込み時のレイアウト崩れのこと。

CLSは、2021年5月からグーグルの検索ランキング要因　コアウェブバイタル（Core Web Vitals）に組み込まれた3つの指標の一つ。

CLSの評価スコアの範囲

0は移動なし、1は移動量が最大

0.1未満が「良好」
0.25以下は「改善が必要」
0.25を超えると「不良」

CLSの低下要因

• サイズ指定がない画像

• サイズ指定がない広告、埋め込み、iframe

• コンテンツが動的に埋め込まれる

• Webフォントの読み込み（FOUTやFOIT）

• DOMを更新する前にネットワーク応答を待機するアクション

CLSの改善方法

●　画像サイズを指定する
　(widthとheight要素でサイズを指定するか、cssアスクペクト比率を使い画像が表示される前から予定する画像領域を確保する)
●　広告も画像と同じように、表示領域を事前に確保する
●　WebフォントのFOUTやFOITを最小限に抑える
　(CSSプロパティのfont-displayやHTMLで Webフォントのレンダリングサイクルを最適化。対応していないブラウザがあるので注意が必要)

参考
https://innova-jp.com/core-web-vitals-cls/