What It Is & Tips on how to Use It
What Is Google Lighthouse?
Google Lighthouse is a free Google instrument that helps you enhance the standard of webpages in your web site.
The instrument audits your pages for efficiency, accessibility, search engine optimisation, and extra. And affords recommendations so you’ll be able to enhance these facets.
It’s open-source software program—anybody can apply it to any webpage.
Whether or not you’re an online developer, search engine optimisation, or web site proprietor, Google Lighthouse will help you improve your web site’s general expertise and efficiency.
On this put up, we’ll cowl how Google Lighthouse works and the way you need to use it to audit your webpages.
Let’s dive in.
How Does Google Lighthouse Work?
Google Lighthouse works by performing audits for 5 foremost web site optimization classes.
1. Efficiency
On this audit, Lighthouse measures how shortly an internet site masses and the way shortly customers can entry it.
It reviews your efficiency for 5 pace metrics, every measuring some facet of web page pace:
- First Contentful Paint (FCP): Measures the time at which the primary textual content or picture turns into seen to customers
- Largest Contentful Paint (LCP): Calculates the time a web page takes to load its largest factor for customers
- Whole Blocking Time (TBT): Measures the period of time {that a} web page is blocked from reacting to consumer enter, like a mouse click on
- Cumulative Structure Shift (CLS): Measures the format shifts that happen as customers entry a web page
- Velocity Index (SI): Reveals how shortly the content material of a web page is loaded
Lighthouse assigns an general efficiency rating to a web page based mostly on how your web page carried out for all these metrics. The rating may be something from 0 to 100.
In case your rating is between 90 and 100, it signifies that your web page is effectively optimized for consumer expertise.
Something under 90 means a major variety of assets in your web page are slowing issues down, affecting the general web page expertise.
Lighthouse additionally affords recommendations. Which you’ll implement to enhance your efficiency.
2. Accessibility
Lighthouse’s accessibility check analyzes how effectively individuals who use assistive applied sciences can use your web site.
Particularly, it appears at components like buttons and hyperlinks to see whether or not they’re described effectively.
It additionally analyzes photographs to see whether or not alt textual content is specified. So when customers with restricted or no imaginative and prescient use display screen readers, they perceive what the picture is all about.
Much like a efficiency audit report, the accessibility report offers you a rating out of 100. The upper the rating, the higher.
The instrument additionally highlights alternatives to enhance your general accessibility.
3. Finest Practices
The very best practices audit in Lighthouse checks whether or not your web page is constructed on the fashionable requirements of internet improvement.
Lighthouse examines whether or not:
- Sources load from safe servers with HTTPS.
- All photographs seem with the right facet ratio and in applicable decision
- All JavaScript libraries are secure and free from any vulnerabilities.
- Web page has the HTML doctype
- Content material Safety Coverage (CSP) is efficient in opposition to cross-site scripting (XSS) assaults
- Web page is free from all browser errors
- Web page is free from deprecated frameworks and APIs
- Web page has legitimate supply maps
- Web page is free from points showing in Chrome DevTools panel, akin to community request failures, inadequate safety measures, and different browser points
- Web page’s character encoding is ready with the meta charset tag
- Web page permits customers to stick password in password discipline
- Web page creates a great consumer expertise by blocking geolocation and notification permission requests on web page load
All these components resolve your rating out of 100.
The Lighthouse report on greatest practices additionally highlights particular components that require your consideration. Which may enhance your rating.
4. search engine optimisation
Lighthouse runs a check to investigate your webpage for some technical facets of search engine optimisation.
Particularly, it checks whether or not:
- Your webpage is mobile-friendly
- Web page has a legitimate structured knowledge
- Inside hyperlinks are crawlable
- Web page has a legitimate hreflang attribute
- Title and meta description tags are set
- Web page is indexable
- Robots.txt is legitimate
- Web page is returning HTTP 200 (OK) standing response code
- Web page has a legitimate “rel=canonical” tag set
- Web page content material is unbiased of plugins
- Hyperlinks on a web page are launched with descriptive textual content
- Photos on a web page have picture alt texts specified
- Web page has a viewport meta tag with width or initial-scale set
After which assigns a rating out of 100.
It additionally highlights any search engine optimisation points it detected when operating an audit.
However the instrument doesn’t provide you with a full image of your search engine optimisation.
If you would like your web site to rank higher in Google, it’s good to guarantee it’s optimized for all facets of search engine optimisation. Make certain no points are affecting your rankings.
That’s the place instruments from Semrush can come in useful.
For instance, Website Audit checks your web site for over 140 facets of search engine optimisation. Like duplicate content material, redirects, inside hyperlinks, URL construction, and extra.
To make use of the instrument, arrange a venture and run your audit.
As soon as the audit is full, you’ll get a high-level overview of your web site’s search engine optimisation well being.
It’s also possible to see particular points which can be affecting your efficiency. Simply go to the “Points” tab.
For every subject detected, the instrument affords recommendation on easy methods to repair it.
Remedy every subject the instrument detects to your website. So your web site’s search engine optimisation stays in a wholesome state.
5. Progressive Net App (PWA)
The PWA audit in Lighthouse validates whether or not your internet software makes use of trendy internet capabilities to supply an optimum consumer expertise.
It checks whether or not your internet app is:
- Quick and dependable on cellular networks and affords offline performance
- Installable on a number of system varieties and has options like offline performance and push notifications
- PWA-optimized by redirecting HTTP visitors to HTTPS, configuring a customized splash display screen, sizing webpage content material to suit on cellular screens, and implementing all of the other best practices listed by Lighthouse
The check runs your internet app in opposition to these components and assigns one of many PWA badges.
Because of this, in contrast to the primary 4 reviews, you’re assigned a badge (not a rating of 100) if you run a PWA audit in Lighthouse.
Like this:
The audit report will even present recommendations for enhancing your general PWA efficiency. Together with particular points that should be addressed.
Tips on how to Use Google Lighthouse
Now that you already know what Google Lighthouse is and the way it works, let’s take a look at the alternative ways you need to use it to audit your pages.
Utilizing Lighthouse with Chrome DevTools
In your Chrome browser, you’ll be able to run a Google Lighthouse audit with Chrome DevTools.
Open the webpage you wish to audit.
Then right-click anyplace on the web page and choose “Examine.”
The Examine characteristic will open a DevTools panel on the precise facet of the webpage.
Choose “Lighthouse” from the panel’s toolbar. (In the event you can’t discover the Lighthouse choice, click on on the 2 arrows on the finish of the toolbar. You’ll see it there.)
From right here, you’ll be able to choose one, extra, or all classes, relying on which facets of your web site you wish to analyze. And click on “Analyze web page load.”
Then the instrument will generate a report for you. You’ll discover your audit scores for every class on the high.
You may click on on a particular class to be taught extra. On this instance, we clicked “Efficiency” audit.
Notice: You’ll discover Lighthouse measuring your efficiency for six pace metrics (as a substitute of 5) if you run a efficiency audit with DevTools.
That further metric is Time to Interactive (TTI). Which calculates the time it takes for a web page to change into absolutely interactive for customers.
This metric is one of their retired metrics. It’s unclear why it’s nonetheless being accounted for if you run Lighthouse audits in DevTools.
Utilizing Lighthouse with Chrome Extension
Lighthouse has a Chrome extension that may carry out audits for you.
In your Chrome browser, set up the Lighthouse Chrome extension.
Go to the webpage you wish to check.
Then open the Chrome extension menu and choose “Lighthouse.”
Then click on on the cog icon.
You will note settings the place you’ll be able to choose or deselect particular classes based mostly on the reviews you wish to generate.
Then begin the audit by clicking the “Generate report” button.
Lighthouse will generate a report for you in a brand new tab.
Utilizing Lighthouse in PageSpeed Insights
Lighthouse can be out there by means of Google’s PageSpeed Insights instrument.
Open the instrument. Enter your web page URL, and click on “Analyze.”
The instrument will generate reviews for all classes, besides PWA. PageSpeed insights doesn’t carry out PWA audits.
Utilizing Google Lighthouse through Node Module
It’s also possible to use a Node JavaScript module to run Lighthouse audits.
Set up the current Node in your system.
Then run the next command line to put in Lighthouse:
npm set up -g lighthouse
As soon as Lighthouse is put in, use the command line under to generate reviews.
lighthouse <url>
(You must change the “url” with the net tackle of the web page you wish to check.)
FAQs
How Is Lighthouse Totally different from PageSpeed Insights?
Lighthouse is totally different from PageSpeed Insights in that Lighthouse solely makes use of lab knowledge to measure the efficiency of your pages. Whereas PageSpeed insights makes use of each lab and discipline knowledge.
Lab knowledge displays how hypothetical customers might expertise your website. In distinction, discipline knowledge displays how actual customers skilled your web site.
Why Are My Scores Totally different Every Time I Check?
The scores you see in Lighthouse can differ every time you run the check.
Community circumstances, browser extensions that modify community requests, and adverts displayed on the precise web page have an effect on your rating every time you conduct the check.
Do Lighthouse Stories Embrace Core Net Vitals Metrics?
Sure. The efficiency audit in Lighthouse analyzes your web site for the next Core Net Vitals metrics:
