Test the performance of the front-end using Sitespeed.io

Web app development has been advancing with new innovations each day. Many industries are utilizing web and mobile app development to digitalize their systems.

Due to digitalization, web apps should perform quickly. It is important that the end user does not have to wait too long for the full page and all web application components to load.

A slow-loading website will cause users to go to another site that loads faster.

What is Sitespeed.io?

Sitespeed.io is an open-source tool. We can measure the performance of web apps with Sitespeed.io.

Why Sitespeed.io?

Markets offer a wide range of paid tools for front-end performance testing. However, Sitespeed.io is an open-source tool. It’s easy to use. It generates HTML reports with attractive UI and charts.

How can we do the performance test with sitespeee.io using the docker container?

Pre-requisites:

1. Make sure you have the Docker desktop installed before running this. (if you haven’t installed docker so refer to this link to download and install the docker: https://www.docker.com/products/docker-desktop)
2. A login.js file is created with the code below.

module.exports = async function(context, commands) {
  await commands.navigate(
    'https://opensource-demo.orangehrmlive.com/web/index.php/auth/login'
  );
  // Add text into an input field y finding the field by id
  await commands.addText.byName('Admin', 'username');
  await commands.addText.byName('admin123', 'password');

  // find the sumbit button and click it
  await commands.click.byXpathAndWait('//button[normalize-space()="Login"]');

  await commands.wait.byTime(10000);
  return commands.wait.byXpath('//p[@class="oxd-userdropdown-name"]', 10000);
};

Below is a command that can be used to generate a performance report.

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:26.1.0 --preScript login.js https://opensource-demo.orangehrmlive.com/web/index.php/dashboard/index

sitespeed.io command Executions

After you run the commands, it takes a few minutes for the full HTML report to be generated. In addition to HTML reports based on pages, it can create summaries and waterfall charts for API responses.

Looking at the snapshot below, you can see how long it takes to load the full page with other different insights about the performance.

With the help of this report, we can get insights into where the APIs call, taking the time to get the response. We can see the Filmstrip, how long it will take, and see the page loading each second, etc.

Many things are included in the reports that really help to debug, and based on the insight, we can show them to the dev team for further improvement in performance.

Sitespeed.io really did a great job with these performance tools and so much detailed and attractive HTML reports with so much insight.

Conclusion:

A Web application’s quality and performance are important. for performance testing, there are many tools and techniques are available. However, sometimes we need a quick report or insight for page load time and API response. This is when Sitespeed.io comes into the picture.

With Sitespeed.io, we can get a high-level report on the performance of any web application. Using sitespeed.io, You can generate a report in a few minutes.

Happy Testing…

Follow Simform Engineering to keep up with the latest trends in the Software Testing.