What It Is & Find out 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, web optimization, and extra. And presents recommendations so you’ll be able to enhance these features.

It’s open-source software program—anybody can apply it to any webpage.

Whether or not you’re an online developer, web optimization, or web site proprietor, Google Lighthouse may help you improve your web site’s total expertise and efficiency.

On this submit, 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 essential web site optimization classes.

1. Efficiency

On this audit, Lighthouse measures how rapidly an internet site masses and the way rapidly customers can entry it.

It experiences your efficiency for 5 velocity metrics, every measuring some facet of web page velocity:

• 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 person 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): Exhibits how rapidly the content material of a web page is loaded

Lighthouse assigns an total efficiency rating to a web page primarily based 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 person expertise.

Something under 90 means a big variety of assets in your web page are slowing issues down, affecting the general web page expertise.

Lighthouse additionally presents 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 parts 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.

Just 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 total accessibility.

3. Greatest Practices

The very best practices audit in Lighthouse checks whether or not your web page is constructed on the trendy requirements of net improvement.

Lighthouse examines whether or not:

• Assets load from safe servers with HTTPS.
• All photographs seem with the proper 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 towards 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, similar to community request failures, inadequate safety measures, and different browser points
• Web page’s character encoding is about with the meta charset tag
• Web page permits customers to stick password in password area
• Web page creates an excellent person expertise by blocking geolocation and notification permission requests on web page load

All these elements determine your rating out of 100.

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

4. web optimization

Lighthouse runs a check to investigate your webpage for some technical features of web optimization. 

Particularly, it checks whether or not:

• Your webpage is mobile-friendly
• Web page has a sound structured information
• Inner hyperlinks are crawlable
• Web page has a sound 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 sound “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 web optimization points it detected when working an audit.

However the instrument doesn’t offer you a full image of your web optimization.

If you’d like your web site to rank higher in Google, you want to guarantee it’s optimized for all features of web optimization. Ensure no points are affecting your rankings.

That’s the place instruments from Semrush can turn out to be useful.

For instance, Web site Audit checks your web site for over 140 features of web optimization. Like duplicate content material, redirects, inner hyperlinks, URL construction, and extra.

To make use of the instrument, arrange a mission and run your audit.

As soon as the audit is full, you’ll get a high-level overview of your web site’s web optimization well being.

You can even see particular points which can be affecting your efficiency. Simply go to the “Points” tab.

For every subject detected, the instrument presents recommendation on how you can repair it.

Resolve every subject the instrument detects to your web site. So your web site’s web optimization stays in a wholesome state.

5. Progressive Net App (PWA)

The PWA audit in Lighthouse validates whether or not your net utility makes use of fashionable net capabilities to offer an optimum person expertise.

It checks whether or not your net app is:

• Quick and dependable on cellular networks and presents offline performance
• Installable on a number of gadget sorts 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 the opposite greatest practices listed by Lighthouse

The check runs your net app towards these elements and assigns one of many PWA badges.

Which means, not like the primary 4 experiences, you’re assigned a badge (not a rating of 100) while you run a PWA audit in Lighthouse.

Like this:

The audit report may even present recommendations for enhancing your total PWA efficiency. Together with particular points that have to be addressed.

Find out 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 need to audit.

Then right-click anyplace on the web page and choose “Examine.”

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

Choose “Lighthouse” from the panel’s toolbar. (In case you can’t discover the Lighthouse possibility, 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 features of your web site you need 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 prime. 

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

Be aware: You’ll discover Lighthouse measuring your efficiency for six velocity metrics (as a substitute of 5) while 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 develop into absolutely interactive for customers.

This metric is considered one of their retired metrics. It’s unclear why it’s nonetheless being accounted for while 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 need to check.

Then open the Chrome extension menu and choose “Lighthouse.”

Then click on on the cog icon. 

You will notice settings the place you’ll be able to choose or deselect particular classes primarily based on the experiences you need 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 also be obtainable by means of Google’s PageSpeed Insights instrument.

Open the instrument. Enter your web page URL, and click on “Analyze.”

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

Utilizing Google Lighthouse through Node Module

You can even use a Node JavaScript module to run Lighthouse audits.

Set up the present 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 experiences.

lighthouse <url>

(It’s essential to exchange the “url” with the online tackle of the web page you need to check.)

FAQs

How Is Lighthouse Totally different from PageSpeed Insights?

Lighthouse is completely different from PageSpeed Insights in that Lighthouse solely makes use of lab information to measure the efficiency of your pages. Whereas PageSpeed insights makes use of each lab and area information.

Lab information displays how hypothetical customers might expertise your web site. In distinction, area information 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 situations, browser extensions that modify community requests, and advertisements 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: