Getting Lighthouse to 💯 with create-react-app in just 3 simple steps

Lighthouse in Lima

This week I started a new project with create-react-app and my plan was to start with a perfect 💯 score in lighthouse.

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:

Step 3: Add content when JavaScript is not available

There are some rare cases where a user has no JavaScript available. In this cases we need to display some content on the page. Ideally the page should give the user the content he is looking for. Or at least a message saying that he needs to enable JavaScript. What I did is just add a “loading” message to the page, which is not replaced by the actual app if JavaScript is disabled.

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.