Lighthouse Performance Metrics Explained

Observing how your website performs is one of the things you do in order to determine if the changes you make give a positive effect. Today we’ll be discussing Lighthouse–if you feel lost and confused about what it is, we’re here to help!

Finding a reliable source to help you navigate through a new platform will help you understand how it works and how you can further improve on your performance. With enough informed changes, you’ll soon catapult your website to success.

Before taking a deep dive into Lighthouse and doing everything you can to make the metrics green, here are some important things to take note of.

This article will discuss:

• What Lighthouse is all about
• What Performance Score is
• How to start testing through Lighthouse
• Which metrics to expect when you use Lighthouse
• How these metrics impact your website and business
• What you need to do to improve them

What is Lighthouse?

As defined by Google, it’s an open-source automated tool that helps improve the quality of your web pages. You can use it to check on your competitors’ pages which may or may not require authentication. The tool also has audits for SEO, performance accessibility, and progressive web apps.

These five areas can be improved upon with Lighthouse:

• Performance – tackles time to interactive, speed index, resource optimization, latency, script execution time, asset delivery, TTFB, DOM size, etc.
• Accessibility – ARIA attributes, page elements, language, etc.
• SEO – mobile-friendliness, meta crawling, structure, canonical, etc.
• Best practices – browser error logging, accessible over HTTPS, image optimization, JS libraries, etc.
• Progressive web app (PWA) – redirecting HTTP to HTTPS, splash screen, response codes, etc.

Most people use Lighthouse in Chrome DevTools from the command line, or even as a Node module. It works by inputting a URL to review a series of audits against the page, which will provide you with a report on how the web page is performing. Plus, when you value SEO and aim to generate sales, your standing will naturally increase.

How do navigate Lighthouse Performance Metrics?

Running an audit on Lighthouse will allow you to see scores which will help you analyze what you need to improve on. In the image above you can see the Lighthouse scores. Your score for each metric pops up depending on the categories you view.

As a developer, you can use Lighthouse with Node.js to check and test a program’s functionality. The robust structure of Lighthouse can power other tools on the market to continuously provide site performance monitoring.

What does the Performance Metric mean?

The Performance category found in the Lighthouse tool informs you how fast your web page loads. This may not seem like a big deal, but many visitors subconsciously notice how fast your web page loads and may stop visiting your site altogether if it doesn’t load within a few seconds.

Take a look at these metrics and their weight in the Performance score:

• Cumulative Layout Shift – 5%
• First Contentful Paint – 15%
• Largest Contentful Paint – 25%
• Time to Interactive – 15%
• Total Blocking Time – 25%
• Speed Index – 15%

Cumulative Layout Shift

The Cumulative Layout Shift (CLS) informs you how aggressive different elements are with each other. For example, try visiting a web page with lengthy text and see how the text moves before the photos or other elements load. Figuring out how to eradicate situations like this raises your CLS score.

This metric only considers the unexpected shifts in your layout. Unexpected shifts means that no layout shift happened or that the user did not input anything within the 500ms time frame before the shift.

First Contentful Paint

First Contentful Paint, more commonly known as FCP, describes how fast a browser will render a document object model (DOM) content. DOM content can refer to images, text you read, or the non-white elements and SVGs on the website. You need to know and understand that FCP shows render time and not loading time.

So, if your browser fails to load all the text of the web page but shows the font, then it may not be a contentful paint.

Lighthouse computes the score for this specific metric by checking your web page against the FCP data found in the HTTP archive. The tool uses colors to distinguish how a page performs according to a specific metric. The metrics you see will be in green, orange, or red–meaning fast, moderate, or slow, respectively.

To understand it better:

• Fast: FCP time below 2 seconds; this shows green
• Moderate: FCP time between 2 to 4 seconds; shows in orange
• Slow: FCP time that exceeds 4 seconds; indicated in red

Largest Contentful Paint

The Largest Contentful Paint, or LCP, plays a big role in the Performance Metrics. It shows the render time of the biggest image or text block on the visible part of the web page (or the viewport).

Some notable elements that trigger the metric include the following:

• <img> elements
• <image> elements inside <svg> elements
• <video> elements
• Elements that contain background images loaded through a URL from CSS
• Block-level elements with children (text nodes included)

The biggest element changes as the page loads, but what’s included in the report is the last record of the biggest element.

Scoring values:

• Fast: anything under 2.5 seconds; indicated in green
• Moderate: speeds between 2.5 to 4 seconds; orange indication
• Slow: speeds above 4 seconds; shows in red

There are ways to improve your LCP. How?

• Cache your assets
• Optimize your servers
• Establish 3rd party connections at an earlier time frame
• Direct your users to a nearby CDN

Time to Interactive

The Time to Interactive indicates how long it takes for a web page to load before it becomes fully interactive. It’s also abbreviated as TTI.

To clarify how or what “fully interactive” means, take a look at the list below:

• You see useful content which is measured by FCP
• The web page reacts quickly to user interaction within a 50 millisecond time frame
• Javascript event handlers are bound to visible elements’ events

Now, let’s compare this with the data from the HTTP Archive:

• Fast: if TTI is below 3.9 seconds; shows in green
• Moderate: when TTI falls between 3.9 to 7.3 seconds; shows in orange
• Slow: if it’s more than 7.3 seconds; shows in red

Total Blocking Time

This refers to the total number of time records between TTI and FCP when a specific web page gets blocked from user interaction for more than 50 milliseconds. If some of the Javascript code disrupts a loading web page for around 70 milliseconds then the TBT increases by around 20 milliseconds.

To interpret better, check Lighthouse’s metrics:

• Fast: TBT is below 300 milliseconds; has green indication
• Moderate: when it loads between 300 to 600 milliseconds; shows an orange indicator
• Slow: when it takes more than 600 milliseconds to load; shows a red indicator

How do you improve your TBT?

• Create shorter tasks
• Optimize your website and prepare it for interaction
• Make use of a web worker
• Lessen the JavaScript execution time

Speed Index

This refers to how fast the web page content loads visually. To test this, Lighthouse records a video of your web page loading and calculates how it visually progresses between frames. If the web page elements appear quickly with some scripts still loading, the metrics will be in the safe zone.

Remember that the metrics won’t be computed if you do this on an empty, unchanging white page. By computing the Speed Index through this feature, you’ll know how fast or slow your website loads compared to your competitors.

For your reference:

• Fast: if the website takes less than 4.3 seconds to load; shows a green indicator
• Moderate: when it loads between 4.4 to 5.8 seconds; shows an orange indicator
• Slow: if it takes more than 5.8 seconds to load; shows a red indicator

What are the advantages of using Lighthouse?

Part of the advantages of using Lighthouse Performance Metrics for your website is that it provides flexibility while allowing you to improve on your website. It is also potentially beneficial in acquiring backlinks that will help boost your presence on the internet. These are all useful, especially when selling on Amazon.

Following a guide on Amazon SEO will teach you that checking the speed of your website gives you an advantage for your business. More often than not, customers do preliminary research before buying a product, and your website is a great source of information for whatever it is you’re selling. In using Lighthouse Performance Metrics, you’ll get the following benefits.

A source of noteworthy information

Lighthouse gives you complete details about your website, like measurements and reports on elements. From the data you get from this tool, you can consult with a website manager and fix or improve things as needed.

Website speed measurements

The tool provides you with reports on how fast your website loads. It also helps you determine which parts you need to improve on especially if more of your customers are mobile users compared to desktop users.

Identifies users’ perception

This tool aids you in knowing how your customers perceive your application or website. It predicts and informs you about the behavior of your users with complete information on how they engage with your website and application.

Helps improve your SEO ranking

One of the greatest benefits of using this tool is that it helps you improve your rank on search engine results, and especially on Google. The feedback that you get from this tool also helps your developers improve your entire website, leading to higher rankings.

How do you run an audit through Google Lighthouse?

If you plan on running an audit, you may choose from these methods.

Through web.dev

Follow these steps:

• Visit this page: https://web.dev/measure/
• Input the website you want to audit
• Click “Run Audit”

Through Google PageSpeed Insights

As mentioned previously, Lighthouse powers different tools that can help you audit your website. One of those tools is Google PageSpeed Insights.

To use it:

• Go to their website at https://developers.google.com/speed/pagespeed/insights/
• Input your URL
• Wait for the results

When the results come in, you’ll see different factors you can improve on that may affect the performance of your website.

Why do you need to pay attention to your Google Lighthouse score?

As more and more users rely on their mobile phones for browsing the internet and buying products, eCommerce sellers now have to think of improving their sites on mobile devices and not only on desktop browsers. Mobile browsing is the way of the future, and optimizing your website on mobile gives you a heavy advantage which may even convert interest into sales.

Put it in mind that improving your website on any platform will aid in widening the reach of your website, your products, and your business as a whole.

Final thoughts

Remember that 3 is the magical number. If your website takes more than 3 seconds to load, 40% of people browsing abandon it altogether. When you fail to optimize your website and loading its pages takes too long, you can rank lower on search results and lose potential customers as well.

Lighthouse Performance Metrics provides you with an easy way to analyze websites through bite-sized information. This tool gives you real-time website speed scores and recommendations on how to improve your website. This helps you, your developers, and your marketers widen your business’ reach. It also helps you easily understand the things you need to improve on, like image and text loading speeds.

Lighthouse is a nifty tool to add to your arsenal. With it, you can get necessary information to share with your team. Use it, work on improving your website, and continue building your business empire.