Google Lighthouse How do you use it?

Perhaps you are here because you love performance metrics. Maybe you don’t even know what Lighthouse means and are afraid to ask.

Both are excellent options. Welcome!

We want to help you move from trying to “make all the numbers green” to identifying clear, meaningful actions.

Rachel Anderson, a Google Data Studio nerd and technical SEO expert, joined me on this adventure to demystify developer documentation.

The following is what we’re going to do:

• What’s a Lighthouse?
• What is Lighthouse different than Core Web Vitals?
• Why does Lighthouse not match Search Console/Crux reports with Lighthouse?
• How does the Performance Score be calculated?
• Why does my score change each time I take a test?
• Lighthouse Performance metrics explained
• Lighthouse – How to measure performance

What Is Google Lighthouse and

Performance refers to how fast a browser can build a webpage.

Lighthouse uses Chromium, a web browser that allows you to create pages. It also runs tests on pages as they are made. It is open-source, meaning that the community can maintain it and ).

Every audit falls under one of the five categories:

1. Performance.
2. Accessibility.
3. Best Practices.
4. SEO.
5. Progressive Web App.

In this article, the name Lighthouse will refer to the series of tests performed by the shared GitHub repository, regardless of execution method.

Version 9 can be found on GitHub. It is slated to roll out in large numbers with stable Chrome 98 in February 2022.

Google Lighthouse and Web Core Vitals

The Chromium project, backed by Google, announced three metrics that would be used to measure the performance of the open-source browser.

These metrics, also known as Web Vitals, are part of a Google initiative to provide unified guidance on quality signals.

These metrics are designed to measure web performance using a user-centric approach.

Lighthouse v6 was released within two weeks with a modified Web Core Vitals version at the update’s core.

July 2020: Lighthouse v6’s unified metrics across all Google products by Chrome 84.

The Chrome DevTools Audits panel has been renamed as Lighthouse. These unified metrics are also used in Pagespeed insights and Google Search Console.

This shift in focus creates new, more precise goals.

What Makes Google Lighthouse Different from Core Web Vitals?

These three metrics are part of the Lighthouse performance score.

Contentful Paint, Total Blocking Times, and Cumulative Layout Changes account for 70% of Lighthouse’s weighted performance score.

These scores for CVW in Lighthouse are based on emulated tests.

This metric is the same but calculated from a single page load and not all page loads.

Why doesn’t Lighthouse have a Match Search Console/Crux report?

The speed at which a page is assembled depends on the user’s network connection and the device’s processing power.

Lighthouse performance data does not account for all of these factors.

The tool instead emulates a mid-range device, throttles the CPU, and simulates an average user.

Lab tests can be collected in a controlled environment using a pre-defined device and network settings.

Lab data help debug performance issues.

This does not mean that your experience in a controlled environment is the same as the experiences of wild humans.

You don’t need to choose between Lighthouse or Core Web Vitals. They’re both designed to work together.

Use the Chrome User Experience Report field data for all issues that may impact natural uses.

Use the Lighthouse’s expanded testing capabilities to find the problem code.

Lighthouse is your best friend #webperf if you work on a site before launch or make QA changes in a private environment.

How are Google Lighthouse Performance Metrics Calculated

In Lighthouse’s versions 8 and 9, seven metrics contribute a percentage to the overall performance score.

Why is my score different each time I test?

Your score could change every time you take a test.

The impact of browser extensions, internet connection, and A/B testing, as well as the ads that are displayed on a specific page load, can be significant.

For more information, visit the documentation on performance testing variability.

Google Lighthouse Performance Metrics Explained

Largest Contentful Paint (LCP)

• It is A user’s perception of the loading experience.
• Lighthouse Performance score weighting: 25%
• How it measures: This is the point in the page loading timeline at which the largest image or block of text is visible in the viewport.
• How it’s done: Lighthouse extracts LCP information from Chrome’s trace tool.
• Is Largest Contentful Paint a Web Core Vital? Yes!
• LCP Scoring
• Goal: Achieve LCP in < 2.5 seconds.

What Elements Are Included in LCP?

• Text.
• Images.
• Videos.
• Background images.

What Is LCP on Your Page?

It depends! LCP varies by page template.

It is possible to measure multiple pages from the same template and then define LCP.

Lighthouse will give you the HTML of the LCP elements, but it is helpful to have the node communicate with developers.

The name of the node will remain consistent. However, the on-page image and text may vary depending on which template renders it.

How To Define LCP Using Chrome Devtools

1. Open the page using Chrome.
2. Navigate the Performance panel in Dev Tools (Command + Option+ I on Mac or Control + Shift+ I on Windows and Linux).
3. Hover the LCP marker in the Timings section.
4. The Related Node field lists the elements that correspond to LCP.

What Causes Poor Level of Care?

Poor LCP usually comes from four issues:

1. Slow server response time.
2. Blocking JavaScript and CSS rendering.
3. Resource load times.
4. Client-side rendering.

How To Fix Poor LCP

If slow server response times are the problem,

• Optimize your server.
• Users can use it to find a CDN nearby.
• Cache assets.
• Serve HTML pages cache-first.
• Make connections with third parties early.

If render-blocking JavaScript or CSS is the reason,

• Minify CSS.
• Defer non-critical CSS.
• Inline CSS.
• Minify JavaScript files and compress them.
• Defer unused JavaScript.
• Minimize unused polyfills.

If resource load times are the problem,

• Optimize images and reduce them.
• Preload important resources.
• Compress text files.
• Different assets can be delivered based on network connections (adaptive serving).
• Use a service worker to cache assets.

If client-side rendering is the problem:

• Minimize critical JavaScript.
• Use another rendering technique.

Resources For Improving LCP

• Largest Contentful Paint (LCP) web.dev.
• Optimize Largest Contentful Paint web.dev.
• Lighthouse has the most giant contentful paint web.dev.

Total Blocking Time (TBT)

• This is a representation of Responsiveness to user input.
• Lighthouse Performance score weighting: 30%
• TBT measures the time between the First Contentful Paint (FID) and the Time to Interactive (TTB). TBT is the lab equivalent of First Input Delay (FID). This field data is used in the Chrome User Experience Report and Google’s Page Experience ranking signal.
• It is measured by the time to complete tasks that take more than 50ms. A study that takes more than 80ms to complete will count towards TBT. TBT will add 0ms to the time it takes to conduct an investigation.
• Is Total Blocking time a web core vital? Yes! Yes!

TBT Scoring

• Goal: To achieve a TBT score of fewer than 300 milliseconds.

The first input delay, which is the equivalent of TBT field data, has different thresholds.

Long Tasks And Total Blocking Time

TBT measures tasks that take longer than 50ms.

A single-line script queue waits to execute when a browser loads your website.

All inputs from the user must go into the same queue.

The browser doesn’t respond to user input because it executes other tasks.

Long tasks are, in essence, like the waitress at your favorite coffee shop waiting too long for you to order a beverage.

A person ordering a 2% Venti four-pump vanilla or five-pump mocha full-fat froth will have long, tedious tasks.

What Causes a High TBT on Your Page?

Heavy JavaScript.

That’s it.

TBT Viewing with Chrome Devtools

How To Fix Poor TBT

• Break up Long Tasks.
• Optimize your page for interaction readiness.
• Use a web worker.
• Reduce JavaScript execution time.

Resources For Improving TBT

• First Input Delay (FID) web.dev.
• Total Blocking Time (TBT) web.dev.
• Optimize First Input Delay web.dev.
• Lighthouse: Total Blocking Time web.dev.

First Contentful Paint (FCP)

• This FCP mark is when the first image or text is visible (visible).
• Lighthouse Performance score weighting: 10%
• It measures the time it takes to see if the page I request is responding. My thumb stops hovering above the back button.
• How it is measured Your Lighthouse FCP score is calculated by comparing the FCP scores of your page to the FCP times of accurate website data stored in the HTTP Archive.
• Your FCP is increased if the page loads faster than any other pages in HTTP Archive.
• Is First Contentful Paint a Web Core Vital? No

FCP Scoring

• Goal: Achieve FCP in < 2 seconds.

What Elements Are Included in FCP?

The time it takes to render the first element visible in the DOM is called the FCP.

Any element that precedes an aspect that creates non-white content (exempting iframes) is counted towards FCP.

Iframes are not part of FCP. FCP will continue counting until the first non-iframe content loads if they are the first content rendered. However, the iframe load times aren’t included in the FCP.

FCP documentation also mentions that font load time can impact FCP. Tips for increasing font loads

FCP Using Chrome Devtools

1. Open the page using Chrome.
2. Navigate the Performance panel in Dev Tools (Command + Options + I on Mac, Control + Shift+ I on Windows or Linux).
3. Click the FCP marker under the Timings section.
4. The summary tab contains a timestamp that matches the FCP in

How To Improve FCP

Before any content can be rendered to the screen, the browser must first download and parse all external stylesheets.

Inline styles are used for content above the fold to speed up external resource delays.

Use an automated tool such as penthouse or Apache’s mod_pagespeed to keep your site sustainable and scalable.

These solutions may have limitations in functionality, need to be tested, and may not suit everyone.

We can all make our sites faster to First Contentful Paint by simplifying style calculations.

Remove a style if it isn’t being used.

Chrome Dev Tool’s Code Coverage functionality can help you identify unusable CSS.

Use better data to make better decisions.

Like TTI, objective user metrics can be captured for FCP with Google Analytics, allowing you to correlate improvements and KPIs.

Resources For Improving FCP

• First Contentful Paint, web. dev.

Speed Index

• What does it represent? : How many pixels are visible during load?
• Lighthouse Performance score weighting: 10%
• The Speed Index measures the time that visible pages are displayed.
• How it’s calculated Lighthouse’s Speed Index measurement is taken from a module called Speedline.

The kind wizards at webpagetest.org will provide more details. However, Speedline scores are determined by the screen size (read as the device screen) and an algorithm to calculate the completeness of each frame.

• Is Speed Index a Web Core Vital? No.

SI Scoring

• Goal: achieve SI in < 4.3 seconds.

How To Improve SI

Speed score is a measure of your site’s Critical Rendering Path.

A “critical resource” is essential to the page’s core functionality or the first painting.

A longer path will result in a slower page.

Optimized paths will give you faster content and higher Speed Index scores.

What The Critical Path Is and How It Affects

Lighthouse recommendations are often associated with a slow Critical Rendering Path.

• Minimize main-thread work.
• Reduce JavaScript execution time.
• Reduce Critical Requests Depth.
• Eliminate Render-Blocking Resources.
• Defer offscreen images.

Resources For Improving SI

• Speed Index, web. dev.

Time To Interactive

• This is Load responsiveness. This indicates where a page appears responsive but isn’t.
• Lighthouse Performance score weighting: 10%
• How it measures: Time from when the page loads to when its primary resources are loaded.
• TTI is a measurement of how long it takes for a page to become fully interactive. When a page becomes fully interactive, it is called TTI.

1. This page contains helpful content as measured by First Contentful Paint.

2. Event handlers must be registered for the most prominent elements of a page.

3. Within 50 milliseconds, the page responds to user interaction.

• Is it time to interact with a web core vital? No

TTI Scoring

Goal: To achieve a TTI score of fewer than 3.8 seconds.

Resources For Improving TTI

• Time to Interactive, web. dev.

Cumulative Layout Shift (CLS)

• It is A user’s perception of a page’s visual stability.
• Lighthouse Performance score weighting: 15%
• It measures: It measures the number of pages that have been loaded.
• CLS doesn’t measure time like other metrics. It’s instead a calculated metric that measures the number of frames in each frame in which elements moved and the distance in pixels between details.

CLS Scoring

• Objective: To achieve a CLS score of less than 0.01.

What Elements Are Included in CLS?

Any visual element that appears above the fold during a load.

Your CLS will suffer if your footer is loaded first, then the page’s main content.

Causes Of Poor CLS

• Images with no dimensions.
• Ads embed iframes with no dimensions.
• Dynamically injected content.
• Web fonts can cause FOIT/FOUT.
• Actions wait for a response from the network before updating DOM.

How To Define CLS Using Chrome Devtools

1. Open the page using Chrome.
2. Navigate the Performance panel in Dev Tools (Command + Option+ I on Mac or Control+ Shift + I for Windows and Linux).
3. Move from left to right by hovering over load screenshots. (Ensure that the screenshots checkbox has been checked.
4. Look out for elements that bounce around after the first painting. This will help you identify CLS factors.

How To Improve CLS

After identifying the problem element(s), you will need to fix them so that the page loads smoothly.

You may use placeholder images the same size as the ad to fill the space between the ads and the load.

There are several common ways to improve CLS.

• Images and video elements should always include the width and height dimensions.
• Reserve space to place ads (and don’t collapse them).
• Do not insert new content over existing content.
• Be careful when placing non-sticky ads near the top of the viewport.
• Preload fonts.

CLS Resources

• Optimize Cumulative Layout Shift web.dev
• Cumulative Layout Shift (CLS) web.dev
• Layout Shift in AMP (CLS) – The AMP Blog
• Incremental Layout Shift (CLS) Calculator

How to Test Performance with Google Lighthouse

Methodology Matters

Lighthouse inspects one page at a given time.

A site’s single-page score does not represent it.

Check multiple pages within your website.

Identify the significant page types, templates, and conversion points for a signup, subscribe, and checkout pages.

Make 40% of your blog posts your blog pages.

Example Page Testing Inventory

Before you optimize, open Lighthouse on each page. Save the report data.

Keep track of your scores and list the things you want to improve.

Save the JSON results to prevent data loss, and use Lighthouse Viewer for more information.

Use ROI to Get Your Backlog To Bite Back

It is difficult to get development resources to implement SEO recommendations.

A company SEO expert could have a birthday cake for each backlog ticket. Or, at the very least, learn to hate cakes.

I have found that using numbers is key to achieving performance goals.

These starting data will be converted into dollar signs to help justify and reward development efforts.

Lighthouse testing allows you to make specific, immediate changes. (Think about preloading this font file and associate the shift with a particular metric.

There is a good chance that you will be flagged in more than one area during the tests. That’s okay!

If you are unsure which changes will be the most cost-effective, the Lighthouse Scoring Calculator can help.

Google Lighthouse: How to Run Tests

This is an example of many roads leading toward Oz.

While some scarecrows may be loud about brick colors, it isn’t about you.

Do you want to test an entire staging area? It’s time to get some NPM.

Do you have five minutes to prepare for a meeting with a potential client? You will need to prepare for a client meeting with just a few reports.

No matter how you do it, default to mobile unless there is a specific use case for desktop.

What’s the Difference between PageSpeed Insights and Google Lighthouse?

PageSpeed Insights lets you test one page at a time. Enter the URL.

The Pros of Running Google Lighthouse from PageSpeed Insights

• This Lighthouse report contains URL-specific information from the Chrome User Experience Report.
• You can filter Opportunities and Diagnostics to narrow down your search. This can be extremely useful for creating tickets for engineers and tracking the impact of changes.
• PageSpeed Insights is already running version 9.

Cons of Running Google Lighthouse from PageSpeed Insights

• One report at a time.
• Performance tests are only run (if you require SEO, Accessibility, or Best Practices, you will need to run them separately).
• It is not possible to test local builds or authenticated web pages.
• Reports cannot be saved in JSON HTML or Gist formats. You can also save it as a PDF using the browser functionality.
• You will need to save your results manually.

Chrome DevTools or Web is available to compare test results. dev

The report will simulate a user’s experience with your browser. To do this, create an anonymous instance and disable all extensions.

Pro-tip: Make a Chrome profile to test. It should be kept local, with no password saving, sync enabled, or password saving. Also, don’t install any extensions.

How to Run a Test Lighthouse Using Chrome DevTools

1. Open a new incognito Chrome instance.
2. Go to the Network panel in Chrome Dev Tools (Command + Options + I on Mac, Control + Shift+ I on Windows or Linux).
3. Check the box to deactivate the cache.
4. Navigate the Lighthouse panel.
5. Click Generate Report.
6. To the right of the URL, click the dots.
7. Save in your preferred formats (JSON, HTML, or Gist).

Please note that Lighthouse’s version may differ depending on Chrome’s performance. Chrome 97 uses v8.5.

Lighthouse will be shipped with DevTools Chrome 98.

How to Run a Test Lighthouse Using Web.Dev

This is like DevTools, but you don’t have to remember how to disable all those annoying extensions!

1. Click here to go to web dev/measure.
2. Enter your URL.
3. Click Run Audit.
4. Click View Report.

The Pros of Running Lighthouse from DevTools/web.dev

• Test local builds and authenticated pages.
• Saved reports are easily compared with the Lighthouse CI Diff utility.

Cons of Running Lighthouse from DevTools/web.dev

• One report at a time.
• You will need to save your results manually.

For Testing At Scale (and Sanity): Node Command Line

1. Install npm

Mac Pro Tip: Homebrew is a great way to avoid annoying dependency issues. )

2. Install the Lighthouse node Module with npm

Install -g Lighthouse

3. One text can be run

Lighthouse

4. Programmmatically run tests to test a list of uses.

The Pros of Running Lighthouse From Node

• Multiple reports can be run simultaneously.
• To track changes over time, it can be set up to run automatically.

Cons of Running Lighthouse From Node

• You need to have some programming knowledge.
• Less time-intensive.

Conclusion

The complexity and variety of performance metrics reflect the challenges all websites face.

Performance metrics are used to measure user experience.

Google tools such as What Does My Site Cost and Test My Site by Google are great resources. You can use these tools to make customer-focused arguments and tell customers why performance is essential.

These definitions help you convert Lighthouse’s single performance indicator into action tickets for a skilled and collaborative engineering team.

Please keep track of your data and shout about it.

SEO professionals and developers must understand how to convert a concept from code into code.

You can test, iterate and then share your learnings! Beautiful unicorn, I’m looking forward to seeing your potential.