Lighthouse is an open-source tool that allows us to measure web performance with two main components:

A score from 0 to 100 based on your page’s web performance

A report with practical tips on how to improve your page’s performance

I’m going to demonstrate how I got a 100% score on Lighthouse with my React app which was built with Webpack 4.

Before we dive into the topic, let’s briefly talk about why web performance matters. According to Akamai’s 2017 report,

A 0.1 second delay in site loading speed can cause a 7% drop in sales.

If you have an E-commerce business generating $100 per day, then you will lose $7 in sales revenue. That’s the cost of poor web performance. That’s a lot. 💰

With Lighthouse, I’m sure that you can improve your front-end app and provide a better user experience. Are you ready? Let’s jump into the topic!

Things you’ll need:

Install Lighthouse here

An application built with Webpack 4

When I run the Lighthouse audit on my app, I got 0%. But it’s too early to be disappointed. 😀