画像の読み込み、全部すぐでいい？HTMLの loading=”lazy”
ページの下のほうにある画像、最初から全部読み込む必要はないかもしれません。loading="lazy" を画像に付けると、ブラウザーが表示位置に近づいたタイミングで読み込みます。画像が多いページで、初回の通信を抑えたいときに便利です。
書き方は属性を一つ足すだけ
<img src="images/work.jpg" alt="制作風景" width="800" height="600" loading="lazy">記事の途中にある写真や、一覧ページの下部に並ぶサムネイルなどで試しやすい方法です。JavaScriptを追加せず、HTMLだけで指定できます。
最初に見える画像には慎重に
ページを開いてすぐ見えるメイン画像まで遅延すると、かえって表示が遅く感じられることがあります。まずは画面外の画像から使うのがおすすめ。width と height も指定しておくと、画像の読み込み前に表示領域を確保しやすくなります。