Optimizing on Single Page Apps and Progressive Web Apps

July 21, 2021

Share

Single page apps (SPAs) and Progressive web apps (PWAs) have become the architecture of choice for many brands because of the smoother, app-like experience they deliver to visitors’ browsers. But, with many optimization tools, your capabilities will be limited if you stick with an SPA or PWA. So marketers, developers, product managers, and network operations teams who are serious about digital optimization, personalization, and A/B testing, while committed to SPA and PWA frameworks face a choice. Can you optimize at the level you want while maintaining the site architecture that you want? SiteSpect maintains all of its functionality and power regardless of your site architecture — including SPA and PWA sites. Let’s break down how.

How do SPAs and PWAs Work?

First of all, we want to be super clear: your SPA or PWA site does not alter your ability to optimize with SiteSpect. But, since these sites are architected differently from traditional websites, they run into trouble with other optimization tools. Here’s why.

In an SPA the entire site exists as one HTML page and experiences happen via JavaScript. Everything loads at once, and then additional pages visited don’t require an additional load. PWAs are a type of SPA. They are typically geared more toward mobile devices, and once downloaded will remain fully functional even when offline because all the information is housed within that first download. Starbucks.com is a good example of a PWA. It was designed so that users can order via the website and have a very similar experience to their app. Airbnb.com and Gmail.com are good examples of SPAs. You can learn more about the ins and outs of SPA and PWAs in this article on Medium.

How to Optimize an SPA or PWA With a Tag-Based Tool?

With a tag-based optimization tool it is usually possible to optimize on an SPA or PWA, but it takes a lot of work. These tools use JavaScript to change page content after the page loads. But, an SPA loads the entire site at once. So any content changes need to load on that initial page load — regardless of whether a user even visits that page or experience. This requires much more complicated code — for instance to monitor when the elements that need changing appear — and has an even more pronounced adverse effect on the experience (think much slower initial load time and flicker).

To dive even deeper, when a tag-based tool alters a user experience on a traditional site the process looks something like this:

  1. User requests a URL
  2. Request goes to server
  3. Server delivers original experience
  4. JavaScript loads and tells the browser to swap the experience
  5. Request goes back to server
  6. The correct experience loads

This process happens each time the user clicks or visits a new page. But, with an SPA, there is not an additional request back to the server when the user visits a subsequent page. More importantly, there is no additional page load when a user visits a new page — this is the time when the content change would normally apply. That means there is no opportunity to insert the JavaScript that tells the browser to swap the experience.

Optimizing an SPA and PWA with SiteSpect

Unlike tag-based tools, SiteSpect does not rely on external JavaScript to deliver variations, but instead delivers them seamlessly within the page itself. You can learn more about how SiteSpect works here, but this is how it affects your SPA and PWA. Rather than a tag-based tool that alters content in the browser, SiteSpect alters content at the server level — regardless of whether you’re executing a client-side or server-side change, and even if you use the Visual Editor. That means that having an SPA or PWA simply does not affect how SiteSpect works on your site. You can learn more about our SPA support here. Essentially, when you use SiteSpect to alter site content, the process looks something like this:

  1. User requests a URL
  2. Request passes through SiteSpect on the way to the server
  3. Server delivers original experience while SiteSpect modifies it appropriately
  4. Correct experience loads in browser

The crucial difference, and the reason that SiteSpect works just as well on SPAs and PWAs, is that the content change is already applied by the time the experience is delivered to the browser. SiteSpect does not need content to load in the browser before it can execute a change.

Summary

The simple version of this is that SiteSpect doesn’t work any differently whether you have a traditional site or an SPA or PWA. Your tag-based tool might work on your SPA or PWA, but it will require a whole lot more work and effort, and you’ll see more performance impact.

To learn more about SiteSpect, visit our website.

 

Share

Suggested Posts

cyberday.jpg

There are 68 days until Cyber Monday. Are you ready?

Isometric red cube on different directions arrows, choice between two ways. Opportunity, decision, confusion, challenge concept. Flat design. EPS 8 vector illustration, no transparency, no gradients

When to A/B or Multivariate Test?

SiteSpect dashboard

Optimization Planning 101