A Technical SEO Guide To Lighthouse Performance Metrics via @sejournal, @Jammer_Volts

2 years ago 239
ARTICLE AD BOX

Maybe you’re present due to the fact that you’re a die-hard instrumentality of show metrics. Or possibly you don’t cognize what Lighthouse is and are excessively acrophobic to ask.

Either is an fantabulous option. Welcome!

Together, we’re hoping to instrumentality your show betterment efforts from “make each the numbers green” to immoderate wide and meaningful enactment items.

Note: This nonfiction was updated for freshness successful January 2022 to correspond versions 8 and 9.

Technical SEO and Google Data Studio nerd Rachel Anderson joined maine connected this merry escapade into demystifying developer documentation.

We’re going to answer:

  • What is Lighthouse?
  • How is Lighthouse antithetic from Core Web Vitals?
  • Why doesn’t Lighthouse lucifer Search Console/Crux reports?
  • How is Performance Score calculated?
  • Why is my people antithetic each clip I test?
  • Lighthouse Performance metrics explained
  • How to trial show utilizing Lighthouse

What Is Lighthouse?

Performance is astir measuring however rapidly a browser tin assemble a webpage.

Lighthouse uses a web browser called Chromium to physique pages and runs tests connected the pages arsenic they’re built.  The instrumentality is open-source (meaning it is maintained by the assemblage and escaped to use).

Each audit falls into 1 of 5 categories:

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

measuring website performanceScreenshot from Lighthouse, January 2022

For the purposes of this article, we’re going to usage the sanction Lighthouse to notation to the bid of tests executed by the shared Github repo, careless of the execution method.

Version 9 is presently retired connected Github and is slated for large-scale rollout with the unchangeable Chrome 98 merchandise successful February 2022.

Lighthouse And Web Core Vitals

On May 5, 2020, the Chromium task announced a acceptable of 3 metrics with which the Google-backed open-source browser would measurement performance.

The metrics, known arsenic Web Vitals, are portion of a Google inaugural designed to supply unified guidance for prime signals.

The extremity of these metrics is to measurement web show successful a user-centric manner.

Within 2 weeks, Lighthouse v6 rolled retired with a modified mentation of Web Core Vitals astatine the bosom of the update.

July 2020 saw Lighthouse v6’s unified metrics adopted crossed Google products with the merchandise of Chrome 84.

Chrome DevTools Audits sheet was renamed to Lighthouse. Pagespeed insights and Google Search Console besides notation these unified metrics.

This alteration successful absorption sets new, much refined goals.

How Is Lighthouse Different Than Core Web Vitals?

The 3 metrics represented by Core Web Vital are portion of Lighthouse show scoring.

Largest Contentful Paint, Total Blocking Time, and Cumulative Layout Shift comprise 70% of Lighthouse’s weighted show score.

The scores you’ll spot for CWV successful Lighthouse are the effect of emulated tests.

It’s the aforesaid metric but measured disconnected a azygous leafage load alternatively than calculated from leafage loads astir the world.

Why Doesn’t Lighthouse Match Search Console/Crux reports?

For existent users, however rapidly a leafage assembles is based connected factors similar their web connection, the device’s web processing power, and adjacent the user’s carnal region to the site’s servers.

Lighthouse show information doesn’t relationship for each these factors.

Instead, the instrumentality emulates a mid-range instrumentality and throttles CPU successful bid to simulate the mean user.

These are laboratory tests collected wrong a controlled situation with predefined instrumentality and web settings.

Lab information is adjuvant for debugging show issues.

It does not mean that the acquisition connected your section instrumentality successful a controlled situation represents the experiences of real humans successful the wild.

The bully quality is you don’t person to take betwixt Lighthouse and Core Web Vitals. They’re designed to beryllium portion of the aforesaid workflow.

Always commencement with tract information from the Chrome User Experience Report to place issues impacting existent uses.

Then leverage the expanded investigating capabilities of Lighthouse to place the codification causing the issue.

If you’re moving connected a tract pre-launch oregon QAing changes successful a non-public environment, Lighthouse volition beryllium your caller champion #webperf friend.

Workflow for performanceScreenshot from Lighthouse, January 2022

How Is Lighthouse Performance Metrics Calculated?

Performance scores from LighthouseLighthouse, January 2022

In versions 8 and 9, Lighthouse’s show people is made of 7 metrics with each contributing a percent of the full show score.

Lighthouse metricsCreated by author, January 2022

Why Is My Score Different Each Time I Test?

Your people whitethorn alteration each clip you test.

Browser extensions, net connection, A/B tests, oregon adjacent the ads displayed connected that circumstantial leafage load person an impact.

If you’re curious/furious to cognize more, cheque retired the documentation connected performance investigating variability.

Lighthouse Performance Metrics Explained

Largest Contentful Paint (LCP)

  • What it represents: A user’s cognition of loading experience.
  • Lighthouse Performance people weighting: 25%
  • What it measures: The constituent successful the leafage load timeline erstwhile the page’s largest representation oregon substance artifact is disposable wrong the viewport.
  • How it’s measured: Lighthouse extracts LCP information from Chrome’s tracing tool.
  • Is Largest Contentful Paint a Web Core Vital? Yes!
  • LCP Scoring
  • Goal: Achieve LCP successful < 2.5 seconds.

LCP measurementsCreated by author, January 2022

What Elements Can Be Part Of LCP?

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

What Counts As LCP On Your Page?

It depends! LCP typically varies by leafage template.

This means that you tin measurement a fistful of pages utilizing the aforesaid template and specify LCP.

Lighthouse volition supply you with the nonstop HTML of the LCP element, but it tin beryllium utile to cognize the node arsenic good erstwhile communicating with developers.

The node sanction volition beryllium accordant portion the nonstop on-page representation oregon substance whitethorn alteration depending connected which contented is rendered by the template.

How To Define LCP Using Chrome Devtools

  1. Open the leafage successful Chrome.
  2. Navigate to the Performance sheet of Dev Tools (Command + Option + I connected Mac oregon Control + Shift + I connected Windows and Linux).
  3. Hover implicit the LCP marker successful the Timings section.
  4. The element(s) that correspond to LCP is elaborate successful the Related Node field.

A Technical SEO Guide To Lighthouse Performance MetricsCreated by author, January 2022

What Causes Poor LCP?

Poor LCP typically comes from 4 issues:

  1. Slow server effect times.
  2. Render-blocking JavaScript and CSS.
  3. Resource load times.
  4. Client-side rendering.

How To Fix Poor LCP

If the origin is dilatory server effect time:

  • Optimize your server.
  • Route users to a adjacent CDN.
  • Cache assets.
  • Serve HTML pages cache-first.
  • Establish third-party connections early.

If the origin is render-blocking JavaScript and CSS:

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

If the origin is assets load times:

  • Optimize and compress images.
  • Preload important resources.
  • Compress substance files.
  • Deliver antithetic assets based connected the web transportation (adaptive serving).
  • Cache assets utilizing a work worker.

If the origin is client-side rendering:

Resources For Improving LCP

Total Blocking Time (TBT)

  • What it represents: Responsiveness to idiosyncratic input.
  • Lighthouse Performance people weighting: 30%
  • What it measures: TBT measures the clip betwixt First Contentful Paint and Time to Interactive. TBT is the laboratory equivalent of First Input Delay (FID) – the tract information utilized successful the Chrome User Experience Report and Google’s upcoming Page Experience ranking signal.
  • How it’s measured: The full clip successful which the main thread is occupied by tasks taking much than 50ms to complete. If a task takes 80ms to run, 30ms of that clip volition beryllium counted toward TBT. If a task takes 45ms to run, 0ms volition beryllium added to TBT.
  • Is Total Blocking Time a Web Core Vital? Yes! It’s the laboratory information equivalent of First Input Delay (FID).

TBT Scoring

  • Goal: Achieve TBT people of little than 300 milliseconds.

A Technical SEO Guide To Lighthouse Performance MetricsCreated by author, January 2022

First Input Delay, the tract information equivalent to TBT, has antithetic thresholds.

FID Time successful  millisecondsCreated by author, January 2022

Long Tasks And Total Blocking Time

TBT measures agelong tasks – those taking longer than 50ms.

When a browser loads your site, determination is fundamentally a azygous enactment queue of scripts waiting to beryllium executed.

Any input from the idiosyncratic has to spell into that aforesaid queue.

When the browser can’t respond to idiosyncratic input due to the fact that different tasks are executing, the idiosyncratic perceives this arsenic lag.

Essentially, agelong tasks are similar that idiosyncratic astatine your favourite java store who takes acold excessively agelong to bid a drink.

Like idiosyncratic ordering a 2% venti four-pump vanilla, five-pump mocha whole-fat froth, agelong tasks are a large root of atrocious experiences.

Short tasks vs. agelong  tasksScreenshot by author, January 2022

What Causes A High TBT On Your Page?

Heavy JavaScript.

That’s it.

How To See TBT Using Chrome Devtools

A Technical SEO Guide To Lighthouse Performance MetricsScreenshot from Chrome Devtools, January 2022

How To Fix Poor TBT

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

Resources For Improving TBT

First Contentful Paint (FCP)

  • What it represents: FCP marks the clip astatine which the archetypal substance oregon representation is painted (visible).
  • Lighthouse Performance people weighting: 10%
  • What it measures: The clip erstwhile I tin spot the leafage I requested is responding. My thumb tin halt hovering implicit the backmost button.
  • How it’s measured: Your FCP people successful Lighthouse is measured by comparing your page’s FCP to FCP times for existent website information stored by the HTTP Archive.
  • Your FCP increases if it is faster than different pages successful the HTTP Archive.
  • Is First Contentful Paint a Web Core Vital? No

FCP Scoring

  • Goal: Achieve FCP successful < 2 seconds.

FCP timeCreated by author, January 2022

What Elements Can Be Part Of FCP?

The clip it takes to render the archetypal disposable constituent to the DOM is the FCP.

Anything that happens earlier an constituent that renders non-white contented to the leafage (excluding iframes) is counted toward FCP.

Since iframes are not considered portion of FCP, if they are the archetypal contented to render, FCP volition proceed counting until the archetypal non-iframe contented loads, but the iframe load clip isn’t counted toward the FCP.

The documentation astir FCP besides calls retired that is often impacted by font load clip and determination are tips for improving font loads.

FCP Using Chrome Devtools

  1. Open the leafage successful Chrome.
  2. Navigate to the Performance sheet of Dev Tools (Command + Option + I connected Mac oregon Control + Shift + I connected Windows and Linux).
  3. Click connected the FCP marker successful the Timings section.
  4. The summary tab has a timestamp with the FCP successful ms.

How To Improve FCP

In bid for contented to beryllium displayed to the user, the browser indispensable archetypal download, parse, and process each outer stylesheets it encounters earlier it tin show oregon render immoderate contented to a user’s screen.

The fastest mode to bypass the hold of outer resources is to usage in-line styles for above-the-fold content.

To support your tract sustainably scalable, usage an automated tool similar penthouse and Apache’s mod_pagespeed.

These solutions volition travel with immoderate restrictions to functionalities, necessitate testing, and whitethorn not beryllium for everyone.

Universally, we tin each amended our site’s clip to First Contentful Paint by reducing the scope and complexity of benignant calculations.

If a benignant isn’t being used, region it.

You tin place unused CSS with Chrome Dev Tool’s built-in Code Coverage functionality.

Use amended information to marque amended decisions.

Similar to TTI, you tin capture existent idiosyncratic metrics for FCP utilizing Google Analytics to correlate improvements with KPIs.

Resources For Improving FCP

Speed Index

  • What it represents: How overmuch is disposable astatine a clip during load.
  • Lighthouse Performance people weighting: 10%
  • What it measures: The Speed Index is the mean clip astatine which disposable parts of the leafage are displayed.
  • How it’s measured: Lighthouse’s Speed Index measurement comes from a node module called Speedline.

You’ll person to inquire the kindly wizards astatine webpagetest.org for the specifics but roughly, Speedline scores alteration by the size of the viewport (read arsenic instrumentality screen) and person an algorithm for calculating the completeness of each frame.

Speed scale  measurementsScreenshot by author, January 2022

  • Is Speed Index a Web Core Vital? No.

SI Scoring

  • Goal: execute SI successful < 4.3 seconds.

Speed Index metricsCreated by author, January 2022

How To Improve SI

Speed people reflects your site’s Critical Rendering Path.

A “critical” assets means that the assets is required for the archetypal overgarment oregon is important to the page’s halfway functionality.

The longer and denser the path, the slower your tract volition beryllium to supply a ocular page.

If your way is optimized, you’ll springiness users contented faster and people higher connected Speed Index.

How The Critical Path Affects Rendering

Optimized rendering vs unoptimized timesScreenshot by author, January 2022

Lighthouse recommendations commonly associated with a slow Critical Rendering Path include:

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

Resources For Improving SI

Time To Interactive

  • What it represents: Load responsiveness; identifying wherever a leafage looks responsive but isn’t yet.
  • Lighthouse Performance people weighting: 10%
  • What it measures: The clip from erstwhile the leafage begins loading to erstwhile its main resources person loaded and are capable to respond to idiosyncratic input.
  • How it’s measured: TTI measures however agelong it takes a leafage to go afloat interactive. A leafage is considered afloat interactive when:

1. The leafage displays utile content, which is measured by the First Contentful Paint.

2. Event handlers are registered for astir disposable leafage elements.

3. The leafage responds to idiosyncratic interactions wrong 50 milliseconds.

  • Is Time to Interactive a Web Core Vital? No

TTI Scoring

Goal: execute TTI people of little than 3.8 seconds.

TTI scoring systemCreated by author, January 2022

Resources For Improving TTI

Cumulative Layout Shift (CLS)

  • What it represents: A user’s cognition of a page’s ocular stability.
  • Lighthouse Performance people weighting: 15%
  • What it measures: It quantifies shifting leafage elements done the extremity of leafage load.
  • How it’s measured: Unlike different metrics, CLS isn’t measured successful time. Instead, it’s a calculated metric based connected the fig of frames successful which elements determination and the full region successful pixels the elements moved.

CLS Layout Score formulaCreated by author, January 2022

CLS Scoring

  • Goal: execute CLS people of little than 0.1.

CLS Scoring systemCreated by author, January 2022

What Elements Can Be Part Of CLS?

Any ocular constituent that appears supra the fold astatine immoderate constituent successful the load.

That’s close – if you’re loading your footer archetypal and past the leader contented of the page, your CLS is going to hurt.

Causes Of Poor CLS

  • Images without dimensions.
  • Ads, embeds, and iframes without dimensions.
  • Dynamically injected content.
  • Web Fonts causing FOIT/FOUT.
  • Actions waiting for a web effect earlier updating DOM.

How To Define CLS Using Chrome Devtools

  1. Open the leafage successful Chrome.
  2. Navigate to the Performance sheet of Dev Tools (Command + Option + I connected Mac oregon Control + Shift + I connected Windows and Linux).
  3. Hover and determination from near to close implicit the screenshots of the load (make definite the screenshots checkbox is checked).
  4. Watch for elements bouncing astir aft the archetypal overgarment to place elements causing CLS.

How To Improve CLS

Once you place the element(s) astatine fault, you’ll request to update them to beryllium unchangeable during the leafage load.

For example, if slow-loading ads are causing the precocious CLS score, you whitethorn privation to usage placeholder images of the aforesaid size to capable that abstraction arsenic the advertisement loads to forestall the leafage shifting.

Some communal ways to amended CLS include:

  • Always see width and tallness size attributes connected images and video elements.
  • Reserve abstraction for advertisement slots (and don’t illness it).
  • Avoid inserting caller contented supra existing content.
  • Take attraction erstwhile placing non-sticky ads adjacent the apical of the viewport.
  • Preload fonts.

CLS Resources

How To Test Performance Using Lighthouse

Methodology Matters

Out of the box, Lighthouse audits a azygous leafage astatine a time.

A azygous leafage people doesn’t correspond your site, and a accelerated homepage doesn’t mean a accelerated site.

Test aggregate leafage types wrong your site.

Identify your large leafage types, templates, and extremity conversion points (signup, subscribe, and checkout pages).

If 40% of your tract is blog posts, marque 40% of your investigating URLs blog pages!

Example Page Testing Inventory

Example Page Testing InventoryCreated by author, January 2022

Before you statesman optimizing, tally Lighthouse connected each of your illustration pages and prevention the study data.

Record your scores and the to-do database of improvements.

Prevent information nonaccomplishment by redeeming the JSON results and utilizing Lighthouse Viewer erstwhile elaborate effect accusation is needed.

Get Your Backlog to Bite Back Using ROI

Getting improvement resources to enactment SEO recommendations is hard.

An in-house SEO nonrecreational could destruct their pancreas by having a day barroom for each backlogged ticket’s birthday. Or astatine slightest larn to hatred cake.

In my acquisition arsenic an in-house endeavor SEO pro, the instrumentality to getting show initiatives prioritized is having the numbers to backmost the investment.

This starting information volition go dollar signs that service to warrant and reward improvement efforts.

With Lighthouse testing, you tin urge circumstantial and nonstop changes (Think preload this font file) and subordinate the alteration to a circumstantial metric.

Chances are you’re going to person much than 1 country flagged during tests. That’s okay!

If you’re wondering which changes volition person the astir bang for the buck, cheque retired the Lighthouse Scoring Calculator.

How To Run Lighthouse Tests

This is simply a lawsuit of galore roads starring to Oz.

Sure, immoderate scarecrow mightiness beryllium peculiarly large astir a definite shadiness of ceramic but it’s astir your goals.

Looking to trial an full staging site? Time to larn immoderate NPM.

Have little than 5 minutes to prep for a prospective lawsuit meeting? A mates of one-off reports should bash the trick.

Whichever mode you execute, default to mobile unless you person a peculiar use-case for desktop.

For One-Off Reports: PageSpeed Insights

Test 1 leafage astatine a clip connected PageSpeed Insights. Simply participate the URL.

Lab and tract  information  disposable  successful  PageSpeed InsightsScreenshot from PageSpeed Insights, January 2022

Pros Of Running Lighthouse From PageSpeed Insights

  • Detailed Lighthouse study is combined with URL-specific information from the Chrome User Experience Report.
  • Opportunities and Diagnostics tin beryllium filtered to circumstantial metrics.  This is exceptionally utile erstwhile creating tickets for your engineers and tracking the resulting interaction of the changes.
  • PageSpeed Insights is moving already mentation 9.

    Pagespeed Insights opportunities and diagnostics filtered by metricScreenshot from PageSpeed Insights, January 2022

Cons Of Running Lighthouse From PageSpeed Insights

  • One study astatine a time.
  • Only Performance tests are tally (if you request SEO, Accessibility, oregon Best Practices, you’ll request to tally those separately)
  • You can’t trial section builds oregon authenticated pages.
  • Reports can’t beryllium saved successful JSON, HTML, oregon Gist format. (Save arsenic PDF via browser functionality is an option.
  • Requires you to manually prevention results.

For Comparing Test Results: Chrome DevTools Or Web.dev

Because the study volition beryllium emulating a user’s acquisition utilizing your browser, usage an incognito lawsuit with each extensions, and the browser’s cache disabled.

Pro-tip: Create a Chrome illustration for testing. Keep it section (no sync enabled, password saving, oregon relation to an existing Google account) and don’t instal extensions for the user.

How To Run A Test Lighthouse Using Chrome DevTools

  1. Open an incognito lawsuit of Chrome.
  2. Navigate to the Network sheet of Chrome Dev Tools (Command + Option + I connected Mac oregon Control + Shift + I connected Windows and Linux).
  3. Tick the container to disable cache.
  4. Navigate to the Lighthouse panel.
  5. Click Generate Report.
  6. Click the dots to the close of the URL successful the report
  7. Save successful your preferred format (JSON, HTML, oregon Gist)

    Save options for Lighthouse ReportsScreenshot from Lighthouse Reports, January 2022

Note that your mentation of Lighthouse whitethorn alteration depending connected what mentation of Chrome you’re using. v8.5 is utilized connected Chrome 97.

Lighthouse v9 volition vessel with DevTools successful Chrome 98.

How To Run A Test Lighthouse Using Web.Dev

It’s conscionable similar DevTools but you don’t person to retrieve to disable each those pesky extensions!

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

    web.dev presumption    study  optionScreenshot by author, January 2022

Pros Of Running Lighthouse From DevTools/web.dev

  • You tin trial section builds oregon authenticated pages.
  • Saved reports tin beryllium compared utilizing the Lighthouse CI Diff tool.

    Lighthouse CI Diff toolScreenshot from Lighthouse CI Diff, January 2022

Cons Of Running Lighthouse From DevTools/web.dev

  • One study astatine a time.
  • Requires you to manually prevention results.

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

1. Install npm.
(Mac Pro-tip: Use homebrew to debar obnoxious dependency issues.)

2. Install the Lighthouse node module with npm

install -g lighthouse

3. Run a azygous substance with

lighthouse <url>

4. Run tests connected lists of usings by moving tests programmatically.

Pros Of Running Lighthouse From Node

  • Many reports tin beryllium tally astatine once.
  • Can beryllium acceptable to tally automatically to way alteration implicit time.

Cons Of Running Lighthouse From Node

  • Requires immoderate coding knowledge.
  • More time-intensive setup.

Conclusion

The complexity of show metrics reflects the challenges facing each sites.

We usage show metrics arsenic a proxy for idiosyncratic acquisition – that means factoring successful immoderate unicorns.

Tools similar Google’s Test My Site and What Does My Site Cost? tin assistance you marque the conversion and customer-focused arguments for wherefore show matters.

Hopefully, erstwhile your task has traction, these definitions volition assistance you construe Lighthouse’s azygous show metric into enactment tickets for a skilled and collaborative engineering team.

Track your information and outcry it from the rooftops.

As overmuch arsenic Google struggles to quantify qualitative experiences, SEO professionals and devs indispensable decode however to construe a conception into code.

Test, iterate, and stock what you learn! I look guardant to seeing what you’re susceptible of, you beauteous unicorn.

More resources:


Featured Image: Paulo Bobita/Search Engine Journal