Getting Lighthouse to 💯 with create-react-app in just 3 simple steps
Lighthouse creates audits for performance, accessibility, progressive web apps, and more.
Create-react-app makes creating react apps a breeze. So let’s see how much we score with an app created with it:
Step 1: HTTP -> HTTPS Redirect
The first step is actually not create-react-app related. Lighthouse expects http traffic to be redirected to https:
After setting up the redirect the score is already better:
Step 2: Add a serviceworker and a manifest.json
To get closer towards 💯, our app has to be able to handle offline and flaky/slow connections. Time to set up a serviceworker to cache the application. I use the sw-precache module to generate the serviceworker for create-react-app. The easiest way to do it is to apply the changes Jeffrey Posnick made in this commit.
This already gives us a 88 score:
This gives us the last 12 points and a perfect 💯.
A good starting point
So we have a perfect score on lighthouse. This doesn’t mean the page is perfect but it gives us a good starting point. I think it’s easier to start with a perfect score than to work towards a 💯 in an existing app. We can now develop our app, continuously run lighthouse and keep the score at 100.