Maximizing Lighthouse scores for GeoPortal

My package.json scripts section looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"scripts": {
"start": "yarn run assets:dev && npm-run-all --parallel watch:*",
"build": "NODE_ENV=production yarn run assets:prod && npm-run-all prod:* && yarn run critical && yarn run pwa",
"assets:dev": "node build/copy.js",
"assets:prod": "node build/clean.js",
"critical": "node build/critical.css.js",
"prod:postcss": "postcss app/main.css -m -o dist/bundle.css",
"prod:webpack": "webpack --mode production",
"pwa": "node build/sw.js",
"watch:assets": "onchange 'app/assets/**/*' -- yarn run assets:dev",
"watch:postcss": "postcss app/main.css -m -o dist/bundle.css -w",
"watch:server": "browser-sync start --server 'dist' --files 'dist'",
"watch:webpack": "webpack --mode development --progress --watch"
},

Nothing too revolutionary there. The only interesting bit is the critical CSS, which ended up being remarkably straight-forward:

1
2
3
4
5
6
7
8
9
10
11
12
var critical = require("critical");

critical.generate({
inline: true,
base: "dist/",
src: "index.html",
dest: "index.html",
width: 500,
height: 900
});

console.log("Critical CSS rendered.");

When I get cross-browser testing and polishing done the final code will be on the Github repo.