preface

Recently do the performance testing tool, a lot of knowledge points are not clear, plan to check deficiencies, fill up.

Let’s start with Lighthouse, the official performance monitoring tool, and briefly introduce some of the features of Lighthouse.

After reading this article, you will know

  • Lighthouse is what.
  • How to Get Started with Lighthouse (Getting Started).
  • There are some Metrics in Lighthouse.

To prepare a mind map for performance related summaries, click here:

Docs.qq.com/mind/DWnljW…

What is the Lighthouse

The official interpretation of it:

Lighthouse is an open source automation tool designed to improve the quality of web applications. You can run it as a Chrome extension or from the command line. You give Lighthouse a web site to review, which runs a series of tests against the page, and then generates a report on the page’s performance.

How does it work?

If, like me, you’ve gone through the code and read the description, it’s pretty confusing. The code dependencies are as follows:

Those who are interested can check out its warehouse, the reference link is given.

Github.com/GoogleChrom…

Introduction to use

You can run Lighthouse in one of two ways: as a Chrome extension, or as a command-line tool. The Chrome extension provides a more user-friendly interface for easy reading of reports. The command-line tools allow you to integrate Lighthouse into a continuous integration system.

Chrome Extension

Download Google Chrome 52 or later.

Install the Lighthouse Chrome extension.

Address: chrome.google.com/webstore/de…

Click the Generate Report button to run the Lighthouse test against the currently open page.

Command line tool

The Node CLI provides the greatest flexibility in configuring and reporting on the performance of Lighthouse. If you need more advanced features, or want to run Lighthouse automatically, you can use the Node CLI. Install Lighthouse as a global node module.

Installation:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
Copy the code

Run the Lighthouse audit against a page.

lighthouse https://www.example.com --view
Copy the code

Pass the –help flag to see the available input and output options.

lighthouse --help
Copy the code

For some options that are not clear, you can click this link:

Github.com/GoogleChrom…

Suppose we review it, and we get this result:

With six Metrics in total, Lighthouse 6.0 introduces three new Metrics in the report. Two of the new metrics — maximum Content-painting (LCP) and Cumulative layout Offset (CLS) — are lab implementations of Core Web Vitals.

So let’s look at what these Metrics mean.

Several Metrics

First Contentful Paint (FCP)

The First Content-rich Drawing (FCP) metric measures how long it takes for any part of the page content to appear on screen from the start of the page. For this metric, “content” refers to text, images (including background images), elements, or non-white elements.

In the load timeline above, FCP occurs in frame 2, just as it does when the first text and image elements are rendered to the screen.

You’ll notice that while some content is rendered, not everything is rendered. This is an important difference between First Contentful Paint (FCP) and Largest Contentful Paint (LCP) — the purpose of LCP is to measure when the main content of a page has finished loading.

Knowing the concept, how to measure FCP, we can access to Field Tools and Lab Tools

To measure FCP in JavaScript, you can use the Paint Timing API. The following example shows how to create a PerformanceObserver that listens for a paint entry named First-Contentful-Paint and logs it to the console.

new PerformanceObserver((entryList) = > {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint'.buffered: true});

Copy the code

Speed Index

The speed index is one of six metrics tracked in the Performance section of the Lighthouse Report. Each of these metrics reflects some aspect of page loading speed.

So how does it detect that?

The Speed index measures how fast content visually appears during page loading. Lighthouse starts by capturing a video of a page loading in the browser and calculating the visual progress between frames. Lighthouse then uses the Speedline Node.js module to generate a speed index score.

As for the specific calculation, you can refer to the code in GitHub, which will not be expanded here.

So is there a chance we can improve its performance?

Use the “Opportunities “section of the Lighthouse Report to determine which improvements will be most valuable to your page. The more important the opportunity, the greater the impact on the performance score. For example, as the Lighthouse screenshot below shows, eliminating rendering blocking resources will result in the greatest improvement.

Largest Contentful Paint (LCP)

The Maximum Content Drawing (LCP) metric reports the rendering time of the largest image or block of text visible in the viewport relative to the time the page first started loading.

As you can see from the graph, in order to provide a good user experience, websites should strive for a maximum content format of 2.5 seconds or less.

For more, watch Paul Irish’s in-depth look at the LCP.

www.youtube.com/watch?v=diA…

Cumulative Layout Shift (CLS)

The official explanation for it:

Cumulative Layout Shift (CLS) is a measurement of visual stability that quantifies the visual movement of page content. It quantifies how much content on a page moves visually.

The simple understanding is:

CLS measures the sum of all individual layout change scores for each unexpected layout change that occurs over the life of the page.

Layout offset occurs whenever a visible element changes its position from one render frame to the next. For information on how to calculate a single layout offset score, see below).

web.dev/cls/

From the graph above, a low CLS score is a signal to developers that their users are not experiencing unnecessary content movement; A CLS score below 0.10 is considered “good.”

Total Blocking Time (TBT)

Let’s take a look at the official interpretation:

Total Blocking Time (TBT) quantifies load responsiveness and measures the Total Time that the main thread is blocked long enough to block input responses. TBT measures the total time between the first painting with content (FCP) and interaction time (TTI). It is a companion metric to TTI, and it brings more nuance to quantifying mainthread activities that hinder users’ ability to interact with your pages.

In addition, TBT has a good correlation with First Input Delay (FID), an on-site indicator of core network vitality.

For more information, please refer to:

web.dev/tbt/

Updated scoring Criteria

The performance score in Lighthouse is calculated from a weighted mix of metrics that sum up the speed of a page. The performance score of 6.0 is formulated as follows.

Phase Metric Name Metric Weight
Early (15%) First Contentful Paint (FCP) 15%
Mid (40%) Speed Index (SI) 15%
Largest Contentful Paint (LCP) 25%
Late (15%) Time To Interactive (TTI) 15%
Main Thread (25%) Total Blocking Time (TBT) 25%
Predictability (5%) Cumulative Layout Shift (CLS) 5%

Will you be the same as me? We can’t modify the weight, of course we can try:

Googlechrome. Making. IO/lighthouse /…

Click on the link above to display this screen:

This website publishes a scoring calculator to help you understand performance ratings. It also gives you a score comparison of Lighthouse version 5 and 6. When you audit with version 6.0 of Lighthouse, there is a link in the report that links to the computing tool and fills in the results.

The last

Given how Lighthouse works and its key metrics, you’ll be left wondering:

  • How do I calculate their exact values, there’s a JavaScript API?
  • Given that you can use Lighthouse to measure performance and find opportunities to speed up page loading, how can we optimize it?

You must see here, you encounter the same doubts as before, so how to solve.

Well, the above part has not been expanded in detail. For the rest, try to look through the official documents and check the materials, and you will gain a lot.

It is very simple and easy to use. I will continue to comb through it later. The mind map is here:

Docs.qq.com/mind/DWnljW…

I’m TianTianUp and I’ll see you next time!!

reference

[1] Lighthouse performance scoring: web.dev/performance…

[2] GoogleChrome – lighthouse: github.com/GoogleChrom…

[3] What’s New in Lighthouse 6.0: web. Dev/Lighthouse -…

[4] Measure: web.dev/measure/

[5] How does Lighthouse work? : github.com/GoogleChrom…

[6] Largest Contentful Paint (LCP): web.dev/lcp/

[7] Total Blocking Time (TBT): web.dev/tbt/

[8] Cumulative Layout Shift (CLS): web.dev/cls/

[9] First Contentful Paint (FCP): web.dev/fcp/

[10] Speed Index: web dev/Speed – Index…