Improving website performance with Google Lighthouse

If you are trying to improve the performance of your website, one of the first tools that should come to mind to do so is Google Lighthouse. 

Lighthouse is an open-source tool provided by Google which audits your website and scores it in five categories;

• Performance
• Accessibility
• Best Practices
• SEO
• PWA

The output will be individual scores on each of the categories and a report with recommendations. You can run tests for mobile and for desktop.

There are a few ways of running this audit, the easiest being directly in the browser, you can also use the PageSpeed Insights website (https://pagespeed.web.dev/) or set this up to run in the command line or as a Node module.

Run test in Google Chrome browser

1. Open your website in Google Chrome
2. Press F12 to open the Developer Tools
3. In the Developer Tools menu bar find "Lighthouse"
4. Leave the default test mode, select mobile or desktop and change categories as you see fit before you hit "Analyze page load".

Below you can see the results of the Google Chrome Lighthouse audit of ThisCouldBeUseful.com.

Run test through PageSpeed website

1. Navigate to https://pagespeed.web.dev/
2. Enter your website url
3. Click Analyze.

Below you can see the results of the Google Chrome Lighthouse audit of ThisCouldBeUseful.com

When you look at the report you'll see some metrics displayed. For performance those are:

• First Contentful Paint (FCP) - First Contentful Paint marks the time at which the first text or image is painted.
• Speed Index - Speed Index shows how quickly the contents of a page are visibly populated.
• Largest Contentful Paint (LCP) - Largest Contentful Paint marks the time at which the largest text or image is painted.
• Time to Interact - Time to interactive is the amount of time it takes for the page to become fully interactive.
• Total Blocking Time (TBT) - Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
• Cumulative Layout Shift (CLS) - Cumulative Layout Shift measures the movement of visible elements within the viewport.

More information on these metrics (and additional ones) can be found here: 

https://developer.chrome.com/docs/lighthouse/performance/#metrics. 

Focusing specifically on the performance part of the audit, Lighthouse will offer you opportunities to improve, diagnostics and passed audits. Mainly the opportunities and diagnostics should be of interest. They will contain recommendations such as Eliminating render-blocking resources, reducing unused JavaScript and Serve images in next-gen formats. 

Each of these opportunites will have a description and a link to more information on the recommendation. There will also be a list of impacted resources, a url and if relevant, potential savings.

In the case above an image is uploaded as a PNG whereas Lighthouse recommends using WebP instead. The logical solution would be to convert the image and upload it again.

Pick your battles

With the many recommendations listed, it's important that you pick your battles. Depending on the time you have available to work on performance and how your website has been set up, some of these recommendation might be very hard or nearly impossible to implement. 

You will need to pick your battles as to which changes you are willing and able to make and how much time to invest in them based on how they will impact your score.

To help make these decisions, Lighthouse shows the Scoring Calculator to show you the weighting of the different metrics. More importantly, it also gives you an idea of how much an improvement to a metric impacts the score. You can play around with the toggles to figure out where to best invest your efforts.

Right underneath the Performance score, there is a link to see the calculator.

The calculator shows the metrics, their weighting and your metric score.

As much as I love Google Lighthouse

There are some things that you need to keep in consideration when using this wonderful tool. 

• Not all recommendation make sense or can be implemented
• For example: if you use Google ReCaptcha you will get quite some additional recommendations, however you would not be able to resolve them as they would need to be resolved by the third-party provider which is Google (oh, the irony).
• Complement your investigation with other tools
• To get a hollistic view, use other tools (such as Webpagetest.org) and your common sense.
• Check both Mobile and Desktop
• Mobile and Desktop scores can be very different, so make sure to check them both and make changes accordingly.
• Be realistic
• Trying to get perfect scores might be possible for small, static sites but is almost impossible for bigger sites, especially those created through CMS. Pick your battles and use the Scoring Calculator to figure out which changes will have the biggest impact on your score.
• Check on mulitple pages
• As Lighthouse only checks one page at a time which will typically be your homepage. Running the scan on other pages as well to give you more insights.
• The first page is typically the slowest
• Lighthouse runs the first view of the page only, meaning all pre-rendering is included in the audit. The homepage might be the slowest page on the site if you are doing a lot of pre-rendering. If your homepage is a bit slower but the next views are superfast, you will get penalized anyway.
• Audits are not always consistent
• There are a few things known to influence a Google Lighthouse run (not an exhaustive list so feel free to comment if you know more), such as browser extensions, whether you stay on the page or not while the scan runs, performance and traffic on the device, antivirus software etc. Because of this, Lighthouse is not the right tool to run consistent reports, unless you can set it up in a consistent environment, e.g. not a users's laptop. 

With that being said, as long as you keep this in mind, I believe Lighthouse is a great tool to optimize your website, not only for performance but also for SEO, accessibility, best practices and even PWA. Although Google never confirmed that high scores would improve your ranking, the tool does focus on some of the known areas for good ranking such as SEO and performance so it definitely won't hurt and it does give you some guidelines in the wonderfully mysterious world of "how to get the algorithm to rank me higher".

Could be useful, right?