前からよくわからずに、何となく使ってたやつ
ちなみに preconnect はCSS用らしく、jsでは意味が無いみたい
・async も defer もレンダリングを妨げずに、jsを読み込むことができる
・src がある場合のみ利用可
・レンダリングを妨げないのだから、headで読み込み始めた方がいい
・async は単独で読み込む、 defer は記述の上から順に読み込む
・jsを直書きする場合は下部に記述
これが一番わかりやすかった
次がこれ
最速はasync付きでhead要素に記述
script要素の新常識・安易にdefer/async属性を付けてはいけない - Qiita
【scriptの非同期読み込み】asyncとdeferの違いと使い方。bodyではなくheadで読み込んだ方が良い理由。 - ソロ学