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.
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.
Will Performance Testing Tool (say JMeter) capture client-side rendering time ?
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.
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.