delay style loading (#29)

* inline assets

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "cSpell.words": [
         "GTmetrix",
+        "nosniff",
         "purgecss",
         "sourcerer"
     ]

package.json

@@ -2,17 +2,21 @@
     "author": "Romain Racamier-Lafon <romain.racamier@gmail.com>",
     "bugs": "https://github.com/Shuunen/folio/issues",
     "config": {
+        "lh-port": 8088,
         "port": 8080
     },
     "dependencies": {
         "cross-var": "1.1.0",
         "google-lighthouse-puppeteer": "0.5.2",
-        "http-server": "0.11.1",
         "npm-run-all": "4.1.5",
         "parcel-bundler": "1.12.3",
+        "parcel-plugin-inliner": "1.0.10",
         "parcel-plugin-purgecss": "2.1.2",
         "parcel-plugin-static-files-copy": "2.1.2",
-        "parcel-plugin-sw-precache": "1.1.1"
+        "parcel-plugin-sw-precache": "1.1.1",
+        "repo-check": "1.1.4",
+        "rimraf": "2.6.3",
+        "serve": "11.0.2"
     },
     "description": "My personal portfolio",
     "devDependencies": {
@@ -22,7 +26,6 @@
         "src/",
         "static/"
     ],
-    "private": true,
     "homepage": "https://github.com/Shuunen/folio#readme",
     "keywords": [
         "Romain Racamier-Lafon",
@@ -33,20 +36,23 @@
     ],
     "license": "GPL-3.0",
     "name": "folio",
+    "private": true,
     "repository": {
         "type": "git",
         "url": "git+https://github.com/Shuunen/folio.git"
     },
     "scripts": {
         "build": "parcel build src/index.html --public-url . --no-source-maps",
-        "check": "npx repo-check",
+        "check": "repo-check",
         "dev": "cross-var parcel src/index.html --port $npm_package_config_port",
         "lint": "standard \"src/**/*.js\" \"tests/**/*.js\" --fix",
-        "prebuild": "npx rimraf dist/*",
+        "postbuild": "rimraf dist/{*.css,main.*.js}",
+        "prebuild": "rimraf dist/*",
         "prestart": "npm run build",
-        "serve": "cross-var http-server dist -p $npm_package_config_port",
+        "serve": "cross-var serve dist --listen $npm_package_config_port --single",
+        "serve:lh": "cross-var serve dist --listen $npm_package_config_lh_port --single",
         "start": "npm run serve",
-        "test": "npm-run-all check lint build --parallel serve test:lh --race",
+        "test": "npm-run-all check lint build --parallel serve:lh test:lh --race",
         "test:lh": "run-s test:lh:generate-report test:lh:check-metrics",
         "test:lh:check-metrics": "node tests/check.js",
         "test:lh:generate-report": "lighthouse-puppeteer --file ../../tests/puppeteer.js --output_directory tests/reports"

src/index.html

@@ -30,7 +30,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
@@ -39,7 +40,7 @@ <h1 class="fz30">Hey I'm Romain Racamier-Lafon</h1>
             if you dare.
         </p>
     </main>
-    <script nonce="shuu6162n1" async src="main.js"></script>
+    <script nonce="shu6162n1" async src="main.js"></script>
 </body>
 
 </html>

src/register-sw.js

@@ -1,5 +1,5 @@
 // Activate the service worker
-if ('serviceWorker' in navigator && document.location.hostname !== 'localhost') {
+if ('serviceWorker' in navigator && document.location.port !== '8080') {
   window.addEventListener('load', function () {
     // this way Parcel won't look for service-worker.js file
     const swName = 'service-worker.js'

src/styles/_base.css

@@ -34,6 +34,10 @@ a {
   text-decoration: none;
 }
 
+p {
+  line-height: 2.5rem;
+}
+
 strong {
   color: var(--color-primary);
 }

static/_headers

@@ -1,6 +1,6 @@
 /*
   Cache-Control: public, max-age=31536000
-  Content-Security-Policy: script-src 'self' 'strict-dynamic' 'nonce-shuu6162n1' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'self';
+  Content-Security-Policy: script-src 'self' 'strict-dynamic' 'nonce-shu6162n1' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'self';
   X-Content-Type-Options: nosniff
   X-Frame-Options: DENY
   X-XSS-Protection: 1; mode=block

tests/check.js

@@ -1,8 +1,8 @@
 const assert = require('assert')
 const data = require('./reports/summary.json')
 const score = parseFloat(data[0].score) * 100
-const lastScore = 95
+const minScore = 90
 
-assert(score >= lastScore, `Lighthouse current score is ${score} and should be superior or equal to last one : ${lastScore}`)
+assert(score >= minScore, `Lighthouse current score is ${score} and should be superior or equal to the minimal one : ${minScore}`)
 
-console.log(`\n\nGood ! Lighthouse current score (${score}) is not worse than last one (${lastScore}) \\o/\n`)
+console.log(`\n\nGood ! Lighthouse current score (${score}) is great \\o/\n`)

tests/puppeteer.js

@@ -1,7 +1,7 @@
 class Puppeteer {
   getUrls () {
     return [
-      'http://127.0.0.1:8080'
+      'http://localhost:8088'
     ]
   }