using web dev hack

Shuunen · Jun 24, 2019 · 9cb739b · 9cb739b
1 parent 7353c34
commit 9cb739b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/defer-styles.js b/src/defer-styles.js
@@ -1,5 +1,6 @@
 // Credit : https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
 
+/*
 const loadDeferredStyles = () => {
   const addStylesNode = document.getElementById('deferred-styles')
   const replacement = document.createElement('div')
@@ -15,3 +16,9 @@ if (raf) {
 } else {
   window.addEventListener('load', loadDeferredStyles)
 }
+
+*/
+
+// Credit : https://web.dev/defer-non-critical-css
+const styles = document.querySelector('link[rel="preload"]')
+styles.addEventListener('load', () => (styles.rel = 'stylesheet'))
diff --git a/src/index.html b/src/index.html
@@ -30,6 +30,10 @@
             transition: opacity .3s;
         }
     </style>
+    <link rel="preload" href="styles/all.css" as="style">
+    <noscript>
+        <link rel="stylesheet" href="styles/all.css">
+    </noscript>
 </head>
 
 <body>
@@ -56,9 +60,6 @@ <h1 class="fz30">Hey I'm Romain Racamier-Lafon</h1>
             if you dare.
         </p>
     </main>
-    <noscript id="deferred-styles">
-        <link rel="stylesheet" type="text/css" href="styles/all.css">
-    </noscript>
     <script nonce="shu6162n1" async src="main.js"></script>
 </body>