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

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

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

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

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

今回の条件

  • headで2KBほどのjavascriptファイルを読み込み
  • ページのほぼ先頭で3.7MBの画像、2枚目以降はせいぜい100KB程度で11枚

画像の読み込みの開始が遅れる?

deferあり

画像を読み込むタイミング(deferあり)
deferありの場合
  • DOMContentLoaded: 239ms
  • Load: 329ms

deferなし

画像を読み込むタイミング(deferなし)
deferなしの場合
  • DOMContentLoaded: 162ms
  • Load: 238ms

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

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

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

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

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

記事一覧へ戻る
メニュー