Single Page Application (SPA) Performance Testing strategy is slightly different from performance testing of traditional application.

What is SPA?

A Single Page Application is a web application that works on a browser but dynamically loads parts of the page without loading the entire page from the server. This improves user experience as it avoids page rendering time making the web application behave like a desktop application.

In SPA, the required application code to be rendered in the browser, including the client side Javascript framework gets download during the first page load (hard navigation) & then for subsequent downloads (soft navigation), required data is dynamically loaded & added to the page as & when necessary. Most of the web resources like HTML, CSS, framework, etc are downloaded only once for the application during first time page load. Due to this reason, SPA have slow first page load than the traditional web applications. If any user disables JavaScript in the browser, then SPA will not be able to work correctly on the browser & is not very secure due to XSS attacks.

As SPA provides everything from a single page, the complexity & time involved to load the first page is high. Soft navigations (data or views or routes demanded by each user based on the usage flow) leads to Ajax calls or JavaScript executions. This means, for each user navigation (route change), a visual update is dynamically fetched from server without changing the page URL.This leads good performance improvement as the browser doesnt need to render the complete HTML page again re-parsing all the page components.

If a user performs soft navigation, browser will not fire a 'onload' event again, hence its not possible to know when all the static content was fetched & completely loaded on the page. Hence in SPA, monitoring the SPA framework's routing events is necessary to indicate the change in the view. For example, AngularJS will trigger 'routeChangeStart' event when the view is changing. Hence, SPA applications might not be accurately tracked by traditional user traffic analytics solutions / RUM tools.

SPA can be implemented using AJAX or Javascript frameworks like AngularJS, Ember.js, Meteor.js, Vue.js, React.js, KnockOut.js , etc.

Will Performance Testing Tool (say JMeter) capture client-side rendering time ?

A Performance Testing Tool (like JMeter) is not a browser. It does support browser actions (like caching & cookies management) to bring in realistic traffic simulation as created by real time users during load test, however the tool does not perform all the actions supported by browsers. In particular, JMeter will not execute the Javascript nor render the HTML pages or understands the form logic as done by a browser. Hence, the time taken at the client-side is not included in the response time reported by JMeter. The response time reported by JMeter only includes the network latency time & server processing time (it is not end to end response time perceived by the real end user).

It is a not a limitation of the tool. But JMeter is not primarily developed for that. It is primarily developed to test the server performance & scalability characteristics by capturing web server protocol level network communication (between client & server).

Hence, if you are performance testing a SPA, we cannot expect JMeter to execute the client side scripts & report the response time as perceived by the real end users of the application.

So, how to measure Client-side Page rendering time during Performance tests?

It is essential to measure the real time user experience when we test the system to certify it for its performance & scalability characteristics. Hence, we can use a different approach to include additional test elements/protocols to capture the client-side page rendering time along with server-side performance analysis elements/protocols.

In JMeter, WebDriver Sampler can be used to measure the response time on a real time browser. [Note : Incase of Microfocus LoadRunner, Truclient protocol can be used to capture the user interactions interactively as it allows user to select the objects manually and automatically].

This means, response time reported by WebDriver Sampler will include client-side page rendering time + Network Latency (to & fro) time + Server processing time whereas response time reported by HTTP Sampler will include Network Latency (to & fro) time + Server processing time.

By using a WebDriver sampler under a separate thread group for 1 user along with other thread group(s) created as per the workload model, we can measure the real time user experience (browser rendering time) along with server performance characteristics. While running load test with WebDriver Sampler, remember each User / Thread creates a new browser instance by loading the DOM & JavaScripts are executed on each browser instance. This leads to larger resource footprints than traditional web tests run using HTTP Sampler. Hence, it is not advisable to run the load test with more users / threads on Webdriver sampler. It is enough to capture the client-side rendering time by running the webdriver sampler for 1 or 2 users.

A SPA loads all static contents (like a traditional MPA) followed by the client-side Javascript framework (like AngularJS) & immediately 'onload' event is fired. Once the framework is loaded, it starts looking for the routes to fetch required data. Whereas in a traditional MPA application, onload event is fired once all the static resources are fetched. This onload event triggered time is used to measure the page loading time by Real User Monitoring tools. Hence, user experience of single page application cannot be measured by the traditional Real User Monitoring (RUM) tools.

As there is no explicit call made to load additional pages (soft navigations), a RUM tool requires to capture additional metrics about loading & unloading of the views. 'Visually Complete' becomes one of the key metric in SPA. Tools like CatchPoint can help in providing in-depth details about each hard & soft navigations. Also Boomerang offers several plugins for SPA performance monitoring. Boomerang plugins are available for SPA frameworks, such as AngularJS, Ember.js and Backbone.js. When these plugins are enabled, Boomerang can track both first (hard navigation) & each soft navigations.