画像の遅延読み込み

遅延読み込みとは、表示領域外の画像がすぐには読み込まれず、ユーザーが画像にスクロールしたときにのみ読み込まれることを意味します。 loading="lazy" 属性で十分です。

遅延読み込みを行わないと、ブラウザーはユーザーには決して表示されないページの一番下の画像もダウンロードします。これにより、最初のレンダリングが遅れ、データが無駄になります。遅延ロードにより起動が高速化され、転送が節約されます。

1. 1表示領域の下の画像と iframe に、loading="lazy" を追加します。
2. 2メインのスクロールせずに見える範囲の画像 (LCP 画像) では Lazy を使用しないでください。できるだけ早く画像を使用する必要があります (必要に応じてプリロードします)。
3. 3レイアウトがジャンプしないように、常に幅と高さを指定してください (CLS)。