The introduction

In your daily work, you might get feedback from users: “Dude, your site feels clunky!” . This kind of ridicule from users can be said to be a direct impact on the front of the students. At this point, we should think about how to let users no longer appear such ridicule. The first is to understand their own site index.

Commonly used metrics

You can combine two graphs

The first graph is a timeline of the browser loading the entire page, and the second graph is a metric that Google is pushing to describe page performance in four visual feedback stages.

Summarize common performance metrics

  • White screen time: The white screen time is the time between the browser’s response to the user’s input of the URL and the browser’s rendering of the content.
  • First screen time: The first screen time refers to the time between the browser’s response to the user’s network address and the completion of the first screen rendering. It’s usually when the image in the first screen has finished loading, which we think is the end of the first screen.
  • Full loading time: After the DOM Tree is built, the page resources start to be loaded. After the page resources are fully loaded, the page is fully loaded from the start to this point.
  • Interaction time (TTI) : The time when the user can first interact with the interface
  • Slow session Long Tasks: RAIL has requirements for corresponding user input within 100 ms. If the response time exceeds this, it is a slow session
  • FPS: Render frame rate, animation lag

How to collect indicator data

Performance_API

PerformanceTiming there are many indicators in PerformanceTiming. Select a few that are commonly used.

  • PerformanceTiming. ResponseStart: back to the browser (or read from the local cache) received from the server when the first byte of the Unix millisecond time stamp. This can be used to reflect the server or CDN response metrics.
  • PerformanceTiming. DomInteractive: returns the DOM structure for the current page over parsing, start loading time embedded resources, the user can start to input the timing of the interaction
  • PerformanceTiming. LoadEventEnd: the whole point in time by the end of the page is loaded

White screen time collection

Can use window. Performance. GetEntriesByType (‘ paint ‘) returns the FP and FCP

First screen time collection

The first screen time needs to be measured in two ways, one is the image loading and one is the DOM rendering. Pictures of loading time can use window. Performance. GetEntriesByType (‘ resource ‘) have a look at the results returned

The DOM part uses a MutationObserver to listen for DOM changes.

In addition, given that it is the first screen, we need to use getBoundingClientRect to determine if the element is in the first screen. Finally, take the larger value of the two parts of time

As an extension, if you have other resources on your front screen and you want to make sure that the load time is longer than the image load, you can refer to the load time of different resources

TTI collection

Tti collection libraries are very simple to use

import ttiPolyfill from './path/to/tti-polyfill.js';

ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => {
  // Use `tti` value in some way.
});
Copy the code

Long task collection

const subscribeBtn = document.querySelector('#subscribe');

subscribeBtn.addEventListener('click', (event) => {
  // Event listener logic goes here...

  const lag = performance.now() - event.timeStamp;
  if (lag > 100) {
    ga('send'.'event', {
      eventCategory: 'Performance Metric'
      eventAction: 'input-latency',
      eventLabel: '#subscribe:click',
      eventValue: Math.round(lag),
      nonInteraction: true}); }});Copy the code

FPS

Since requestAnimationFrame is called before each frame is rendered, the FPS calculation depends on it.

var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();
  
var loop = function () {
    var now = Date.now();
    var fs = (now - lastFameTime);
    var fps = Math.round(1000 / fs);
  
    lastFameTime = now;
    allFrameCount++;
    frame++;
  
    if(now > 1000 + lastTime) {var FPS = math.round ((frame * 1000)/(now-lasttime)); frame = 0; lastTime = now; }; window.requestAnimationFrame(loop); } loop();Copy the code

The resources

www.cnblogs.com/wmhuang/p/1… www.jianshu.com/p/456e6eff5… www.cnblogs.com/coco1s/p/80…