JavaScriptファイル読み込みにdeferをつけたときの画像読み込みのタイミング

↻ 2020/3/14

asnycやdeferのことが気になって調査中。画像の読み込み、というか最終的なページのロード、体感速度にどれくらい影響があるのか気になっています。JavaScriptの読み込みにdeferをつけたせいで画像の読み込みが読み込みが遅れるなんてことがあるのでしょうか。

どうしても（というわけでもないのですが）読み込まなければいけないJavaScriptファイルがある場合、それでもなんとかページを素早く表示させるにはどうするのがベター（ベストとは言わない）なのかということで悩んでいるわけです。

asyncをつける訳にはいかないJavaScriptファイルの読み込みをせめてちょっとでも早くしようとdeferをつけてみたりするものの、本当に意味あんのかなと思ったり。

ほんの小さなJavaScriptファイルであれば、特にdeferなど記載しないほうが安定するのかな？というのが現時点での結論。昔なつかし的なサイトのほうが表示が早かったりするのはそういうことなんじゃないかと。余計なファイルが少ないというのもあるのでしょうけども。

今回の条件

数十回試してもだいたいこんな感じでした。少なくとも数値が逆転することはなかった。

deferなしだとscriptも画像も同時に読み込みを開始してくれるのに、deferをつけると間が開いています。

ということでdeferをつけると画像の読み込み開始が遅くなる（こともある）模様。よくわからん…。

小さいファイルなら、読み込みと実行を分けるよりもさっさと一括でやったほうがパフォーマンスが良いということなのかしら。

もっといろいろなパターンで試してみよう。