How to Use Google Chrome Lighthouse for Better Web Performance

This blog will ultimately teach you how to use your Google Chrome Lighthouse report to improve your own project’s performance! I will share my top tips, tools and tricks (for developers and technical wizards) on how to keep your pages light and fast. Something we all know to be crucial in a world where most of us are browsing on mobile devices.

What is Lighthouse?

Google describes Lighthouse as an 'open-source, automated tool for improving the quality of web pages'. In other words, Lighthouse will check your website for improvements in performance, SEO, accessibility, and best practices. The tool will give you a score that is an excellent indicator of how to improve your page and why it's important to do so.

This must-have tool, created by Google, is available to run from our most famous internet browser, Google Chrome (available in Chrome DevTools). For those who don't use Chrome, don't worry. Lighthouse is also available as an extension on other browsers, as a web tool or as an npm module.

How to get your performance audit.

You may already have your way to generate a lighthouse report. I’m going in via the built-in Chrome DevTools option from the Chrome browser.

Once the audit is complete, you'll see a page like the one below.

What does this report tell me?

A website performance audit covers various examined aspects of the website's work. The good news is that you can leverage your score on all six elements of this performance report using specific tools and tips to increase your overall score.
All of these elements have different weights when counting final scores for the audit. The table below shows the particular weight for each audit.

If you want to maximise your score, there is an excellent tool at the ready. The Lighthouse Scoring Calculator can determine the metrics you need to hit to reach a particular score. So, if your goal is to reach 99, this app will tell you how fast specific aspects will need to load or work to achieve this.

I recommend reading Critical Rendering Path (fundamental knowledge for front-end developers and a hot topic in job interviews) with a combination of other resources from sites like WebDev to understand better how to initially read your Lighthouse performance report. But I won't dive too deep into how to read them in this blog; let's get into the tools and tips on how to make improvements. 

Styles

It’s important to keep your CSS clean and light (especially if we use any 3rd party libraries or frameworks like Bootstrap or Tailwind). First, Contentful Paint is one of the most critical metrics in the performance audit. It marks the first point in the page load timeline where the user can see anything on the screen, so it's worth avoiding heavy animations here and considering inline styles for this part of the page. 

There are three excellent tools that will jazz up our stylesheets:

- Stylelint - I always recommend using liners everywhere possible. For styles, for JavaScript, and for Git commits. They will help you to keep your code clean and free of bugs and typos.

- PurgeCSS - This is another tool that does great work. It’s super helpful when you use Bootstrap, Tailwind, or any other library for your projects. PurgeCSS automatically removes all unused CSS classes from your CSS codebase (and sometimes works miracles with the final bundle size).

- CSS Nano - This will optimise and compress your CSS to ensure that the final result is as small as possible for a production environment

Images

I believe that oversized images are the most common issue in Lighthouse Performance reports. Here are some key things you should always remember:

- Try to always serve your images in the actual size they are rendered on the page.

-Try to avoid scaling them in CSS. You could waste a lot of loading time when you load large photos for tiny avatar pics, etc.

- Use proper file types. If possible, use modern web formats, such as web.

- Use CDN (Content Delivery Network) to serve your images and static files where possible.

- Webpack with url-loader allows you to inject images directly into markup as base64 strings. You can set a file size limit behind which it will work. You can save a lot of time by decreasing the number of requests to the server, so it’s well worth using it

Fonts

Custom web fonts kill performance. I could stop here, but I know it’s hard to avoid using custom fonts as most websites nowadays use them. To save some time, you can use web fonts from the same origin as the website itself to eliminate the TLS negotiation time. It’s worth mentioning about FOIT (Flash of Invisible Text). This is when a browser renders invisible text until the font loads! It's a good idea to get your text rendering under control with the front-display CSS property.

JavaScript

This may be at the end of the list, but that doesn’t make it less important! JavaScript is actually one of the most important elements to take care of in terms of modern web performance. I will give you a few key tips:

- If you can, split your code into smaller chunks and load on the current page only those that are required. Code splitting is one of the most compelling features of Webpack, and if it’s used correctly, it can have a major impact on load time.

- Compression - If you use Webpack, you don’t need to worry too much about compression as Webpack automatically minimises the bundled JavaScript code for production.

- Remove Render-Blocking JavaScript. You can use the defer attribute on your script tags to achieve this. The defer attribute tells the browser not to wait for the script, and the script just loads “in the background”.

- Use Web Workers when you need to execute code that needs a lot of execution time. Web Workers allow script operation in a background thread separate from the main execution thread of a web application, and you can avoid blocking the user interface thread this way.

Thanks for reading!

I hope that you found something valuable here. Good luck with optimising your apps. And remember, Lighthouse is a super useful tool, but it doesn’t mean that you have to fight for every single point in your audit score.