It’s no secret that a webstore’s page load speed greatly impacts the overall online shopping experience. Today, the majority of eCommerce traffic is mobile, and the majority of mobile eCommerce shoppers will abandon a website if it doesn’t load within three seconds. Page-to-page load speeds need to be lightning fast too. Shoppers have grown to expect an online experience similar to the native apps they use everyday, such as Uber or Spotify. It’s not just the initial page load speed that matters, every single page load needs to be competitive to the in-app experience.
Site speed also impacts key strategies and tools for eCommerce success such as brand exposure through SEO. In recent years Google has emphasized the importance of mobile site speed, rewarding faster sites with higher rankings and visibility.
Consistent high performance is a cornerstone of headless commerce and eCommerce success. Also under that umbrella is the ability to handle traffic spikes and deliver a delightful, speedy experience no matter how many shoppers hit your homepage at any given time.
Many brands will use Jamstack, single page application (SPA), and static site generation in their frontend build to help them achieve site speed goals and eCommerce KPIs when going headless. It pays off. We’ve seen several merchants we work with who leverage static generation increase conversion rates by 20% to 30%, on average.
Your frontend development team can leverage their choice of top frameworks and JavaScript libraries to tap into frontend tools like static generation and SPA that play a big role in making sites faster. But one main ingredient of those tools is a content delivery network (CDN). A CDN is what makes static sites scalable and resilient to high traffic spikes—it even helps webstores stand up to Black Friday/Cyber Monday-level traffic.
This blog will explain the differences between the traditional online shopping experience rooted in “origin servers,” compared to a content delivery network. It’s an ideal read for teams who want to better understand how headless commerce, Jamstack, and static site generation, including using a CDN for faster page load speeds, will impact eCommerce KPIs.
Traditional origin server technology in eCommerce
Traditionally, when someone clicks on an eCommerce webstore, a request is sent to a server to retrieve that webstore’s content. This server gathers the information for the request, and responds with an HTML file. The same process must be done for every user’s request, every time they land on a new page of the site.
The round-trip time (RTT) measures how quickly the process occurs. The clock starts when the shopper clicks on the initial page of a site and requests to see its contents, and ends when the content is delivered and displayed in the shopper’s browser. As the user surfs to a new page, the round-trip journey starts again. As mentioned above, the general threshold for an acceptable RTT is low, especially for modern, mobile-first shoppers.
In an origin server scenario, when traffic increases beyond a certain point, the origin server will start to get overloaded and the processing engine will get overwhelmed. This negatively impacts the response time to requests for content, which can result in RTT latency or worse, webstore crashes. Site speed latency caused by origin server technology can appear as a slow loading site, more time for a page to load in its entirety, or video buffering, to name a few examples.
Part of the reason for origin server latency is that the server itself might be located around the globe, which can increase RTT sending requests and content at far distances. Another factor that can tack on milliseconds or seconds to RTT is the time it takes for an origin server to establish a secure connection using SSL/TLS protocol.
eCommerce content delivery networks (CDNs)
A content delivery network (CDN) is a global network of file servers designed to help minimize loading delays and reduce the physical distance between the server and the shopper. The network will typically consist of CDN “edge servers.”
Because users and requests are spread far and wide, CDN edge servers are located all over the world, so the one closest to the request can respond in a timely manner. According to CDN provider Cloudflare, by storing content closer to a requesting client machine you can reduce latency and improve page load times. It works by storing, or caching, content and quickly processing requests in order to deliver the HTML. This methodology takes the strain off of traditional servers, as it only relies on them when uncharted assets or updates need to be retrieved.
CDNs have great scalability benefits over traditional origin-based server architecture where sites are dependent on an origin server to handle traffic—because there’s only one server, or in some cases a small number of servers, the origin server (or servers) is saddled with handling every single request no matter how many come in at the same time. Static resources such as CSS files, images, static HTML, and JavaScript files can be cached in CDN servers. Those static resources alone can make up almost half of bandwidth usage. Some dynamic content like WordPress HTML files can also be cached with advanced CDNs.
Historically, if eCommerce merchants wanted to take advantage of a CDN, they’d have to hire a CDN provider directly, and stitch yet another service into their architecture and tech stack.
Some still choose to do that today, but Jamstack hosting providers and computing companies including Netlify, Vercel, and AWS act as a layer of abstraction so merchants don’t have to worry about working directly with a CDN provider. These hosting sites are robust enough to include the ability to connect to your code source, build your site, and deploy the built site to a CDN.
The reliability of eCommerce CDNs
Simple reliability is another draw of using an eCommerce CDN for your website. When you use a traditional server, your site is vulnerable to crashing. Content delivery networks rarely go down and even when they do, so many merchants are affected that it’s usually quickly resolved, and there’s a “we’re all in this together” spirit.
That said, CDN outages are not unheard of. Fastly, a CDN provider, experienced an outage in early June that affected 85% of its network. A few years prior, Cloudflare went through a similar outage that impacted big names like Dropbox, Medium, and Soundcloud. Even Amazon’s AWS had a four-hour shortage in 2017 that took down sites including Netflix, Spotify, and Buzzfeed.
Still, these occurrences are relatively rare and make headlines because so many people are impacted, including the biggest names online. If a traditional origin server goes down, it’s typically just your store impacted and it could happen much more often by nature.
Jamstack, static generation, and eCommerce CDNs
Jamstack will almost always be the web development architecture of headless webstore builds. It’s a favorite among eCommerce brands for its flexibility and cohesiveness with other key tools.
Jamstack supports the shopper-focus that’s needed for the frontend, while promoting APIs for efficiency and ease on the backend. By using Jamstack and modern frameworks, you’re able to pre-generate and save HTML ahead of time. This process is often called static site generation.
The “J” in Jamstack stands for JavaScript, it’s used for both the frontend code itself and during the build process in order to generate the pages of your site. From there, building your site as a single-page application (SPA) allows you to load your storefront all at once, and only once. SPA essentially eliminates page-to-page loading time because it’s not sending a request to any server at all after the initial page load.
Static site generators (which can be a component of a larger, more robust framework or a stand-alone tool specific to static generation), automate the task of coding individual HTML pages and get those pages ready to serve users ahead of their requests. Many merchants use both SPA and static generation with their headless progressive web apps (PWA) to give them the speed that is often associated with headless builds. A CDN is what makes those static pages accessible.
When a browser sends the initial request, it hits the CDN. The CDN sends the already generated HTML, JavaScript, and static assets back to the browser. Ultimately, with this process, a server isn’t needed to deploy your application. It gives way to lightning-fast load speeds and a native app-esque experience in a browser.
In addition to site performance benefits, because Jamstack eliminates the reliance on an origin server, it removes the threat of a security breach at that point. Though frontend security still needs to be taken into account, the nature of static generation and pre-generated files reduces the likelihood of a security issue.
Why site speed matters in eCommerce
Using a CDN supports the site speed needed to tap into the benefits of a lightning-fast webstore. First, site speed impacts eCommerce KPIs including better conversion rates, higher average order values (AOV), increased sales, and more.
On average, Nacelle merchants see a 20% to 30% increase in conversions. One luxury D2C retailer, Barefoot Dreams, saw a record-breaking 64% increase in conversion rate after launching a Nacelle-powered headless PWA and increased site speed by 35%. The brand also doubled its sales.
Website reliability was championed by D2C fashion brand Something Navy. After launching its headless PWA specifically to handle traffic spikes without crashing their online store, Something Navy supported 100,000 unique sessions and sold $1 million in 30 minutes after going live, boasting 34 millisecond page-to-page load speeds.
Site speed also enables more brand engagement and gives merchants an opportunity to tell their brand story. Furthermore, it can impact opportunities such as cross-selling and upselling products at checkout and throughout the session.
And let’s not forget about SEO. According to SEO industry behemoth, Yoast, not only is site speed a ranking factor, but faster sites are easier to crawl, have higher conversion rates, lower bounce rates, and a better overall user experience. Optimizing your site needs to be about more than design, it needs to incorporate what’s powering your webstore too.
eCommerce content delivery networks + Nacelle
Nacelle enables merchants to leverage Jamstack, SPA, static generation, and CDNs to achieve site speed improvements and eCommerce KPI goals. We pair well with popular frontend frameworks and have starter kits to offer developers the “batteries-included” dev experience when going headless.
It’s also important to note that a site’s frontend is only as powerful as its backend. The processes we discussed above (SSG, SPA, etc.) require a lot of data to quickly flow from the backend to the frontend. Backend systems need to be robust and powerful to support frontend functionality. Nacelle can help you navigate both.
By leveraging a CDN as part of a composable headless tech stack, Nacelle-powered storefronts can achieve page-to-page load times under 40 milliseconds, and the benefits and boosted eCommerce KPIs that come with improved site speed.
Next Read: Jamstack for eCommerce: The High-Level Perspective
