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

1 month ago 13
PR Distribution

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!

For this merry escapade into demystifying developer documentation, I’ve recruited Technical SEO and Google Data Studio nerd, Rachel Anderson.

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

We’re going to look at:

  • What the heck is Lighthouse? (In lawsuit you didn’t cognize and were acrophobic to ask.)
  • Updates to however Performance Score is calculated (versions 6 and 7).
  • How to trial show utilizing Lighthouse.
  • What metrics comprise Lighthouse’s Performance score.
  • What those metrics mean.
  • How to amended them.

What Is Lighthouse?

Lighthouse is an open-source auditing tool that provides standardized scores crossed 5 areas:

  • Performance.
  • Progressive Web App.
  • Best Practices.
  • Accessibility.
  • SEO.

Advertisement

Continue Reading Below

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.

Lighthouse runs show tests utilizing emulated data, besides known arsenic laboratory data.

This is show information 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 existent humans successful the wild.

Updates to Lighthouse: 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.

Advertisement

Continue Reading Below

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.

Web Core Vitals comprise 55% of Lighthouse’s weighted show score. This alteration successful absorption sets new, much refined goals.

Overall, astir pages saw minimal interaction with 83.32% of tests shifting 10 points oregon little connected the displacement to v6.

Version 7 is presently retired connected Github and was slated for large-scale rollout with the unchangeable Chrome 89 merchandise successful March 2021.

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

Example Page Testing Inventory

URLPage Type
/Homepage
/toolsCategory Template
/tools/screwdriversProduct Listing Page Template
/acme/deluxe-anvilProduct Detail Page Template
/cartCart
/checkoutCheckout
/order-confirmationOrder confirmation
/blogBlog Root
/blog/roadrunners-101Blog Template

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.

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.

Advertisement

Continue Reading Below

Looking to integrate SEO tests into the merchandise process? 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: Chrome Devtools

Test 1 leafage astatine a clip with the Lighthouse sheet successful Chrome DevTools. 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. Save the file.

Advertisement

Continue Reading Below

Pros of Running Lighthouse From DevTools

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

Cons of Running Lighthouse From DevTools

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

For Testing the Same Pages Frequently: web.dev

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

  1. Visit web.dev/measure/.
  2. Sign successful utilizing your Google account.
  3. Enter your URL.
  4. Click Run Audit.

Pros of Running Lighthouse From web.dev

  • Captures a nifty timeline of results! (As agelong arsenic you’re logged in).

A Technical SEO Guide to Lighthouse Performance Metrics

  • Quick links to guides for improving issues.
  • Saved reports tin beryllium compared utilizing the Lighthouse CI Diff tool.

Cons of Running Lighthouse From web.dev

  • One study astatine a time.
  • You’ll request to retrieve which URLs you’re tracking implicit time.

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

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

Advertisement

Continue Reading Below

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.

Lighthouse Performance Metrics Explained

A Technical SEO Guide to Lighthouse Performance Metrics

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

Metric NameWeight
Largest Contentful Paint (LCP)25%
Total Blocking Time (TBT)25%
First Contentful Paint (FCP)15%
Speed Index (SI)15%
Time To Interactive (TTI)15%
Cumulative Layout Shift (CLS)5%

Largest Contentful Paint (LCP)

What it represents: A user’s cognition of loading experience.

Advertisement

Continue Reading Below

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 time

(in milliseconds)

Color-coding
0–2,500Green (fast)
2,501-4,000Orange (moderate)
Over 4,000Red (slow)

What Elements Can Be Part of LCP?

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

Advertisement

Continue Reading Below

What Counts arsenic LCP connected 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.

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 MetricsWhat 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:

Advertisement

Continue Reading Below

  • 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:

  • Minimize captious JavaScript.
  • Use different rendering strategy (Check retired the breakdown of rendering options successful the Guide to Angular).

Resources For Improving LCP

Total Blocking Time (TBT)

What it represents: Responsiveness to idiosyncratic input.

Lighthouse Performance people weighting: 25%

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.

Advertisement

Continue Reading Below

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.

TBT time

(in milliseconds)

Color-coding
0–300Green (fast)
301-600Orange (moderate)
Over 600Red (slow)

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

FID time

(in milliseconds)

Color-coding
0–100Green (fast)
101-300Orange (moderate)
Over 300Red (slow)

Long Tasks & Total Blocking Time

Advertisement

Continue Reading Below

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

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.

A Technical SEO Guide to Lighthouse Performance MetricsWhat Causes a High TBT connected Your Page?

Heavy JavaScript.

Advertisement

Continue Reading Below

That’s it.

How to See TBT Using Chrome Devtools

A Technical SEO Guide to Lighthouse Performance MetricsHow 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: 15%

What it measures: The clip erstwhile I tin spot the leafage I requested is responding. My thumb tin halt hovering implicit the backmost button.

Advertisement

Continue Reading Below

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 time

(in seconds)

Color-codingFCP people (HTTP Archive percentile)
0–2Green (fast)75-100
2-4Orange (moderate)50-74
4Red (slow)0-49

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.

Advertisement

Continue Reading Below

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.

Advertisement

Continue Reading Below

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.

Speed Index

What it represents: How overmuch is disposable astatine a clip during load.

Lighthouse Performance people weighting: 15%

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 has an algorithm for calculating the completeness of each frame.

A Technical SEO Guide to Lighthouse Performance MetricsIs Speed Index a Web Core Vital? No

SI Scoring

Advertisement

Continue Reading Below

Goal: execute SI successful < 4.3 seconds.

SI time

(in seconds)

Color-codingFCP people (HTTP Archive percentile)
0–4.3Green (fast)75-100
4.4-5.8Orange (moderate)50-74
5.8+Red (slow)0-49

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

A Technical SEO Guide to Lighthouse Performance Metrics

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

Advertisement

Continue Reading Below

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

Time to Interactive

What it represents: Load responsiveness; identifying wherever a leafage looks responsive but isn’t yet.

Lighthouse Performance people weighting: 15%

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 fully interactive. A leafage is considered afloat interactive when:

  • The leafage displays utile content, which is measured by the First Contentful Paint.
  • Event handlers are registered for astir disposable leafage elements.
  • The leafage responds to idiosyncratic interactions wrong 50 milliseconds.

Advertisement

Continue Reading Below

Is Time to Interactive a Web Core Vital? No

TTI Scoring

Goal: execute TTI people of little than 3.8 seconds.

TTI Score

(in seconds)

Color-coding
0–3.8Green (fast)
3.8 – 7.3Orange (moderate)
7.3+Red (poor)

Cumulative Layout Shift (CLS)

What it represents: A user’s cognition of a page’s ocular stability.

Lighthouse Performance people weighting: 5%*

* Expect CLS to summation successful weighting arsenic they enactment the bugs out. Smart stake says Q4 2021.

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.

A Technical SEO Guide to Lighthouse Performance MetricsCLS Scoring

Goal: execute CLS people of little than 0.1.

Advertisement

Continue Reading Below

CLS ScoreColor-coding
0–0.01Green (good)
0.1-0.25Orange (needs improvement)
0.25+Red (poor)

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.

Advertisement

Continue Reading Below

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

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.

Advertisement

Continue Reading Below

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.


Featured representation credit: Paulo Bobita

Read Entire Article