preface

Lighthouse is an open-source automation tool released by Google Chrome. It collects multiple modern Web page performance metrics, analyzes the performance of Web applications, and generates reports, providing developers with a reference point for performance optimization.

It can be used directly in Chrome DevTools.

Click “Generate Report” to get a page performance analysis report.

Here is the nuggets official website as an example

We see that “Performance” has a poor score of 36. Let’s see how we can optimize it. Click on it to drill down.

Here are 6 metrics, which means you can optimize performance in these areas:

  • Frist Contentful Paint (FCP)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)
  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • Speed Index

This paper introduces the meanings and optimization methods of the above six indicators.

Frist Contentful Paint (FCP)

meaning

The point at which the first element on the page is drawn. “First element” refers to text, an image (including a background image), a < SVG > element, or a

element that is not white.

How to optimize

  • Remove resources blocking rendering
  • Reduce code size
  • Preload resources with key requests
  • Keep the number of requests low and the transfer size small

Time to Interactive (TTI)

meaning

Responds smoothly to user interaction times.

Calculation method:

  1. Starting from the FCP

  2. Find the first quiet window for 5s in a row (quiet window means no long task and no more than two Get requests)

  3. Work backwards from the quiet window to find the last long task

  4. The point at which this long task ends is TTI

How to optimize

  • Reduce JS volume and execution time
  • Reduce the impact of third-party code
  • Preload key requests
  • Keep the number of requests low and the transfer size small

Total Blocking Time (TBT)

meaning

Total blocking duration refers to the total duration of the main thread being blocked between FCP and TTI.

The blocking time of a single long task = the blocking time of a long task -50 ms, and TBT is the sum of these blocking times.

For example, the following timeline shows the execution of the main thread task:

There are five tasks on the timeline, three of which are long tasks, as these tasks last more than 50ms. The following figure shows the blocking times for each long task:

Thus, although the total time spent running tasks on the main thread is 560ms, only 345ms of that time is considered blocking time (TBT).

How to optimize

  • Reduce the impact of third-party code
  • Reduce JS execution time
  • Minimize main thread work
  • Keep the number of requests low and the transfer size small

Largest Contentful Paint (LCP)

meaning

Maximum content drawing refers to the point in time at which the largest picture or text on a page is drawn. In the following two images, the largest element is the Instagram logo and a piece of text in the Google search page respectively, so LCP is the loading point of these two elements.

How to optimize

  • Optimize key render paths
  • Optimizing CSS
  • To optimize the image
  • Optimize web fonts
  • Reduce JS volume

Cumulative Layout Shift (CLS)

meaning

Cumulative layout offset, which measures the maximum sequence of layout offset scores for all unexpected layout offsets that occur over the life of the page.

Layout offset occurs every time the position of a visible element changes from one rendered frame to the next.

For example, text can shift without warning, so that it can’t find the previous reading position. Or you’re about to click on a link or a button, but the moment your finger drops, the link shifts and you click on something else.

How to optimize

  • Set width and height on the image and video elements to allow space
  • Ensure that any layout offsets are expected, and never insert content above existing content except in response to user interaction.
  • Using transform Animation

Speed Index

meaning

Is a measure of how fast the visual area of a page loads. It only focuses on the viewable area of the page.

How to optimize

  • Minimize main thread work
  • Reduce JS execution time
  • Ensure that the text is visible when the custom font is loaded (the system default font can be displayed when the font is loaded)

conclusion

According to the above 6 indicators, we can simply clarify the optimization ideas:

  • Finish rendering the page content as soon as possible
    • Start rendering as soon as possible (optimize FCP)
    • Finish main content rendering as soon as possible (optimize LCP)
    • Render everything as quickly as possible (Speed Index optimization)
  • Reduce long tasks
    • Execute tasks early (optimize TTI)
    • Break long tasks into smaller ones (optimized TBT)
  • Ensure page layout stability (optimizing CLS)

❤ ️ support

If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation.

As for me, I am currently a front-line developer of Bytedance, working for four and a half years. I use React in my work and like Vue in my spare time.

At ordinary times, I will share and summarize the thinking and practice of front-end work in depth from time to time. The public account “Xiao Li’s Front-end cabin”, thank you for your attention ~