【SEO】レイアウトシフトメモ

自分用のメモとして残しておきます。

数ミリ秒の低下でもペナルティになる

累積レイアウトシフト(CLS)は、PageSpeed Insights でわかる

CLS判定値が0.1以下ならOK、0.1以上なら要改善

【対策】サイズをimgタグにいれる

ページ読み込み前からあらかじめ表示枠を確保しておくことができるため、画像の基のサイズのheight width を設定しておくと短縮できる。

実際に表示されるサイズは、CSSで入力し、imgタグには元のサイズを入力する流れ。

元のサイズはプロパティで確認することができる。

<img src=".png" alt="" width="1000px" height="78px" >

img {
 width: 100%;
 height: auto;
}