UI performance testing: A comprehensive guide

The system’s development process typically follows several main stages. Broadly speaking, they are design, development, testing, and implementation. In years gone by, the design process focused mainly on technical and information processing issues, relegating user input to a minor task. As a result, developers guessed what users wanted by way of the user interface (UI). Therefore, many systems were modified when users were exposed to the developed system, setting out their requirements when reaching the testing phase. That usually meant extra costs and time delays.

We’ve moved on since then. Users nowadays are less tolerant of nonresponsive and difficult-to-navigate systems. Additionally, developers are aware of the time and cost implications of not including users.

Having user input in the design of the UI is now regarded as a key element of systems design, particularly for systems to be sold commercially. In parallel, UI testing has grown significantly in importance.

One area within UI testing is performance testing, where you evaluate how quickly and efficiently the UI responds to user interactions under various conditions and levels of user proficiency. This guide will walk you through the essential steps and tools for conducting UI performance testing.

What is UI performance testing and why is it vital?

A working definition of UI performance testing is that it assesses the responsiveness, speed, and stability of an application’s user interface. It focuses on user-centric metrics like load times, responsiveness to input, and smoothness of animations.

UI performance testing is vital because it

• ensures a positive user experience,
• identifies performance bottlenecks,
• helps maintain the application’s reputation, and
• reduces the risk of user abandonment due to poor performance.

UI vs. API performance testing

API performance testing involves simulating real-world traffic with virtual users. As the virtual users make calls to your API, you can observe how your API behaves under the load. This enables you to evaluate how well your API meets expectations for response time, throughput, and availability under various conditions.

API testing is usually carried out before UI testing to ensure that the application is stable and that it supports the required functionality.

Because API testing uses virtual users, it doesn’t test how well the UI meets the expectations of real users. The full test scenario will therefore include both API and UI testing.

Types of UI performance testing

Obviously, different types of tests are needed, as are metrics, to assess UI performance. The tests and metrics are defined and developed during the UI definition part of the design phase by and with users. It’s important to have precise definitions. Wishy-washy definitions like easy to use, quick, and the like are not appropriate in the test context. In commercial systems, while the look and feel of the UI is important, having end users comfortable with the UI is vital to commercial success. As noted above, a poor UI leads to abandonment or rejection.

You should also be aware that several UI test scenarios and sets of metrics will be needed in a multi-platform scenario. Many applications now need to be available for smartphone, tablet, and desktop environments in a variety of operating platforms, especially Android, Apple, macOS, and Microsoft Windows.

Tricentis has put together a useful primer on performance testing here.

Be aware that several UI test scenarios and sets of metrics will be needed in a multi-platform scenario.

Some Test Types

Tests and metrics can be classified into some main types. Subclasses will be needed for specific environments and applications.

Let’s take a look at some of the key types:

• Load time measures how long it takes for the UI to fully load and become interactive after a user initiates an action.
• Response time tracks the time taken for the UI to respond to user inputs (e.g., clicking a button).
• Frame rate evaluates the smoothness of animations and transitions by measuring the frames per second (FPS).
• Time to first byte (TTFB), for net-based applications, is the time taken for the browser to receive the first byte of data from the server.
• Rendering time is the time required to render visual elements on the screen.
• Memory usage measures how much memory is consumed by the UI during interaction.

This list is by no means exhaustive and focuses mainly on technical issues. Other application-specific metrics will be needed based on the application area. For example, search times or the time between screens as the user navigates through the application can be important. Specific tests and metrics will be developed based on user input.

It’s worth noting at this point that the tests and metrics for web-based applications will differ from those of standalone applications that don’t use a network or the internet. It’s also wise to remember that web-based applications are affected by circumstances outside their control, and test results will vary at different times, for example during the working day and outside working hours.

Steps to perform UI performance testing

Setting up the test environment is an art in itself. Identifying, documenting, and establishing the conditions to be tested can be an exercise in imagination. One technique that’s often used is the unknown user. This is a test scenario when someone completely new to the application tries to use it and documents the good and bad points. It can also be a useful test run of the user documentation for the application.

In broad terms, the activities will include the following.

Define Testing Objectives

Identify the key performance indicators (KPIs) and user interactions that need to be tested.

Set up the Test Environment

Ensure the testing environment mimics the production environment as closely as possible, including network conditions, hardware, and software configurations.

Select Testing Tools

Choose the appropriate tools based on the application’s technology stack and the specific performance metrics you aim to measure.

Create Test Scenarios

Develop test scripts that simulate real user interactions, such as navigating through different pages, clicking buttons, and submitting forms.

Execute Tests

Run the performance tests and collect data on the defined KPIs.

Analyze Results

Review the performance metrics to identify any bottlenecks or areas for improvement. For instance, tools like those provided by Tricentis provide suggestions on how to enhance UI performance.

Optimize and Re-test

Make the necessary corrections and optimizations based on the test results. Then, re-run the tests to ensure improvements.

Setting up the test environment is an art in itself.

Best practices in UI performance testing

Many years of setting up and running UI testing have generated a set of best practices. Here are a few:

• Test early and often: Integrate UI performance testing into the development life cycle to catch and fix issues early.
• Focus on critical user paths: Prioritize testing for the most critical user journeys that have the highest impact on user satisfaction.
• Consider network conditions: In networked and internet environments, simulate different network conditions (ethernet, 3G, 4G, Wi-Fi, etc.) to understand how the UI performs for users with varying network and internet speeds.
• Monitor continuous performance: Set up automated monitoring to continuously track the UI’s performance.
• Collaborate with developers: Work closely with developers to address performance issues and implement optimizations.

Best UI performance testing tools

Several testing tools are available. They can be multi-platform and multi-operating environments, or they can be specific to a particular environment or browser. A tool can be specific to a particular test area—for example, image rendering or memory usage—or can cover some or all test metrics.

Neoload

Applications are built differently for different environments and application areas, but they all need to perform. One market leader covering most test scenarios is Neoload from Tricentris. Neoload is a suite of tools that simplifies and scales performance testing for everything from APIs and microservices to end-to-end application testing through innovative protocol and browser-based capabilities.

Chrome

Internet-based and online applications typically work using a browser base. Whatever browser you use, browser testing is a vital component of creating a high-quality web experience, regardless of whether the tests are carried out manually or automatically. However, setting up an adequate browser testing environment is notoriously difficult, so much so that it’s consistently reported as a top web developer pain point.

To help ease the pain, Google has announced Chrome for Testing, a new Chrome extension that specifically targets web app testing and automation use cases.

Open-Source tools

If you have a one-off testing requirement, then buying a testing application might not be sensible. However, all is not lost. A wide range of free or low-cost open-source tools are available. They may not be as fully featured or focused as their commercial competitors, but they may be adequate.

A simple Google search for “UI testing open source tools” provides a comprehensive list.

Conclusion

UI performance testing is vital for delivering a fast, responsive, and user-friendly application. By following this comprehensive guide, you can ensure that your UI meets the high standards expected by users, leading to greater satisfaction and success for your application.

This post was written by Iain Robertson. Iain operates as a freelance IT specialist through his own company, after leaving formal employment in 1997. He provides onsite and remote global interim, contract and temporary support as a senior executive in general and ICT management. He usually operates as an ICT project manager or ICT leader in the Tertiary Education sector. He has recently semi-retired as an ICT Director and part-time ICT lecturer in an Ethiopian University.