Don't already have an account? Create an account.
By creating an Ordinary Coders account, you agree to Ordinary Coders' Terms and Conditions.
If you already have an account, login instead.
Create an account and receive your first 100 points. Submit an article to earn more and unlock your first project.
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:
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.
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:
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.
3. Click the Lighthouse tab on the Developer Tools. If you do not see it, click the » until the tab appears.
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 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.
How to run the Google Lighthouse Tool extension
To run the Lighthouse audit:
1. Click the "Generate report" button.
2. While waiting for the report to generate, you will see the loading page below.
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:
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.
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.
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.
Clicking on one of the opportunities will display a note on how to complete the suggestion.
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.
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.
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.
Click Learn More next to the description to go to an article explaining exactly what needs to be done to improve the warnings.
Additional items to manually check are things that you need to think through and check for yourself. They cannot be tested automatically.
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.
Expand each of the opportunities, read the description provided, and look at the resources from your site that are failing.
Click on the Learn More link for each opportunity to see an article detailing exactly how to fix the problem.
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.
Click on the Learn More link to go to an article that details the problem and solution.
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
Django Powered Blog for Affiliate Marketing
A Django powered blog and product showcase for affiliate marketing from "Building a Django Web App ...
React Chatbot for Lead Generation
A basic React chatbot component with a pre-built component to handle posting. Built using Lucas ...
Follow us @ordinarycoders
Post a Comment
Join the community
April 25, 2020, 2:43 p.m.
March 19, 2021, 2:30 p.m.
Feb. 18, 2021, 4:44 p.m.
Oct. 13, 2020, 11:35 a.m.
Oct. 6, 2020, 4:21 p.m.
Sept. 3, 2020, 12:19 p.m.