Performance optimization metrics and tools

Performance indicators and optimization objectives

Network

• Queueing： Resources need to be queued before they can be sent from the browser , The browser prioritizes resource requests , High priority content is scheduled to be requested first

• DNS Lookup： Each resource actually has a domain name , The domain name will eventually be translated into IP, Then find the server

• initial connection： After finding the resources , The process of establishing a link between the client and the server

• SSL： Some websites are https, For safety reasons , Used SSL certificate , Security verification is required , The process is called SSL write

• Request sent： Request to send out

• Waiting(TTFB)： The waiting time between sending out the request and the real return of the resource , How long does it take from the time the request is sent to the time the request comes back , If TTFB High words , Equivalent to a request sent to , Resources never came back , A browser is a white screen

  The main influencing factors ： Background processing capacity , How fast the server responds ; The second is resources , Send out request , Will there be any delay in coming back

• Content Download： download , If the longer the blue bar , The greater the resources , The longer you wait . If you have been downloading , The following resources cannot be loaded

• DOMContentLoaded：DOM Load complete time

• Load： The completion time of loading all resources on the page

If Network The content is more , You can save the results first , Right click the blank space ,Save all as HAR with content

Lighthouse

indicators

• Performance： performance
• Accessibility： Accessibility
• Best Practices： Best practices
• SEO： Do you optimize the search engine
• Progressive Web App(PWA)： Incremental application value , Including offline access to customers

Measure （Metrics）

• First Contentful Paint： The time when the first drawing with content appears
• Speed Index： Speed index , The speed index standard is 4s

Interactive experience

stay Network Li press Ctrl + Shift + P, Input frame, Select the red box in the figure below

Monitoring will appear in the upper left corner

RAIL Measurement model

• Response Respond to
• Animation Animation
• Idle Free
• Load load

Respond to

• The event should be handled in 50ms Finish within
• The maximum delay that the user can accept is 100ms, So the user actions used , Must be in 100ms Internal feedback （ The time it takes for the user to give feedback after entering the interaction and input ）

Animation

• Every time 10ms Produce a frame
• It actually takes some time for the browser to get each frame , Probably 6ms about

Free

• Increase your free time as much as possible
• If the lead time 50ms, The processing time 50ms, The user interaction bar has no time to deal with , The user will feel stuck after clicking , The content to be used later can be recorded slowly in your spare time

load

• stay 5s Complete the content loading and can interact within
• One level ： To complete the content loading , this 5s It's not just loading , After loading, you have to parse , Render after parsing , All this time counts ; Another level ： Using mobile devices , The network environment may be poor , For example, use 3G

Performance measurement tools

• Chrome DevTools： Development and debugging 、 performance evaluation
• Lighthouse： Overall website quality evaluation
• WebPageTest： Multiple test sites 、 Comprehensive performance report

WebPageTest

Website ：WebPageTest

• Test Loaction： Address of the test
• Browser： browser
• Connection： Configure the network connection
• Number of Tests to Run： Number of test rounds
• Repeat View： Results view , Usually choose First View and Repeat View, Users visit the page for the first time and visit it for the second time , Compare the two views , You can see whether the cache is doing well
• Capture Viedo： Capture video , Through this video, you can intuitively understand your users' access experience on this specified device

• First Byte： The first request sent , How long does it take to get a response , It reflects the processing capacity of the background and the network loop
• Start Render： First screen time , Refers to the time it takes to see the content , Instead of always white
• Speed Index： Speed index （4s within ）
• Total Blocking Time(TBT)： The page is blocked , Users cannot interact , How long does this time accumulate

• Waterfall View： Click the waterfall chart to view the details

• Browser Main Thread： Main thread occupancy
• CPU Utilization： bandwidth 、CPU The occupancy of
• Picture resources have concurrent parents , It saves a lot of time
• There may be a yellow background , It is marked with （302）, The resource no longer requests the location , Redirection is required to find the real location , This suggests that this place can be optimized

Deploy WebPageTest

Windows10 Open down Docker Desktop, Then pull the image

docker pull webpagetest/server
docker pull webpagetest/agent

After pulling the image , You can run

docker run -d -p 4000:80 webpagetest/server
docker run -d -p 4001:80 --network=“host” -e “SERVER_URL=http://localhost:4000/work/” -e “LOCATION=Test” webpagetest/agent

Windows The computer can be configured here to use ,MacOS There are other configurations that need to be done

• First, do Server To configure

mkdir wpt-mac-server
cd wpt-mac-server

vim Dockerfile Create a file and edit it to add the following ：

FROM webpagetest/server
ADD locations.ini /var/www/html/settings/

vim locations.ini Create a file and edit it to add the following ：

[locations]
1=Test_loc
[Test_loc]
1=Test
label=Test Location
group=Desktop
[Test]
browser=Chrome,Firefox
label="Test Location"
connectivity=LAN

Local build Mirror image

docker build -t wpt-mac-server .

• Then do Agent To configure ,vim Dockerfile Create a file and edit it to add the following ：

FROM webpagetest/agent
ADD script.sh /
ENTRYPOINT /script.sh

vim script.sh Create a file and edit it to add the following ：

#!/bin/bash
set -e
if [ -z "$SERVER_URL" ]; then
echo >&2 'SERVER_URL not set'
exit 1
fi
if [ -z "$LOCATION" ]; then
echo >&2 'LOCATION not set'
exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; then
EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
fi
python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none

Then add execution permission to the script

chmod u+x script.sh

Then local build that will do

docker build -t wpt-mac-agent .

adopt docker ps View all running instances ,docker stop xxx You can stop the instance

LightHouse

npm install [email protected] -g
lighthouse http://www.bilibili.com

After use, a browser will be opened for testing , The browser will close automatically after the test , Generate html Output results are generated to Printer html output written: ..., Copy the address to the browser to see the contents of the test report

Let's take a look at the performance of the website

• First Contentful Paint： The first drawing time with content
• Speed Index： Speed index , How long will users see all the visible content on the page
• Largest Contentful Paint： How long did it take the largest of all visible resources to see
• Time to Interative： When can users interact with your website

Opportunities Will provide some optimization suggestions

• Remove unused Javascript： Remove unused JS
• Eliminate render-blocking resources： Reduce rendering blocking resources , Take a look at this JS Can I delay loading

How to identify a JS Is it necessary , After that, add rules that do not allow loading, such as ：log*.js, Then reload , Find out log*.js Unable to load , Go to the first screen to see if it is affected

Use Chrome DevTools Analysis performance

Network Each resource in the has some attributes ： Resource name 、 size 、 Total time

• When compression is enabled in the background （express Use compression middleware ） You can compress the network transmission resources
• Although the actual size is 1.4M, When transmitting over a single network, only 429K, It greatly reduces the size of network transmission resources

Performance Click the filled circle to start recording , Everything that happens on the page during this process, including your interaction , Will be recorded , Until you click stop , Everything that happens during this process will produce a detailed performance report ; Another way is to click the refresh button , Will refresh our page , Record everything that happens from the beginning of page refresh to the completion of all resources loading , Then conduct performance analysis

• Main The main thread , You can see that over time , What tasks the main thread does . It is a stack like structure from top to bottom , Each invocation relationship clearly shows , For example, let's do a Task,Task There will be some related calls , List our calling relationships layer by layer , All the way to the end
• Timings Key event nodes ,DCL Namely DOM Load complete time , What did it do before it happened

Network throughput ： We can adjust our current network status , Simulate user network conditions

• Download：4G The download speed is about 5~12M
• Upload：4G The uplink speed is generally 2~5M
• Latency： The delay needs to consider the signal of the user's location

Common performance measurements APIs

Performance measurement tools have some key time nodes , such as ：TTFB、 First screen , These time nodes are through the browser

// load Trigger after event 
window.addEventListener('load', e => {
    
  // Time to Interactive  Interactive time 
  let timing = performance.getEntriesByType('navigation')[0]
  //  Calculation  tti = domInteractive - fetchStart
  let tti = timing.domInteractive - timing.fetchStart
  console.log('TTI', tti)
})

performance API Some common time calculation rules ：

// DNS  Analytical time consuming :
domainLookupEnd - domainLookupStart
// TCP  Time consuming to connect :
connectEnd - connectStart
// SSL  Secure connections take time :
connectEnd - secureConnectionStart
//  Network requests take time  (TTFB):
responseStart - requestStart
//  Data transmission takes time :
responseEnd - responseStart
// DOM  Analytical time consuming :
domInteractive - responseEnd
//  Resource load time :
loadEventStart - domContentLoadedEventEnd
// First Byte Time :
responseStart - domainLookupStart
//  White screen time :
responseEnd - fetchStart
//  First interactive time :
domInteractive - fetchStart
// DOM Ready  Time :
domContentLoadEventEnd - fetchStart
//  Page full load time :
loadEventStart - fetchStart
// http  Head size ：
transferSize - encodedBodySize
//  Number of redirects ：
performance.navigation.redirectCount
//  Redirection takes time :
redirectEnd - redirectStart

adopt performance Real time monitoring objects

//  adopt PerformanceObserver Get all the long tasks object 
let observer = new PerformanceObserver(list => {
    
  for (const entry of list.getEntries()) {
    
    console.log(entry)
  }
})
observer.observe({
     entryTypes: ['longtask'] })

What you do is join the video website , If users don't see your page anymore , At this time, we need to consider throttling , No more video content loading （ Can be done on the page Tab Switch test ）

let vEvent = 'visibilitychange'
if (document.webkitHidden !== undefined) {
    
  vEvent = 'webkitvisibilitychange'
}
function visibilityChange() {
    
  if (document.hidden || document.webkitHidden) {
    
    document.title = 'Web page is hidden'
  } else {
    
    document.title = 'Web page is visible'
  }
}
document.addEventListener(vEvent, visibilityChange, false)

If you know the current network status of the user , You can load targeted resources . For example, when the user's network status is bad, use a slightly blurred picture （ Go to Network To control network throughput for testing ）

let connection = navigator.connection || navigator.mozConnection
let type = connection.effectiveType
function updateConnectionStatus() {
    
  console.log('connection type changed from' + type + 'to ' + connection.effectiveType)
}
connection.addEventListener('change', updateConnectionStatus)