Google Lighthouse: What It Is & 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, website positioning, and extra. And gives strategies so you may enhance these facets.

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

Whether or not you’re an online developer, website positioning, or web site proprietor, Google Lighthouse may 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 should utilize it to audit your webpages.

Let’s dive in.

How Does Google Lighthouse Work?

Google Lighthouse works by performing audits for 5 important web site optimization classes.

1. Efficiency

On this audit, Lighthouse measures how rapidly a web site hundreds and the way rapidly customers can entry it.

It studies your efficiency for 5 pace metrics, every measuring some side 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 aspect 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
Pace Index (SI): Exhibits how rapidly the content material of a web page is loaded

Lighthouse assigns an general efficiency rating to a web page primarily based on how your web page carried out for all these metrics. The rating might be something from 0 to 100.

In case your rating is between 90 and 100, it signifies that your web page is nicely 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 gives strategies. Which you’ll implement to enhance your efficiency.

2. Accessibility

Lighthouse’s accessibility check analyzes how nicely individuals who use assistive applied sciences can use your web site.

Particularly, it seems to be at components like buttons and hyperlinks to see whether or not they’re described nicely.

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 readers, they perceive what the picture is all about.

Just like a efficiency audit report, the accessibility report provides 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 most effective 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 side ratio and in acceptable decision
All JavaScript libraries are protected 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, resembling 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 area
Web page creates an excellent consumer 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 components that require your consideration. Which may enhance your rating.

4. website positioning

Lighthouse runs a check to investigate your webpage for some technical facets of website positioning.

Particularly, it checks whether or not:

Your webpage is mobile-friendly
Web page has a sound structured knowledge
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 impartial of plugins
Hyperlinks on a web page are launched with descriptive textual content
Pictures 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 website positioning points it detected when working an audit.

However the instrument doesn’t provide you with a full image of your website positioning.

If you’d like your web site to rank higher in Google, you want to guarantee it’s optimized for all facets of website positioning. Be certain that 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 facets of website positioning. 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 website positioning well being.

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

For every situation detected, the instrument gives recommendation on easy methods to repair it.

Clear up every situation the instrument detects in your website. So your web site’s website positioning stays in a wholesome state.

5. Progressive Internet App (PWA)

The PWA audit in Lighthouse validates whether or not your internet software makes use of fashionable internet capabilities to supply an optimum consumer expertise.

It checks whether or not your internet app is:

Quick and dependable on cell networks and gives offline performance
Installable on a number of gadget varieties and has options like offline performance and push notifications
PWA-optimized by redirecting HTTP visitors to HTTPS, configuring a customized splash display, sizing webpage content material to suit on cell screens, and implementing all the opposite greatest practices listed by Lighthouse

The check runs your internet app in opposition to these elements and assigns one of many PWA badges.

(Picture supply: Github)

Which means that, in contrast to the primary 4 studies, you’re assigned a badge (not a rating of 100) if you run a PWA audit in Lighthouse.

Like this:

The audit report may also present strategies for bettering your general PWA efficiency. Together with particular points that must be addressed.

Use Google Lighthouse

Now that you understand what Google Lighthouse is and the way it works, let’s take a look at the other ways you should utilize it to audit your pages.

Utilizing Lighthouse with Chrome DevTools

In your Chrome browser, you may run a Google Lighthouse audit with Chrome DevTools.

Open the webpage you need to audit.

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

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

Choose “Lighthouse” from the panel’s toolbar. (Should 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 may choose one, extra, or all classes, relying on which facets 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 high.

You’ll be able to 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 an alternative of 5) if you run a efficiency audit with DevTools.

That additional metric is Time to Interactive (TTI). Which calculates the time it takes for a web page to develop into totally interactive for customers.

This metric is one in every 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 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 may choose or deselect particular classes primarily based on the studies 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 be obtainable via Google’s PageSpeed Insights instrument.

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

The instrument will generate studies 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 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 studies.

lighthouse

(It is advisable change the “url” with the net handle of the web page you need 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 area knowledge.

Lab knowledge displays how hypothetical customers could expertise your website. In distinction, area 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 fluctuate 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.