Definition 1.

Accurately measure site performance

According to Google’s user-centric performance metrics, the following four questions should be answered

  1. Does it happen? Is navigation started successfully? Is the server responding?
  2. Is it useful? Has enough content been rendered to interact with the user?
  3. Is it available? Can the user interact with the page, or is the page still busy loading?
  4. Is it enjoyable? Is the interaction smooth and natural, with no lag and lag

1.1 Occurrence Or Not

When a user visits a web site, the first question of concern is always “does it happen” — whether the browser has successfully sent my request and whether the server has known about it and started processing it.

TTFB (Time to First Byte)

The time at which the first byte arrives.

FP (First Paint)

First drawn, marks the point in time when the browser renders any content that is visually different from the screen before navigation.

FCP (First Contentful Paint)

The first content rendering marks the point at which the browser renders the first content from the DOM, which could be text, images, and so on. Test the experience of loading speed and when the main content of the page is presented.

1.2 Useful

Once the user is sure that their request has happened, they begin to ask the second question: “Is it useful?”

For example, when a user is using a weather app, after confirming that the page is responding, they start to wonder, when can they show useful content

Knowing the weather today.

LCP (Largest Contentful Paint)

The maximum content rendering time calculates the maximum element rendering time between page loading and user interaction with the page (click, scroll). This time will change with page rendering, because the maximum element in the page may change during rendering.

SI (Speed Index)

The speed indicator, the speed of filling the page content, is the integral of the incomplete page at each moment from the start of loading to the end of rendering.

1.3 Availability

After the user has received useful information, the user will react based on that information, which is the “Is the page available?” For example, after seeing the news, you want to comment. TTI, FID and TBT are indicators to answer these questions.

TTI (Time to Interactive)

  • Interactive time, used to mark a point in time when the page has been visually rendered and can reliably respond to user input.
  • Pages can fail to respond to user input for a variety of reasons, such as the Javascript needed to run a page component not being loaded, or a long task blocking the main thread.
  • The TTI metric identifies the point in time when the page’s initial JavaScript is loaded and the main thread is idle (no longer consuming tasks).

TBT (Total Blocking Time)

The total blocking time is the total time that the main thread blocks from FCP to TTI. The blocking time refers to the portion of the main thread occupied by a single task that exceeds 50 ms.

FID (First Input Delay)

First input delay refers to the time when a user first enters a response to a page. We all know the importance of first impressions, and the same goes for websites. The first input delay can be an important first impression of a site, determining whether a user is likely to become a loyal user or leave. It’s worth noting that FID only focuses on discrete user actions such as clicks, taps, and keystrokes. Other interactions such as scrolling and zoomingare not FID’s concern, as browsers typically handle them in a separate thread.

1.4 Is it enjoyable

Whether the use is smooth, there is no unexpected visual deviation.

CLS (Cumulative Layout Shift)

Cumulative layout offset. Measures the sum of layout offset scores for each unexpected style move that occurs throughout the life of the page. Test the visual stability of the experience, how much of the content was accidentally offset.

For example, a middle content div is loaded at the top, and then the top bar is loaded, and the content div is stretched down. The amount of the content div is stretched is CLS.

2. Related tools

2.1 Google development tool Performance

Use the Performance analysis tool in Google Chrome to generate reports

2.2 lighthouse

Google Plug-in

Download from the browser extension gitee.com/mjsong/shar…

The node way

The installation

npm install -g lighthouse
Copy the code

Generate the report and open it in your browser

lighthouse http://kaikeba.com --view
Copy the code

The report format is JSON and is saved in the current directory

lighthouse http://kaikeba.com --output=json --output-path=./report.json
Copy the code

Set the browser window size

Lighthouse http://kaikeba.com - chrome - flags = "-- the window - size = 1190660"Copy the code

The simulator is set as the desktop

lighthouse http://kaikeba.com --emulated-form-factor=desktop
Copy the code

Common indicators

  • Perfermance performance analysis

  • Accessibility

  • Best Practices

  • SEO Search engine optimization

  • Whether Progressive Web App integrates PWA

2.3 Self-development

At the corresponding page burial point, at the beginning or request/end of data rendering place, unified collection through the interface background, through data analysis advantages real-time, real, comprehensive disadvantages: more dependence, high cost

2.4 Third-party testing tools

  • Ali cloud very different
  • NewRelic

Pros: Mature, fast

Cons: High cost