Blog: Testing Single Page Applications with SiteSpect

March 1, 2019

Share

The choice of technology for building a website will impact your consumer experience. At SiteSpect, we are seeing more digital businesses build Single Page Applications (SPA) as the architecture for an improved site experience. If you’re newer to the SPA world, in this blog we’ll break down what and SPA are and how they work, and how to optimize them if you’ve got them.

How does SPA work?

With an SPA site, all of the code is loaded on the initial call and the content is changed dynamically without requiring a page load. If there are requests to the origin after the initial load, they are generally API requests for fresh data. The application is controlled through JavaScript and many SPA sites use popular frameworks such as BackBone, Angular, or React. Also, many SPA sites use heavy browser caching and client-side templates to improve performance. One caveat is that while performance improves for the second and third click, the first click will have performance degradation due to the amount of data that is loaded. You can read SiteSpect’s break down on web optimization for single page apps here.

Benefits of SPA

SPA sites deliver an app-like experience in a web browser. Most companies consider SPA sites for mobile websites where it makes sense to provide a more fluid and responsive, native app-like experience for the end user.

In addition to the user experience, SPA sites benefit from improved site performance after the first request, a reduced number of network requests, and lower bandwidth usage. For these reasons, we see many clients leverage SPA frameworks for both desktop and mobile websites.

How to Optimize your SPA

SiteSpect’s Origin Experiments® feature works perfectly for SPA sites and it is a great way of A/B testing complex features, large redesigns, and any back-end logic. In addition, SiteSpect Client-Side Factors feature allows you to optimize the look and feel of your SPA. In SiteSpect, a Factor is the content that you want to modify, such as a button, a line of text, an image, or even an entire page. Client-Side Factors, along with our JavaScript SDK and specific adapters for Angular, Backbone, and React, enable SiteSpect to support testing SPA sites more effectively and increase SPA optimization.

A/B Testing an SPA site with SiteSpect vs. Other Vendor’s Optimization Tools

Since SPA sites load everything on the first request, it’s crucial to hook in and execute A/B test changes as soon as possible. Another vendor might use a JavaScript tag to make a change in the SPA, but that tag would need to be downloaded first before it can act. SiteSpect works as a reverse proxy, which means that it makes changes in the flow between the browser and the origin server, on the very first request. This allows Client-Side Factors to be delivered and ready as soon as the SPA is loaded by the browser.

To learn more about SiteSpect, visit our website.

Share

Suggested Posts

blog_planning.jpg

How To Choose Your First A/B Test

Group of business people working in the office discussing documents and ideas at meeting

Ideas to Help You Expand Your Optimization Program

SiteSpect dashboard

SiteSpect Named a Leader in Online Testing in the Forrester Wave