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.