Improving Your Website Experience by Optimizing Single-Page Applications

In the ever-changing digital world, websites have been no stranger to innovations and new technologies. As websites continue to be updated to reach their audiences faster and provide a better user experience, the use of Single-Page Applications (SPAs) has increased.

Simply put, an SPA is a site (or portion of a site) that loads a single HTML page and proceeds to update portions of the page based on user actions. This is opposed to the more traditional process of loading an entirely new page based on each user action. When it comes to setting up SPAs, there are several methodologies & frameworks for achieving the partial content loads to speed up time to interactivity with the new content. Marketers and leading brands who have implemented SPAs have enjoyed the improved user experience they provide, however, SPAs have also contributed to a new and intriguing dilemma…

How do you optimize a website with no new pages and content that loads faster than a traditional site? Even though the user experience is improved with SPAs, it can still be optimized. Brands both large and small, across any industry, can experience difficulties with optimizing SPAs. The following issues are the most common ‘wrong turns’ brands take when optimizing SPAs and how to solve them while navigating the SPA labyrinth.

Potential ‘wrong turns’

Experience Flicker
A typical concern of anyone working on SPA optimizations is that little annoyance when the timing is a factor. Everyone wants to avoid original content being seen prior to loading variation content. Given that an SPA loads content faster than a standard page, at least with subsequent “pages”, this is an even more pronounced danger in that the new content may load before you even complete a request to your optimization platform.

Optimizing Inside SPAs
A major difficulty in dealing with SPAs is that you no longer have coventional page loads to rely on for making requests to your optimization platform. A traditional site will load the base code which, by default, will make initial requests for any content changes.

Additionally, if you do not utilize a server-side optimization implementation, you will have difficulty being able to test different flows or reorganizing your content. As SPA pages load small chunks, (only pieces that change are loaded) there is not necessarily a “hard” URL to be able to jump to as a standard site would have.

Tracking SPA Pages
Something that is both difficult and dangerous, if done improperly, is how the tracking of optimization data, and any additional tracked interactions, is handled. While this can be complex on a standard page, it becomes even more pronounced when you need to ensure that you are tracking data on the correct “page” with the correct page references (URL, name, etc.) when these are all updated dynamically.

Finding your way out

How do you take what once ran simply on each page load and instead make it run on a site with only an initial page load while continuing to provide the same seamless experience for your users?

For starters, if you have access to a server-side solution then the labyrinth quickly transforms into a simple path. Since a server-side solution would contain both the default content and the variations of content responses, there would be no issue in meeting any of the requests for content, resulting in a complete lack of flicker. Additionally, your tracking calls would also be baked right into the server-side solution.

However, as server-side solutions are still relatively new, you may not have this option currently available to you. Never fear, there are still solutions to the potential concerns outlined above; here’s how to find your way clear.

Experience Flicker
As previously mentioned, flicker is a constant concern for all SPA optimization programs. One of the best ways to alleviate this concern is to use “loading” blackouts on the pages between screens. Many SPA sites already use these and, if you already do too, then making the methods for running them available to the optimization platform developers will ease your implementations as they can simply extend the time shown when necessary. However, if you do not already use them, you may want to consider adding one. Methods can even be included to turn it off in instances where the new content load is taking too long and needs to be canceled, thus showing the default content.

Optimizing Inside SPAs
One of the most critical integrations required for optimizing an SPA is knowing when a new page is being loaded. Much like a standard page, it can be important to know when a new page request has been made (unload), the new page request has been received (load), and when the new page request has been added to the page (ready). These states can be used for various aspects of the optimization strategy.

  • Unload – A new page request can be used to trigger a call to the optimization platform to obtain the new content if that targeting only requires the name of the page and any previously known visitor attributes.
  • Load – A new page load event can be used to obtain new content if the targeting depends upon specific data and/or elements being available in the content.
  • Ready – A new page ready event is necessary for ensuring that any optimization changes, or the default experience, can now be seen by removing any blackouts/loading screens

If you need to test new flows or reorganize content, you may need to build in hard-coded pages or have a method available for calling on different content based on variation assignment. This would also need to work in conjunction with the method used for controlling experience flicker, as the new flow may create other changes that need to be hidden from view until ready.

Tracking SPA Pages
For tracking in the optimization platform, it may seem fairly similar to the tracking seen on a standard site. However, any goals or events based on page name or URL should now be based on custom events triggered by the SPA signaling a new page. This will likely result in the need to trigger the custom events via a call to an API function. Tracking can also be provided via analytics platforms outside of the optimization platform. For those, the aforementioned page states are crucial to sending the correct data at the appropriate time with the right information.

The Lesson

Single-Page Applications are great for delivering content to visitors quickly and, while challenging, are not a deal breaker for a robust optimization practice. By combining a solid integration strategy with inter-team cooperation, you can optimize your SPA and deliver a quality experience to your users.

If you want to implement optimization strategies for your SPA or are thinking of investing in a server-side solution, we can help review where you are, what you have, and where you want to go. Speak with one of our optimization experts by filling out the form below or emailing us at info.US@ebiquity.com.

By Jeremy Banks
About the Author:

Jeremy Banks is Senior Team Lead, Consultant at Stratigent.

Contact Us Now