defer と async の区別が分からないので調べた

前からよくわからずに、何となく使ってたやつ

ちなみに preconnect はCSS用らしく、jsでは意味が無いみたい

 

 

・async も defer もレンダリングを妨げずに、jsを読み込むことができる

・src がある場合のみ利用可

レンダリングを妨げないのだから、headで読み込み始めた方がいい

・async は単独で読み込む、 defer は記述の上から順に読み込む

・jsを直書きする場合は下部に記述

 

 

これが一番わかりやすかった

スクリプト: async, defer

 

次がこれ

最速はasync付きでhead要素に記述

script要素の新常識・安易にdefer/async属性を付けてはいけない - Qiita

 

【scriptの非同期読み込み】asyncとdeferの違いと使い方。bodyではなくheadで読み込んだ方が良い理由。 - ソロ学