Yesterday after the bug was fixed, the test sister asked me to help her take a look at sitespeed. IO front-end performance testing tool, the sister is so beautiful, that of course can not refuse, get up, hahahaha!

Tool profile

Sitespeed. IO is an open source tool published by Jonathan Lee to monitor and measure the front-end performance of your web site. It helps you follow Coach’s performance best practices recommendations, Collect browser metrics using the navigation timing API, user timing, and visualization metrics (FirstVisualChange, SpeedIndex, and LastVisualChange) to help you monitor, analyze, and optimize site speed and performance.

This is sitespeed. IO

advantage

  • Open source (can be deployed locally to meet Intranet testing requirements)
  • Support for transaction simulation (you can simulate logins, click events, and so on through the API provided by it)
  • Automatic performance analysis (for online monitoring)
  • Multi-browser testing is possible

The working principle of

Sitespeed. IO is designed to detect and improve the performance of Web pages. Sitespeed has a suite of plugins, such as Coach, Broswertime, Chrome-har, and others, that help sitespeed collect browser debug data, give ratings and opinions based on site best practices, and visualize the data.

Sitespeed. IO evaluates web pages based on web requests and Time events in the TimeLine.

The Browsertime plug-in uses Selenium NodeJS to control the browser. The browser loads the specified page, executes the configured JS code, and collects the Time data triggered by each Time Event in the Timeline. At the same time, using Chrome-har plug-in to store the HTTP request process in the page. HAR file, for easy analysis, Sitespeed. IO uses PageXray plug-in to convert the. HAR file into JSON file; Then the Coach plugin scores according to the corresponding indicators, and makes suggestions for improvement!

reference

How to use

There are two ways to use the website: Docker and NPM. The website says that if you use NPM, you can see what happens in your browser window. Or if you use Docker, you can add Browsertime.videparameters.debug when you record a video. That way you can get the full video of all the scripts (but no visual metrics)! In this case, of course choose NPM, hahaha!

You can also use Docker

Docker

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:17.2. 0 https://www.sitespeed.io/
Copy the code

npm

The installation

npm install -g sitespeed.io
Copy the code

use

sitespeed.io https://www.sitespeed.io/ -b chrome
Copy the code

After executing the command, you will notice that it opens www.sitespeed.io three times. This is because it executes three times by default. You can also define your own statement to make it execute once, as follows:

sitespeed.io  -n 1 -v https://www.baidu.com
Copy the code

When it’s done, it will generate a report for you, and it will tell you the address of the report which is shown in the red box below

Click on index. HTML to see the full report! As follows:

You think this is done, of course not, in actual work, there is no such simple, all need to log in good! How to do? Sitespeed. IO allows you to write your own code.

First, you need to create a new login1.js file, and then write it

module.exports = async function (context, commands) {
  // Write the url of the site you want to test in parentheses
  await commands.navigate("https://a.b.com/");

  try {
  
    // Log in to the site you want to test with the username 007 and password 123456,
    
    //await commands.addText.byId('login', 'wpName1');
    //await commands.addText.byId('password', 'wpPassword1');
    // The above two lines are examples from the official website. In many cases, we do not know the id of the element, so I use byXpath. In actual use, please replace it with Xpath in the login box of your website
    
    await commands.addText.byXpath("007".'//input[@name="username"]');
    await commands.addText.byXpath("123456".'//input[@type="password"]');
    
    // Take a screenshot with the name 1, or no screenshot
    await commands.screenshot.take("1");


    await commands.measure.start("login");
   
   // Here is the click on the login button, again using byXpath
    await commands.click.byXpath(
      '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button'
    );
    
    // This is an example
    await commands.screenshot.take("2");
    
    // Wait 5 seconds, no need
    await commands.wait.byTime(5000);


    // Type a log. The log can be seen in the command line
    context.log.info("I'm a general log.");
    context.log.error("I'm an error log.");
    
    
    // Stop and collect the metrics
    return await commands.measure.stop();

  } catch (e) {
    // We try/catch so we will catch if the the input fields can't be found
    // The error is automatically logged in Browsertime an rethrown here
    // We could have an alternative flow ...
    // else we can just let it cascade since it caught later on and reported in
    // the HTML
    throwe; }};Copy the code

Now that the code is ready, let’s put this js in the same directory as sitespeed-result. My sitespeed-result folder is on my desktop, so I’ll put login1.js on my desktop.

Then, the command is executed

sitespeed.io  -n 1 -v  login1.js --multi
Copy the code

Then, you’ll find sitespeed will open the site you want to test for you, automatically write your username and password, complete the login, and finally generate a report!

And that’s not all, of course, but once we’ve logged in, we also want to click on each page and see how well each page is performing, so let’s write it like this

module.exports = async function (context, commands) {
  // Write the url of the site you want to test in parentheses
  await commands.navigate("https://a.b.com/");

  try {
  
    // Log in to the site you want to test with the username 007 and password 123456,
    
    //await commands.addText.byId('login', 'wpName1');
    //await commands.addText.byId('password', 'wpPassword1');
    // The above two lines are examples from the official website. In many cases, we do not know the id of the element, so I use byXpath. In actual use, please replace it with Xpath in the login box of your website
    
    await commands.addText.byXpath("007".'//input[@name="username"]');
    await commands.addText.byXpath("123456".'//input[@type="password"]');
    
    // Take a screenshot with the name 1, or no screenshot
    await commands.screenshot.take("1");


    await commands.measure.start("login");
   
   // Here is the click on the login button, again using byXpath
    await commands.click.byXpath(
      '//*[@id="root"]/main/section[2]/div/div[1]/div/div[4]/button'
    );
    
    // This is an example
    await commands.screenshot.take("2");
    
    // Wait 5 seconds, no need
    await commands.wait.byTime(5000);


    // Type a log. The log can be seen in the command line
    context.log.info("I'm a general log.");
    context.log.error("I'm an error log.");
    
    
    // Stop and collect the metrics
    await commands.measure.stop();


    // Open another page
    await commands.measure.start(
      'https://a.b.com/recommend/fields'
    );
    // Wait for 4 seconds
    await commands.wait.byTime(4000);
    
    // Open another page
    await commands.measure.start(
      'https://a.b.com/marketingCenter/officialAccounts/fans'
    );
    await commands.wait.byTime(4000);
    return commands.measure.start('https://a.b.com/loyaltyprogram/memberInsight/list');
    
  } catch (e) {
    // We try/catch so we will catch if the the input fields can't be found
    // The error is automatically logged in Browsertime an rethrown here
    // We could have an alternative flow ...
    // else we can just let it cascade since it caught later on and reported in
    // the HTML
    throwe; }};Copy the code

Then, the whole site page performance has…

Go test it and see the performance of your website!