I have following assets:
- Preloaded local javascript -
<link rel="preload" as="script" href="my.js">
- Local javascript -
<script type="text/javascript" src="my.js" async defer>
- DNS-Prefetch of CDN domain -
<link rel="dns-prefetch" href="//my.cdn.com">
- Preconnect of remote javascript -
<link rel="preconnect" href="//consentscript.tld">
- Remote javascript -
<script type="text/javascript" src="https://remote.server/my.js" async defer>
- Inline javascript -
<script>myFunc...;</script>
- Inline styles -
<style>body{color:black;}</style>
Empirically, I realized that the order of these assets, as they are listed in the HTML head, influences the loading speed of the page and the Core Web Vitals metrics.
Could somebody point me to the performance-optimized order of asset placement in the HTML head? A link to documentation would help me too.