Using Google Lighthouse to improve your site

After much testing and bug fixing, your website is almost ready to go live. Now, do you wish to have a guiding light on what else can be improved? If so, Google Lighthouse may be the answer.

Google Lighthouse is an open source tool for performing a quality check on your web applications. It generates an audit report (with clear explanations and remediations) for:

• Performance
  This gives an indication of how well the page is performing in terms of loading speed based on various performance metrics. In conjunction with Performance Test which focuses more on server load handling, fixing the issues identified here will improve the overall rendering and end user experience of the site.
• Accessibility
  This means that the content of a site is available and its functionality can be used by anyone, including non-typical users who are experiencing some forms of impairment or disability. The audit items are based on the Web Content Accessibility Guidelines (WCAG) 2.0.
• Best practices
  A list defined to improve the code health of the audited website in general. They include error logging, displaying images in correct aspect ratio, using HTTPS, avoiding deprecated APIs, etc. This list will likely be updated as more best practices items are identified in future releases.
• Search Engine Optimisation (SEO)
  A set of guidelines to help search engines find, index, and rank the website, allowing users to find relevant contents easily and make the website more visible to new users.

Ways to run Lighthouse

There are a few ways to use Lighthouse:

1. Add the Firefox or Chrome extension
2. Run the scan using this Measure website (URL needs to be publicly accessible)
3. Run the scan in Chrome in-built DevTools
4. Run the scan as a node module that allows integration into your CI pipeline

We won’t be going through the first two ways as they’re quite straightforward.

Chrome DevTools

To run Lighthouse in Chrome DevTools:

1. Launch Google Chrome browser (install it if you haven’t done so)
2. Navigate to the URL to be audited
3. Open Chrome DevTools
4. Click on “Lighthouse” tab (or “Audits” tab in older versions)
5. Select the desired options
6. Click on “Generate report”

You should see something like this (this example uses Merlin blog main page on Medium):

If you scroll down, you can view individual opportunity to improve on:

To get more detailed information, you can click on the “Learn more” link to read about the explanation of this audit item as well as the recommended solutions.

Node module

To run Lighthouse as a node module, you need to install Google Chrome for Desktop and the current version of Node as prerequisites. Then, simply run the command below to install Google Lighthouse Node module:

npm install -g lighthouse

After successful installation, run Lighthouse audit as follows:

lighthouse <url>

Upon completion, a HTML report will be generated in the current folder. For more information, you can check out the Node module readme documentation, which includes more options and links to various projects using Lighthouse that you can refer to for CI or other uses.

The audit report may seem daunting and include many items to be fixed, but the provided links give useful and detailed information that can be followed easily. If it is not sufficient, an additional search online based on mentioned keywords usually directs you to the solution. As always, it is important to assess each item for the feasibility of fixing in terms of effort and impact. It often does not make sense to spend tons of effort just to bring a score from 99 to 100.

Integrating into the CI pipeline

To effectively utilise Lighthouse, you may consider integrating it into your project’s CI pipeline to check the audit scores after every commit and prevent regressions. The performance metrics and Lighthouse scores can also be tracked over time to see the progress or what needs to be worked on.

This is the official Google Lighthouse CI repository that you can reference to integrate Lighthouse into your CI pipeline. If web analytics data is available, it would be ideal to run Lighthouse for the top 5 to 10 most viewed pages for your site. Otherwise, it is a good idea to identify critical flows and run for those pages involved. The landing page of the site is also recommended to be included as it is the first page the user will see.

For a start, Lighthouse report can be generated for every build and referenced to identify opportunities for improvement in the categories with lower scores. As more fixes are pushed in, the various Lighthouse categories’ scores should improve and assertions can be added to fail the build below a certain score. There is an in-built recommended preset configuration that can be enabled for easy setup. Individual audit item assertion can also be turned off for items that are yet to be fixed.

For more advanced users, customised assertion can be added for each audit item to fail below a certain metric value. You can even set multiple runs with various aggregation methods for more reliable results. Ultimately, the goal is to optimise it and fail the build whenever an opportunity that is important for your project needs to be fixed.

We hope this quick introduction to Google Lighthouse gives you an idea of what else to improve on for your website. Besides adding more contents and features, it is equally important to ensure the website performs well and serves the needs of the majority of users.

Let’s get going to continuously improve our site!

- Merlin 💛