Merge pull request #240 from adobecom/head-prefetch-test

MWPW-154060: Preload most used scripts in head.html

head.html

@@ -1,4 +1,32 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="preload" href="/styles/styles.css" as="style"/>
+<script>
+  const libs = (() => {
+    const { hostname, search } = window.location;
+    if (!['.hlx.', '.stage.', 'local'].some((i) => hostname.includes(i))) return '/libs';
+    const branch = new URLSearchParams(search).get('milolibs') || 'main';
+    if (branch === 'local') return 'http://localhost:6456/libs';
+    return branch.includes('--') ? `https://${branch}.hlx.live/libs` : `https://${branch}--milo--adobecom.hlx.live/libs`;
+  })();
+
+  const miloStyles = document.createElement('link');
+  const miloUtils = document.createElement('link');
+  const miloDecorate = document.createElement('link');
+
+  miloStyles.setAttribute('as', 'style');
+  miloStyles.setAttribute('href', `${libs}/styles/styles.css`);
+
+  [miloUtils, miloDecorate].forEach((tag) => {
+    tag.setAttribute('crossorigin', 'true');
+    tag.setAttribute('as', 'script');
+  })
+
+  miloUtils.setAttribute('href', `${libs}/utils/utils.js`);
+  miloDecorate.setAttribute('href', `${libs}/utils/decorate.js`);
+
+  [miloStyles, miloUtils, miloDecorate].forEach((tag) => tag.setAttribute('rel', 'preload'));
+  document.head.append(miloStyles, miloUtils, miloDecorate);
+</script>
 <script src="/scripts/scripts.js" type="module"></script>
 <style>body { display: none; }</style>
 <link rel="icon" href="data:,">