eCommerce single-page applications (SPAs) are like retail pop-up stores for mobile devices. They deliver a faster storefront to mobile customers quickly, but sacrifice many aspects of the traditional online shopping experience for the sake of speed and convenience.
You shouldn’t have to sacrifice the shopping experience in order to make your mobile website pages load faster. Here’s our take on the pros and cons of using a single-page application, and steps you can take to improve SPA performance.
Want to learn if your eCommerce website is loading fast enough to meet shopper expectations? Find out with a free Site Performance Snapshot Report today!
What are single-page applications?
Most eCommerce websites are built as multi-page applications. Every time you click a link on a multi-page application, the entire page reloads in the browser. Multi-page applications give you the most flexibility to create unique navigation paths and add new features and content.
The drawback of multi-page applications? All this content can take a long time to load in the browser.
In contrast, SPAs load a single HTML page in the browser and dynamically update content without refreshing the entire page. These applications rely on javascript to call and retrieve content that is rendered on the client side (i.e. on the mobile device). As a result, there are fewer interruptions in the shopping experience from loading new pages compared to multi-page applications. SPAs are also considered by some to have a more intuitive and simple shopping experience.
What are the drawbacks of single-page applications in eCommerce?
SPAs reduce page load delays related to sending and rendering new HTML files on mobile devices that are using uncertain network connections. However, these simplified applications don’t automatically translate into higher performing mobile websites. Here’s why:
1. SPAs sacrifice too much in the online experience
SPAs are designed to perform like thin, single function apps. These types of apps are fantastic for websites with only a handful of products, or with a limited set of possible buying paths. But they don’t offer the myriad of buying paths and merchandising techniques that a multi-page app can support. So, although shoppers no longer need to wait for HTML to reload, the content they receive isn’t what they’ve grown to expect from the best online shopping experiences.
2. SPAs don’t solve all mobile performance problems
As we’ve mentioned before, SPAs can be more complicated than you think.
That’s because SPAs suffer many of the performance challenges that javascript-heavy multi-page apps suffer (javascript blocking errors, latency from 3rd party technologies, etc.). Even when these issues are addressed by a developer manually, they can resurface any time a change is made to the code, or when a 3rd party javascript is added.
In addition, traditional measurements of website speed and performance can be misleading for SPAs. Popular tools like Google Lighthouse Performance Score and Webpagetest.org tend to make SPAs look fast because those tools focus on “document complete” times. However, since SPAs push the execution of javascript past the “document complete” time, the content is still being loaded all at one time (just later). This can max out the device CPU and cause delays for shoppers when they attempt to interact with the site.
When evaluating the performance of their SPAs, retailers need to start looking at different measures. “Time to interact” (time passed before a shopper can interact with page features) and “first input delay” (time passed between clicking and the page changing in response) are better indicators of SPA performance.
What’s the best approach?
As we recommended in our assessment of progressive web applications, we believe taking a stripped down approach to your mobile website is not the best solution. A watered-down shopping experience could lose you more conversions than from a faster site. Please note: it is possible to have a robust multi-page application site that loads as quickly as many SPAs.
If you’ve already committed to an SPA, it doesn’t mean you are free of all performance problems. Here are steps you can take to make your SPA load faster:
1. Inventory and analyze your 3rd party javascript performance
The biggest source of delays you will encounter relate to the 3rd party javascript embedded in your SPA. Take advantage of technology tools that inventory your 3rd party javascript and analyze javascript performance relative to how they perform on other eCommerce websites. This will help you identify slow performing third parties and fine tune the performance of your SPA.
2. Sequence the loading of 3rd party javascript
Not all 3rd party javascript needs to be loaded immediately. And when problems arise, you will want to delay or even halt the loading of certain javascript. Make sure you are optimally sequencing 3rd party javascript based on industry best practices, and taking a rules-driven approach that allows you to adjust how 3rd parties load on the fly.
3. Optimize content
Although you’ve moved away from a traditional HTML heavy website, you can still employ many traditional optimization techniques. For example, Yottaa has an Optimization API designed for javascript-driven applications. The API allows retailers to optimize and cache content on the Yottaa network, and deliver it in a more compact and streamlined fashion. Check with your current eCommerce acceleration vendor to make sure you are taking advantage of APIs for your SPA.
4. Real User Monitoring (RUM)
Don’t rely on traditional tools and “document complete” to evaluate SPA performance. Employ real user monitoring (RUM) that focuses on how shoppers experience your SPA performance by device, browser, geography, etc.
5. Monitor (and resolve) performance anomalies
When you are loading a heavy amount of javascript in one application, unexpected performance problems are bound to happen. Make sure you have a process or system in place to identify and resolve performance anomalies before they crash your SPAs and impact the shopping experience.
Are we ready to turn the page on single-page applications?
SPAs are a good approach in the right situations. If your shoppers identify and buy products in a fairly predictable fashion, you can design an SPA that makes this process much easier for mobile shoppers.
But don’t sit back and believe an SPA will make your mobile website fast enough. You still need to address delays related to loading high resolution images and 3rd party javascript. If you don’t, you’ll be ignoring the biggest source of delays on your mobile website, and not delivering the shopping experience consumers are expecting.
