Measurement of performance

RAIL model

  • Response: Respond to any user input within 100ms

  • Animation: Each frame is completed in 16ms

  • Idle: maximizes the Idle time. The number of tasks to be executed in the Idle time is less than 50ms

  • Load: finish loading our site within 1s

PWA (Progressive Web Applications)

squoosh.app/

User experience-centric metrics

  • FCP: time of first content drawing

  • LCP: Maximum content drawing time

  • FID: initial input delay

  • TTI: page interaction time

  • TBT: the total blocking time of the main thread

  • CLS: indicates the cumulative layout offset

The next generation of Web performance experiences and quality metrics: Core Web Vitals

With so many performance metrics that we don’t know where to start? Google introduced Core Web Vitals in May 2020 with the goal of simplifying scenarios and reducing learning costs. Core metrics apply to all Web pages:Performance metrics at the core of a web page should evolve over time. The current year 2020 focuses on three aspects of the user experience — loading, interactivity, and visual stability.

Google plans to include Core Web Vitals as a factor in its web ranking algorithm in 2021.

web-vitals

Performance monitoring of two wagons

In terms of technology, front-end performance monitoring is mainly divided into two ways, one is called synthetic monitoring, the other is real user data monitoring.

Both monitoring methods have their pros and cons. Depending on your purpose, synthetic monitoring is more about improving performance and providing guidance for areas where performance is lacking.

Synthetic monitoring practices in the industry

1. Lighthouse (Google)

2. Bce (Political Cloud Team)

How to implement synthetic monitoring

The business model

1. Analyze business pain points

  • Object oriented
  • Usage scenarios
  • Collect user ridicule point

2. Different business uses different detection models

  • Front desk guide page

  • Center form page

The technical implementation

1. Overall Structure:

2. Implementation ideas:

  • puppeteer

  • lighthouse

const puppeteer = require('puppeteer'); const lighthouse = require('lighthouse'); const {URL} = require('url'); (async() => { const url = 'https://www.chromestatus.com/features'; Const browser = await puppeteer.launch({headless: false, defaultViewport: null,}); Browser. on('targetchanged', async target => {const page = await target.page(); if (page && page.url() === url) { do something } }); Const {LHR} = await lighthouse(url, {port: (new url (browser.wsendpoint ())). Port, output: 'json', logLevel: 'info', }); console.log(`Lighthouse scores: ${Object.values(lhr.categories).map(c => c.score).join(', ')}`); await browser.close(); }) ();Copy the code

Performance Optimization Suggestions

Collect performance optimization suggestions from the industry and provide suggestions for improvement based on different performance problems. Form a library of your own team

conclusion

Through a performance monitoring system, developers can clearly know: what’s wrong with the page? What should I change?

Recommend the article

PWA is used in real combat

How does Ant Financial monitor the front-end performance to the extreme?

How to build a performance detection system from 0 to 1

In-depth understanding of front-end monitoring

What can Puppter do