How To Use Google Lighthouse Tool

Jan. 29, 2021, 5:55 p.m.
SEO · 8 min read
How To Use Google Lighthouse Tool
Last Modified: Feb. 19, 2021, 4:03 p.m.

Google offers a variety of free, open-source tools. One of which is the Google Lighthouse tool used to test the overall quality of your website. 

This article will cover:

  1. What is Google Lighthouse?
  2. Why is Google Lighthouse important?
  3. What is a good lighthouse score?
  4. What is a bad lighthouse score?
  5. How do you use Google Lighthouse?
    • Performance Score
    • Accessibility Score
    • Best Practices Score
    • SEO Score
  6. Key takeaways

 


 

What is Google Lighthouse?

Google Lighthouse Tool is an open-source tool used to audit the performance, accessibility, best practices, and search engine optimization (SEO) of web pages. 

The automated site monitoring tool was developed to help web developers comply with the best practices and standards created by Google. 

When generating the report, the tool acts like a mobile or desktop user to generate a set of scores ranging from 0-100 for each category.

Google Lighthouse Scores

 


 

What is a bad Lighthouse score?

A bad Lighthouse score is 49 and below. This means there are obvious issues with your website that may impact the user experience on the site. 

 


 

What is a good Lighthouse score?

A Google Google Lighthouse score is anywhere between 50-89.

An excellent lighthouse score is between 90-100.

Ideally, you want to have each category have a score of 90-100, by following the opportunities for improvement outlined in the generated report. 

The higher the scores, the more your site meets the performance, accessibility, best practices, and search engine optimization (SEO) standards outlined by Google.

 


 

Why is Google Lighthouse important?

Google Lighthouse Tools is an important tool because it identifies common problems that can affect your site's quality and suggests how to fix them.

Although initially intended for web developers, the insights provided are company advice for your online store/brand. 

Put simply, if you meet Google's Lighthouse standards, it will make it easier for shoppers and online visitors to navigate and use your site (and ultimately buy your products). 

 


 

How do I use Google Lighthouse Tool?

You do not need to be a web developer or even understand how to code to use the Google Lighthouse Tool. 

There are two ways of accessing Google Lighthouse Tool: 

  1. Use the browser developer tools to access Google Lighthouse
  2. Add the Google Lighthouse extension to your Chrome Browser

First, let's cover how to access the Google Lighthouse tool through the Chrome DevTools.

 


 

Google Lighthouse in Chrome DevTools

Finding Google Lighthouse in the Chrome DevTools

All you need is a Google browser window and to follow the instructions below.

1. Open any website of your choosing.

2. Click on the ⋮ in the top right corner and go to More Tools > Developer Tools.

How to access Chrome DevTools

3. Click the Lighthouse tab on the Developer Tools. If you do not see it, click the » until the tab appears.

Google Lighthouse via the Chrome DevTools

 

 

 

How to run the Google Lighthouse in the Chrome DevTools

There are 5 categories for Google Lighthouse: Performance, Progressive Web App, Best practices, Accessibility, and SEO. 

We will go more in-depth with each category after generating the report, but the Progressive Web App category is not applicable for more websites. 

1. Keep all 5 categories checked.

2. Select which device you want to replicate when running the report.

3. To run the Lighthouse audit, click the "Generate report" button.

Google Lighthouse Categories and Devices

 


 

Google Lighthouse Tool Chrome Extension

Using the Google Lighthouse Chrome extension

If you plan on checking your site's Lighthouse score often, it is worth adding the extension to your Chrome browser. 

Visit the Chrome web store to add the Lighthouse extension.

Once added a Google Lighthouse Icon will appear in your browser extensions to the right of the URL bar. 

Google Chrome Lighthouse extension

 

How to run the Google Lighthouse Tool extension

To run the Lighthouse audit:

1. Click the "Generate report" button.

Google Lighthouse Extension start

 

2. While waiting for the report to generate, you will see the loading page below.

Google Lighthouse generating report

When the report is done generating, you should see a score for each category.

We will go through each of the categories below.  

 


 

Google Lighthouse Performance Score

What is the Google Performance score?

Put simply, the Google Lighthouse Performance Score is how long it takes for the app to show content and become useable. 

The score is a cumulative score that takes into account the following 6 metrics:

  1. First Contentful Paint (FCP): the time it takes for the first image/text to appear
  2. Speed Index (SI): how quickly the contents of the page are populated
  3. Largest Contentful Paint (LCP): the time it takes for the largest text/image to appear
  4. Time to Interactive (TI): the time it takes for the page to be fully interactive
  5. Total Blocking Time: FCP + SI + LCP + TI
  6. Cumulative Layout Shift: movement of visible elements

Performance metrics minimized

Note: The performance score tends to fluctuate based on your internet speed. 

 

Click the expanded text button at the top right of the metrics to view the expanded text.

Then click on Learn More link next to the metric. 

Google performance expanded text

 

The Learn More link takes you to an article detailing the metric. While informative, it does not give many insights on how to improve the metric. 

Google FPC score

 

How do I improve my Google Performance score?

Google suggests it's better to focus on improving the overall Performance score rather than the individual metrics. 

The opportunities section of the report is where you can view actionable opportunities for score improvements. 

Google Performance opportunities

 

Clicking on one of the opportunities will display a note on how to complete the suggestion.

It also details the exact JavaScript, images, CSS, line of code, or URLs on the website that need improvement.

Google Performance Opportunities

Then click Learn More next to the opportunity description.

 

You will be brought to an article explaining the exact flagging process and how to fix the issue.

These linked resources are arguably the most important feature of Google Lighthouse as they explain the exact problem and its accompanying solution. 

Google eliminate render-blocking article

You will want to repeat this process of clicking on the Learn More link next to each opportunity description to help improve your overall performance score. 

 


 

Google Lighthouse Accessibility

What is the Google Accessibility score?

Accessibility is whether the page is usable by people with disabilities or impairments.

Automation is limited when it comes to testing and detecting accessibility issues, so it is important to complete the manual tests provided. 

But opportunities are where you would want to focus most of your attention. 

Google Lighthouse Accessibility

 

How do I improve my Google Accessibility score?

Expand one of the opportunities listed and you will see the exact lines of code on your site that need improvement. 

Google Lighthouse Accessibility opportunities

 

Click Learn More next to the description to go to an article explaining exactly what needs to be done to improve the warnings. 

Google Lighthouse Accessibility Article

 

Additional items to manually check are things that you need to think through and check for yourself. They cannot be tested automatically.

Manually Check accessibility for Google Lighthouse

 

The last two sections list your Passed Audits as well as non-applicable audits. 

 


 

Google Lighthouse Best Practices

What is the Google Lighthouse Best Practices score?

Best Practices measures if the page follows best practices for modern web development.

The score does not provide exact metrics, only a list of opportunities for improvement, passed audits, and non-applicable audits. 

 

How do I improve my Google Lighthouse Best Practices score?

Focus on the audits that you did not pass to improve your score.

Google Lighthouse Best Practices

 

Expand each of the opportunities, read the description provided, and look at the resources from your site that are failing. 

Google Lighthouse Best Practices opportunities expanded

 

Click on the Learn More link for each opportunity to see an article detailing exactly how to fix the problem. 

Google Best practices article

 

The remaining sections under Best Practices are your Passed audits and Not applicable audits. 

 


 

Google Lighthouse SEO Check

What is the Google Lighthouse SEO score?

The Search Engine Optimization (SEO) score is how well the page is optimized for search engine rankings.  

 

How do I improve my Google Lighthouse SEO score?

Go to each of the opportunities listed below and expand the warning. 

Google Lighthouse SEO

 

Click on the Learn More link to go to an article that details the problem and solution. 

Google Lighthouse SEO article

 

There are also Additional items, Passed audits, and Not applicable sections to check under the Google Lighthouse SEO section. 

 


 

Key takeaways of using Google Lighthouse Tool

  1. Google Lighthouse is not just for web developers, it is for anyone looking to improve their overall website's performance
  2. You do not need coding experience to generate the Google Lighthouse Report
  3. But you will need access to the website's code to make some of the necessary corrections
  4. Improve on the exact opportunities provided in each category to increase that category's score 
  5. Be sure to click Learn More next to each opportunity description to get an article on exactly how to fix the issue
  6. Try to get each category score as close to the 90-100 range as possible to better guarantee that users have good interactions with your site (and hopefully by whatever you're selling)





Post a Comment
Join the community

0 Comments