How To Use Lighthouse to Improve Website Speed

Recently we helped one of our eCommerce clients significantly improve their site speed and performance. One of the main tools we used to achieve our shared success was Google Lighthouse.

In this article, I’ll break down how to use Google Lighthouse to improve your website speed. Let’s start with the basics.

What is Google Lighthouse?

According to Google, Lighthouse “is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

“You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.”

In other words, it’s a free testing tool to help your website perform more efficiently, while giving visitors a better user experience.

How to use Google Lighthouse

The easiest way to use Lighthouse is by installing it to your Google Chrome browser. (Here is a link to the Chrome extension.)

Once the extension is installed, go to the website you’d like to test and click the Lighthouse icon in your toolbar. Click “Generate report” to kickstart Google’s audit of your website.

A new tab will open and you’ll receive a score from 0 – 100. On this same page, Google will provide a breakdown of its recommendations for improving your website’s performance.

Google Lighthouse case study

As I mentioned before, we recently used Lighthouse to significantly improve the website performance for one of our eCommerce clients. Here are the details.

What was the scope of the project?

The scope of the project was to bring the Desktop Lighthouse ratings to ~80 for desktop for ~70 for Mobile. At the time of our test, the client’s scores were more like 33 for desktop and 19 for mobile.

How was the website before? 

1. We had a lot of scripts that were loading in priority and were blocking in Nature. 

2. Our images were neither optimized nor lazy-loaded. 

3. Our GTM script was competing with our site scripts which caused our Time to Interactive Shoot up.

4. Our backend was processing few queries in the backend synchronously on certain important landing pages, causing our total blocking time to shoot up. 

5. All Our components were Hydrating irrespective of the fact that they were in the viewport or not so our Time to interactive went up as hydrating is a CPU-intensive task. 

6. Our SVGs were not inlined and we were doing a lot of requests to fetch these icons.

7. Certain scripts like Yotpo/Klaviyo were loading on all pages, which was not needed, they only needed to be loaded on pages where we were using the functionality. 

8. There was a lot of unwanted code from VWO tests. 

9. Scripts like Bugherd were loading in production as well. 

10. Images used to jump on loading as there was no container for them. 

Our strategy based on Google Lighthouse

We used Lighthouse to carefully identify low-hanging low-hanging fruit that would give us quick results. We used this as momentum to then tackle some of the harder tasks. The basic cleanup of our scripts got us cross 50 on the lighthouse ranking for desktop. 

We found it most advantageous to maintain the codebase rather than perform one-time fixes. We went with a series of checks and balances for our code review process as well as made sure to write performant code. (Always give async=true to scripts.)

What we did

Here were the actual steps we took to optimize our client’s website.

1. Carefully looked at our image calls and realized that they took a significant time to connect to Prismic. It was pertinent to proxy calls from our servers instead of Prismic. We wrote a quick lambda function to proxy requests to Prismic via our servers. 

2. Optimized our images (using progressive images), and made sure we were lazy loading our images and early loading all critical images (in the first fold).

3. Made sure our container doesn’t shift even when we are loading images. This helped us improve our content layout shift. It’s actually 0. Loading images of the right aspect ratio was really important. 

4. Made sure we prioritized our scripts before the tracking scripts by making sure they load later. We have the arrangement to check performance with or without loading the script. Comes in really handy for performance testing.

5. In Server Side Rendered Applications, Hydration is a CPU-intensive task. So the plan was to only hydrate what we need. So like Lazy loading we were lazy hydrating, we used a library for this.  

All this shows in our site performance. 

Conclusion: how to use Google Lighthouse

Lighthouse was instrumental for testing and optimizing this website. It’s a simple-to-use Chrome extension that offers actionable information about how to improve your website. Before you launch your next site, make sure to perform an audit to bring your website up to Google’s standards, so that you give visitors the best experience while shopping and browsing online.

Looking for other ways to improve your website performance? Read our recent article: 7 Techniques to Improve Your eCommerce Site Speed.