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:

page speed metrics
  • 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.

performance metric

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. 

Lighthouse opportunities and diagnostics sections

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.

accessibility report

The instrument additionally highlights alternatives to enhance your general accessibility.

opportunities to improve overall 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.

Lighthouse score out of 100

The Lighthouse report on greatest practices additionally highlights particular components that require your consideration. Which may enhance your rating. 

best practices to improve score

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.

SEO score

It additionally highlights any search engine optimisation points it detected when operating an audit.

SEO issues

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.

Site Audit dashboard

It’s also possible to see particular points which can be affecting your efficiency. Simply go to the “Points” tab.

Issues tab

For every subject detected, the instrument affords recommendation on easy methods to repair it.

why and how to fix it example

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.

PWA badges
(Picture supply: Github)

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:

PWA audit in Lighthouse

The audit report will even present recommendations for enhancing your general PWA efficiency. Together with particular points that should be addressed.

suggestions for improving overall PWA performance

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.”

navigation to inspect tool

The Examine characteristic will open a DevTools panel on the precise facet of the webpage.

DevTools panel

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.)

lighthouse in panel’s toolbar highlighted

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.”

Analyze page load button highlighted

Then the instrument will generate a report for you. You’ll discover your audit scores for every class on the high. 

report with audit scores

You may click on on a particular class to be taught extra. On this instance, we clicked “Efficiency” audit.

Performance audit more details

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.”

Lighthouse in Chrome extension menu

Then click on on the cog icon. 

cog icon highlighted

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.

categories settings

Then begin the audit by clicking the “Generate report” button.

Generate report button highlighted

Lighthouse will generate a report for you in a brand new tab.

Lighthouse report

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.”

PageSpeed Insights tool

The instrument will generate reviews for all classes, besides PWA. PageSpeed insights doesn’t carry out PWA audits.

PageSpeed insights generated report

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.)


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: