Web Design Background

Mastering Google Lighthouse: Optimising Your Site Like a Pro

  • 12 min read
  • November 3, 2023
Mastering Google Lighthouse: Optimising Your Site Like a Pro

In this demanding digital age, expectations are high when it comes to the online offering of businesses. And, quite frankly, if a website isn’t up to speed and performing optimally, a user isn’t going to waste time trying to make it work. They will simply close the window, and try a competitor business. So, how does one improve the quality of their webpages and ensure it isn’t falling at the first hurdle? One way is Google Lighthouse.

In this article, we’ll be shining a light on Google Lighthouse, its uses, its benefits and how to properly utilise it.

What is Google Lighthouse?

Google Lighthouse is a Google Chrome extension that audits your site’s pages, and can analyse both desktop and mobile versions of a page too. 

It considers several factors including performance, SEO and accessibility, and also offers the ability to test progressive web apps for compliance with standards and best practices. It then offers suggestions on how to improve these aspects. 

When an audit takes place, Google Lighthouse loads the target website several times and gathers insightful information. It then provides categories of feedback, scoring each out of 100, 100 being the highest and most desired score. These categories are:

  • Performance: The Google Lighthouse Chrome extension assesses how quickly your site loads and how fast key elements of the page become available to a user. 
  • SEO: Google Lighthouse assesses SEO basics like your meta titles and headings. It can help give your business an idea of how it may be performing against competitors in search engines, including Google itself. 
  • Accessibility: This score is a weighted average of about 35 accessibility traits. These include things like sufficient colour contrast ratios and whether your images are properly alt text described. These are essential for users utilising screen readers when accessing your site. 
  • Best Practices: Google Lighthouse checks for use of current web development best practices, like “https” usage – meaning a site is secure and encrypted – and the use of insecure or deprecated features.

Why Google Lighthouse Scores Matter

Google Lighthouse highlights to website owners and developers how well a website is performing. Nowadays, when most potential customers and clients will visit a website before making a business enquiry or store visit, website performance can be incredibly impactful. 

If a website is slow, difficult to navigate or inaccessible, a user will just close the window and explore a competitor’s online offering instead. If the Search Engine Optimisation (SEO) is poor, your site won’t rank well on Google and thus be harder to find. This can heavily affect your conversion rates. 

You want each of your Google Lighthouse category scores between 90 and 100 as this indicates that your site is user-friendly, optimised and running exactly as it should. Any category that scores under 90 means that this is an area of your website that you can improve. Making improvements will help bolster the user experience and also help increase conversions. 

Understanding the Google Lighthouse Metrics

In a Google Lighthouse report, there are multiple categories it assesses. These include Performance, Accessibility, SEO, and Best Practice metrics.

Performance Metrics

The Google Lighthouse Chrome extension will measure how quickly a website loads and how quickly users can use it. The Lighthouse report analyses and presents five page speed metrics:

  • Speed Index (SI): The SI shows how quickly the content of a page loads.
  • First Contentful Paint (FCP): The FCP measures the time at which the first text or image becomes visible to users.
  • Largest Contentful Paint (LCP): The LCP calculates the time a page takes to load its largest element for users.
  • Total Blocking Time (TBT): TBT measures the amount of time that a page is blocked from reacting to user input (e.g. mouse clicking).
  • Cumulative Layout Shift (CLS): The CLS measures the layout shifts that occur as users access and move through a page.

Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS) are the Core Web Vitals for improving web page speed. 

Google Lighthouse also assigns an overall performance score to the page you’ve audited which can be anything between 0 and 100, 100 being the best score outcome. As touched on above, if your Google Lighthouse speed test scores between 90 and 100, then your page is working optimally for your users. Anything below 90 means that your page is not working as well as it could be, and Google Lighthouse will offer suggestions on how to improve your score.

Accessibility Metrics

Google Lighthouse Accessibility Scores by KIJO

The Google Lighthouse report analyses accessibility by assessing how well users that utilise assistive technologies (like screen readers) experience your site. It considers elements such as buttons and links and assesses whether they’re described and labelled clearly. Google Lighthouse checks to see if any images used are appropriately equipped with alt text too. This means a user can read a description of the image if required. 

The accessibility report is also scored out of 100, 100 being the highest and the target score. If your site needs improvement, Google Lighthouse will make suggestions of where those improvements could take place.

Accessibility is worth making a priority on your site. Not only does it prove that you’re a considerate, thoughtful and inclusive business which is important to many consumers, but in many situations, web accessibility can be a legal requirement. In the UK, the Equality Act (2010) states that websites should be accessible to all users. Service providers should “take positive steps to ensure that disabled people can access services” and “anticipate the needs of potential disabled customers for reasonable adjustments.

Best Practice Metrics

Google Lighthouse Scores for Best Practices by KIJO

Google Lighthouse’s best practices audit checks whether your page is built on the modern standards of web development. It will ask the following questions of your site:

  • Does every image appear with the correct aspect ratio and in appropriate resolution?
  • Do resources load from secure servers with “https”?
  • Are the site’s JavaScript libraries safe and free from any vulnerabilities?
  • Does the page have the HTML doctype?
  • Is the Content Security Policy (CSP) effective against cross-site scripting (XSS) attacks?
  • Is the page browser-error free?
  • Does the page have valid source maps?
  • Is the page free from Application Programming Interfaces (APIs) and deprecated frameworks?
  • Is the page’s character encoding set with the meta charset tag?
  • Does the page allow users to paste their password into the password field?
  • Does the page host a good user experience (UX) by blocking geolocation and does it have a notification permission request on loading?
  • Is the page free from issues appearing in Chrome’s DevTools panel, like insufficient security measures, network request failures, and other browser issues?

All these factors decide your score out of 100. This section of the Lighthouse report on best practices also highlights specific elements that require your attention which can help improve your score.

Search Engine Optimisation (SEO) Metrics

Google Lighthouse Scores for SEO by KIJO

Google Lighthouse tests your page in regards to some technical aspects of SEO. This includes:

  • Whether your page is indexable (Can the site be indexed by search engines?)
  • Whether Robots.txt is valid (this prevents a website from being overloaded with site requests)
  • Whether the page is mobile-friendly
  • Checking to see if the page content is independent of software additions (or PlugIns)
  • Seeing if the page has valid structured data
  • Whether internal links are “crawlable” (search engine discoverable)
  • Checking to see if the page has a valid hreflang attribute (this helps determine which language the content is written in and the geographical target of your page)
  • Whether the page has a viewport meta tag with width or initial-scale set (meaning images are sized correctly on all devices)
  • Whether title and meta description tags are set
  • Checking to see that the page is returning a HTTP 200 (OK) status response code
  • Seeing if the page has a valid “rel=canonical’ tag or a “canonical element” set. This tells search engines that a specific URL represents the master copy of a page – duplicate copy can be problematic for your SEO without this tag. 
  • If links on the page are introduced with descriptive text
  • Whether images on a page have specified image alt texts

The Google Lighthouse report will detect any SEO issues and advise accordingly.

How to Use Google Lighthouse

Google Lighthouse with Google Chrome Extension

The Google Lighthouse Chrome Extension is arguably very simple to use. Simply download the Lighthouse Chrome Extension when on your browser. Once installation is complete, visit the desired test page. 

Open the Chrome extension menu and select “Lighthouse”, then click on the cog icon. Category options will appear. Select which type of report you’d like to get and whether you’d like to test the mobile or desktop version.

Select “Generate Report”. A new tab will appear with your Google Lighthouse report.

Google Lighthouse with Google Chrome DevTools

With Chrome DevTools, you can simply right click on the web page you’d like to audit and select “inspect”. This feature will open a DevTools panel on the right hand side of the page. 

Next, select “Lighthouse” from the panel’s toolbar. If the toolbar is quite short, click on the double arrow icon to find this option. From here, choose which options of what report you’d like to take place and whether you’d like the mobile or desktop version assessed. Then, click “analyse page load.”

The tool will generate a report for you and you can click on specific categories to learn more.

Why is my Google Lighthouse Score is Different Each Time I Test?

A Google Lighthouse score can vary each time a test is run. That’s because different things can contribute to the test score every time. This includes which ads are being displayed on the page (different ads load at different speeds), the conditions of your network, and the browser extensions that modify network requests.

Google Lighthouse PWA Score by KIJO

Interpreting & Analysing Google Lighthouse Results

When your results page is visible, the Google Lighthouse report will list recommendations to help you improve your website. Remember, these are recommendations and aren’t always essential or applicable.

Not all of the Google Lighthouse recommendations will be relevant to your business, may present technical limitations and can also require more expert involvement in order to avoid damaging your site in another way. It is also arguable that, in some cases, Google Lighthouse can be overly optimistic. 

For example, if your page is loading slowly, Google Lighthouse often recommends compressing your images into a WebP format, but this may not be the most efficient or right answer for your site. 

Lighthouse also tends to recommend limiting the impact of third-party code, but if you’ve used third-party code, it’s likely you will not have control over it. Therefore, a better option would be to prioritise the third-party code rather than change it, as some scripts may be essential for your site to run well, if at all. 

If you’re not tech-savvy or in any way hesitant about implementing Google Lighthouse suggestions yourself but are keen to improve your site, you should consult with and instruct a web performance expert, like those at KIJO. Otherwise, you risk implementing a significantly poorer user experience if not actioned correctly.

At KIJO, our KIJO Optimise servicer offers a professional, in-depth audit of your site. We leverage Google Lighthouse but also delve into your website’s health, assess content quality, analyse your competitors and uncover things like backlink opportunities. We will then develop a comprehensive roadmap pinpointing the most impactful optimisation tasks, and then action them for you. 
You can enquire about KIJO Optimise here.

Real-World Improvement Using Google Lighthouse

Here at KIJO, we utilise Google Lighthouse to help us analyse and efficiently collate optimisation suggestions for our clients. Then, we implement them in order to make a significant, positive difference to not only their Lighthouse report score, but their site as a whole. 

When we worked with The Chelsea Psychology Clinic, their original website’s Google Lighthouse score was considerably lower than a site should be. This meant their user experience wasn’t up to par, and the business was most likely losing users to competitor sites. With the help of Google Lighthouse, we identified key improvement areas that needed to be actioned, namely speed and SEO. 

One of the areas we discovered was lacking was the original site’s use of target SEO keywords – or lack thereof. This low use of keywords was negatively impacting their SEO score, and thus site visibility. We bolstered their copy with strategically placed, ranking keywords and upped their usage by 68%. When we ran the Google Lighthouse audit again, our implementations saw scores across the board between 90 and 100 – the ideal range you want to have a website reporting in. 

The SEO score? This leapt all the way to 100.

Google Lighthouse Scores

Harnessing the Power of Google Lighthouse

Google Lighthouse is an insightful and handy tool that can help you understand how your website is performing. As we’ve established, in this exacting media age, a high-performance website is crucial for business success. 

Look to Google Lighthouse for comprehension, guidance, and confidence that your site is doing exactly what it should be doing. If you think the KIJO team can help you develop, optimise and better understand your website, contact us today.

What is a design system? by KIJO

What is a Design System? Learn What Design Systems Are & Why They’re Important

Sorry, your browser does not support inline SVG.