infi-nl / the-infi-way

How we like to build software
https://way.infi.nl
Other
9 stars 8 forks source link

Set up lighthouse plugin for Netlify #55

Closed LucaScorpion closed 1 year ago

LucaScorpion commented 1 year ago

Closes #53

Set up the Netlify Lighthouse plugin during build.

One consideration: this PR adds something we've been (actively) trying to stay away from until now: a package.json. However, it is only needed so Netlify can install and use the @netlify/plugin-lighthouse package during build, so you never actually need to run npm install locally. I've also kept its contents as minimal as possible, including only the name, repository and devDependencies (and even then we could consider dropping those first two). In my opinion the value we gain from this is worth it though, especially since it doesn't affect anything else.

The current state of affairs, after one small addition (adding a meta description to the page):

image

I've also set thresholds for the performance, accessibility, best practices, and SEO scores in the netlify.toml (see https://github.com/netlify/netlify-plugin-lighthouse#install-plugin-with-a-netlifytoml-file). They are all set to 100 (the max score), except for SEO which I set to 95 (currently it's 96 due to a small "issue" with tap target size). That is very strict, although I think not necessarily unreasonable given the website setup (a quite simple prerendered HTML, which should be fully accessible). And when one of the numbers does drop, we can always consider lowering the threshold.

When the build fails because of one of these thresholds, you will see this in the deploy log:

image

netlify[bot] commented 1 year ago

Deploy Preview for the-infi-way ready!

Name Link
Latest commit d71381315b9055507f2fe3dca4e515d3b1222b93
Latest deploy log https://app.netlify.com/sites/the-infi-way/deploys/641b638def90800008aa26cb
Deploy Preview https://deploy-preview-55--the-infi-way.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.