The preface

In front-end development, I believe that we have to pay attention to their own development of the website or App performance problems, this should be most front-end development is very concerned about the topic. Of course, performance is generally referred to as page load time, data response time, interactive experience… Therefore, we need professional testing websites rather than random ones. Of course, the websites or tools for front-end performance testing in the market are customized based on PerformanceTiming and PerformanceEntry.

Let’s take a look at some common terms for Chrome Performance

FP (First Paint)For the first time to draw

FP (First Paint) : Marks the point at which the browser renders anything that is visually different from the content on the screen before navigation.Copy the code

FCP (First Contentful Paint)First content drawing

FCP (First Contentful Paint) marks the point in time when the browser renders the First content from the DOM, which could be text, image, SVG, or even an element.Copy the code

LCP (Largest Contentful Paint)Max content rendering

LCP (Largest Contentful Paint) Maximum Content Rendering: Represents the maximum loading time of a page element in the viewport. The LCP data is recorded through the PerformanceEntry object, and each time a larger rendering of content occurs, a new PerformanceEntry object is created.(Added November 2019)Copy the code

DCL (DomContentloaded)

DCL (DomContentloaded): The DomContentloaded event is fired after the HTML document has been fully loaded and parsed, without waiting for stylesheets, images, and subframes to complete loading.Copy the code

FMP(First Meaningful Paint)First effective drawing

FMP(First Meaningful Paint) works for the First time: for example, on YouTube viewing pages, the main video is the main character element. Look at the CSDN website is not very obvious, these several into a time line, take a look at Weibo. As you can see in the sample graph below, weibo posts are the main elements.Copy the code

Speed Index

First screen display timeCopy the code

TTI (Time to Interactive)

The point in time at which the page resource loads successfully and responds to user interactionCopy the code

TBT (Total Blocking Time)

The sum of the time that the main thread was blocked by long task(more than 50ms) between FCP and TTICopy the code

CLS (Cumulative Layout Shift)

Cumulative layout offsetCopy the code

Understand the above concepts can read the test report

Lighthouse- The protagonist of this article

  • Lighthouse is an open source Web product experience tool developed by Google.
  • Definition: Lighthouse analyzes Web applications and Web pages, gathering modern performance metrics and insights into developer best practices, enabling developers to refine and improve the user experience based on the generated assessment pages.
  • This section describes the test report screenshot

  • The above reports helped us generate test reports from FCP,SI,LCP,TTI,TBT and CLS, which were introduced above. Let’s talk about them belowLighthouseHow to use

Use it in chrome Developer Toolslighthouse

  1. Go to the Chrome App Store and install it
  2. Next open the F12 developer tool we can see it, open the site that requires a medical examination, can instantly generate online reports

Run on the command line

Using the Node CLI, you can specify specific parameter information and output multiple report files (HTML by default) at the same time, providing great flexibility.

  1. The global download
npm install -g lighthouse
yarn global add lighthouse
/ / a choice
Copy the code
  1. Execute the command
Lighthouse < url >Copy the code

  1. Report generation, make sure your url can ping normally, below is the test report address

At this point you should be able to use developer tools or the command line to check out your site. Go ahead and try it out

About optimization?

  • There will be corresponding optimization suggestions in the test report, and performance optimization can be carried out according to his suggestions. Maybe the words we usually talk about will be forgotten in the project. We need to be careful and rigorous in the project, and be good at finding problems and summarizing problems

FAQ

  • The Lighthouse development team has a list of frequently asked questions (FAQs) for those interested

The above.