Feature
A majority of site visitors are not willing to wait more than two seconds for a page to load, and while there are plenty of ways to speed up a website or application, many brands are now turning to single page applications (SPA) to bump up the speed of their pages, as well as to bolster the overall user experience.
We turned to industry experts and practitioners to find out what SPA is. Plus, we look at the benefits of SPA, as well as the potential drawbacks.
Defining Single Page Application
SPA is a type of web application or website that dynamically reloads selected page elements in line with user interactions in order to avoid fetching entire new pages from a server. This can dramatically improve the speed and overall flow of a digital experience.
ReleVenture CTO Randolph Morris described SPAs as follows: “A single page application is when a single page is modified dynamically as the user interacts with the page elements. You might have noticed there are sites where the entire content of the site is on a single page and the navigation at the top anchors to sections on this page, this would be an example of an SPA.”
Related Article: 15+ Flat File CMS Options for Lean Website Building
What Are the Benefits of Single Page Applications?
When we spoke with Adam Amrine, lead consultant and owner at Adro Solutions, he said SPAs have “several benefits” over traditional web applications. “After the application loads, usually only small amounts of data are sent back and forth between the browser and server instead of full pages. This usually results in better performance and doesn't use as much bandwidth. Also, different portions of the application can be updated dynamically without having to reload the entire page. In addition to less bandwidth, this also means less load on the browser and server.”
Amrine also added that in addition to “retrieving or sending data to the server, an SPA can usually run entirely in the browser with no internet connection after it has initially loaded.”
Morris highlighted the most significant benefit of SPA, which is faster page loads. “There is no transitional load time between pages or information requests. There could be 'some' lag when new information is being requested for a dynamic change in the display, but the majority of the page resources are already loaded. So perceived page performance is primarily the benefit.”
Speaking at the recent dotCMS Bootcamp conference, John Hartley, associate team director at DYNAMIT pointed out that if your web application sees a “lot of client-side interaction and state management, especially if you have a lot of data that needs to persist, [then] an SPA can be extremely beneficial [since it will provide] faster page load speeds.”
Related Article: Is a Headless CMS Right For You?
What Are the Drawbacks of Single Page Applications?
Despite the benefits, Hartley said a major drawback is not using SPAs appropriately. “SPA isn’t always going to be the right answer. If you have a developer that’s [says] every site that we do should be SPA, ask them why. [If they say], it is the latest and coolest thing to do, then that’s not really a good business case.”
Learning Opportunities
Webinar
Jun
8
Attracting—and Keeping—Your High-Net-Worth Investors
Join PwC to dissect their recent survey findings on a specific customer subset — high-net-worth investors.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Webinar
Jun
13
Learn How to Deliver Dynamic Video Experiences at Scale
Learn how to convert existing assets into video experiences in near real-time.
Webinar
Jun
20
3 Steps to Unlock Your Customer Data and Drive Revenue
Discover how Twilio Segment’s #1 Customer Data Platform helps implement data-driven strategies.
Webinar
Jun
21
Retail Reinvented: A Masterclass in Creating Digital Experiences That Click
Hear how online retailers architect their digital experience infrastructure for peak traffic and demand
Webinar
Jun
27
Growth in the Face of Uncertainty: Nurturing Customer Experience in a Turbulent Market
Learn how to translate the concept of optimized customer success into an executable plan for success
Webinar
Jun
8
Attracting—and Keeping—Your High-Net-Worth Investors
Join PwC to dissect their recent survey findings on a specific customer subset — high-net-worth investors.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Hartley continued by explaining that if your web application delivers static content, such as a blog, then an SPA is not the best approach.
Aaron Groom wrote in Exoscale’s blog that by introducing an SPA to static content, it will worsen the load time for the user, since they will have to “download and execute the JavaScript payload before being able to view any content.”
Related Article: With Content Delivery, What Goes Around, Comes Around
3 Single Page Application Examples We All Know and Use
As Amrine observed, a majority of SPAs are built on frameworks like Angular and React. The following are notable examples of SPAs:
1. Gmail
As you click through your messages in your inbox, the browser stays on the same webpage. “For the first three pages of navigation, the app will stay on the same URL and dynamically add the new content as you click through,” said Jeannie Warner, security manager at WhiteHat Security.
2. Netflix
The popular entertainment streaming service utilizes the React framework to allow users to seamlessly access TV boxsets and movies without experiencing much lag. If you consider how much data is being streamed on Netflix, and by how many users, it is fair to say Netflix’s SPA takes full advantage of this approach.
3. Facebook
A Facebook news feed is one example of a single page application. Specific chunks of content are loaded on the page when you scroll past videos or click on buttons. You rarely have to leave the page in order to continue the experience.
