defer styles like advized by google

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

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/src/defer-styles.js b/src/defer-styles.js
@@ -0,0 +1,17 @@
+// Credit : https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
+
+const loadDeferredStyles = () => {
+  const addStylesNode = document.getElementById('deferred-styles')
+  const replacement = document.createElement('div')
+  replacement.innerHTML = addStylesNode.textContent
+  document.body.appendChild(replacement)
+  addStylesNode.parentElement.removeChild(addStylesNode)
+}
+
+const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
+
+if (raf) {
+  raf(() => window.setTimeout(loadDeferredStyles, 0))
+} else {
+  window.addEventListener('load', loadDeferredStyles)
+}
diff --git a/src/index.html b/src/index.html
@@ -16,10 +16,24 @@
     <meta property='og:url' content='https://rrl-folio.netlify.com/'>
     <meta property='og:description' content='Romain Racamier-Lafon - Portfolio - Personal website'>
     <title>Romain Racamier-Lafon - Folio</title>
+    <style>
+        .loader {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #00314F;
+            transition: opacity .3s;
+        }
+    </style>
 </head>
 
 <body>
-    <div class="loader" style="position: absolute;top: 0;left: 0;width:100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: #00314F; transition: opacity .3s;">
+    <div class="loader">
         <img src="images/loader.gif" alt="loading screen"></div>
     </div>
     <main class="col center p1 fz20">
@@ -32,7 +46,8 @@ <h1 class="fz30">Hey I'm Romain Racamier-Lafon</h1>
             <a target="_blank" rel="noopener noreferrer" href="https://vuejs.org">VueJS</a>,
             <a target="_blank" rel="noopener noreferrer" href="https://gtmetrix.com/reports/rrl-folio.netlify.com/souu1lie">performance</a>
             and
-            <a target="_blank" rel="noopener noreferrer" href="https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://rrl-folio.netlify.com/">best practices.</a>
+            <a target="_blank" rel="noopener noreferrer"
+                href="https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=rrl-folio.netlify.com/">best practices.</a>
         </p>
         <p>
             You can check my
@@ -41,7 +56,9 @@ <h1 class="fz30">Hey I'm Romain Racamier-Lafon</h1>
             if you dare.
         </p>
     </main>
-    <link rel="stylesheet" href="styles/all.css">
+    <noscript id="deferred-styles">
+        <link rel="stylesheet" type="text/css" href="styles/all.css">
+    </noscript>
     <script nonce="shu6162n1" async src="main.js"></script>
 </body>
 

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,4 @@
+import './defer-styles'
 import './register-sw'
 
 console.log('folio started')