Achievement unlocked: Lighthouse score of 100

What is Lighthouse and why did I care?

Lighthouse is an open-source, automated tool for improving the quality of your web apps.

Lighthouse can be run as a Chrome Extension, from the command line, or used programmatically as a Node module. You give Lighthouse a URL that you want to audit, it runs a barrage of tests against the page, and then it generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

I cared because “I 💓 web validators” and it kicked me finally into action adding the enigmatic “manifest.json” file to my homepage.

Turns out, creating a web app manifest, complete with taking care of offline handling with a service-worker behind the screens, is actually not that hard, thanks to a plethora of useful documentation and tutorials, all of which are neatly linked right from the LightHouse report page.

The result:

My Lighthouse score of 100/100

Running the test really helps you to learn how to set up the manifest file and optimize your site accordingly.

In the end it took me about three hours to achieve the great 100/100 score by following the documentation and setting up the web app manifest file with a service worker in the currently available LightHouse test. Most of that time I actually spent on creating an app icon of myself.

Thanks goes out to CSSWizardry Magician Harry Roberts for boasting with his site’ score.

His “First meaningful paint”, “Perceptual Speed index”, “Estimated Input Latency” and “Time To Interactive” measurements are phenomenally tight!

Feedback, suggestions and comments? Let's talk!

Subscribe to my RSS feed