Headless Ecommerce

Speed Sells: eCommerce Uses AMP, SSR, PWA and Edge Computing to Shift Into Fifth Gear

Speed matters more than ever as 53% of visitors abandon a mobile website if it takes longer than three seconds to load. A one-second delay in load times has been linked to 7% drop in conversions.

As competition in eCommerce grows fiercer, retailers are on the lookout for new ways to stand out, and the competitive frontier steadily moves towards technology. The advent of multichannel has made the customer journey very complex, but one thing is certain—speed matters more than ever. Google's most recent announcement of the Page Experience update, a new ranking algorithm designed to judge web pages based on how users perceive the experience of interacting with them, is a clear sign the search giant is emphasizing perceived speed—the speed at which a user perceives a page as loaded.

The new customer journey for eCommerce is instant. 53% of visitors will abandon a mobile website if it takes longer than three seconds to load. At the same time, every one-second delay in load times has been linked to 7% drop in conversions. New technologies are now enabling website speeds that were previously impossible. With a combination of modern portable frontends, Server-Side Rendering (SSR), Accelerated Mobile Pages (AMP), and modern CDN technologies, sub-second page loads are not just possible—they’re becoming the new competitive battleground in eCommerce.

Table of contents

The importance of website speed for eCommerce

Website speed impacts the entire digital strategy, from visibility (SEO and SEM), through traffic, the user experience and ultimately conversions and revenue. This directly results from Google’s growing focus on two areas: mobile and speed.

The search giant has been on a decade-long quest to make it clear that website speed matters. They’ve rolled out multiple mobile-focused updates to solidify the importance of mobile website speed as crucial for ranking high in search results and SEM.

These efforts include mobile-first indexing in 2016, AMP with mobile ads in 2017, the Speed Update in 2019 and the upcoming Page Experience ranking update that will go live in early 2021. Last but not least, the Google Badge of Shame, will soon roll out and flag notoriously slow websites, and warns users navigating to the site from the Search Engine Results Page (SERP).

In all fairness, apart from introducing algorithmic changes and shaming websites to stress the role of site speed, Google has also created a range of tools to actually make a faster web a reality. This includes various tools for facilitating and measuring website speed, such as PageSpeed Insights, AMP, the Impact Calculator and the Mobile Speed Scorecard, to name a few.

Source: Test My Site

Google’s Test My Site is a tool which allows you to do a quick audit of your site and estimate the potential impact on annual revenue if site speed recommendations are implemented.

The effort to create these tools is in Google’s own interest as 58% of the searches and 65% of the company’s ad revenue comes from mobile.

If you’re interested in a complete timeline of Google’s speed-centered updates, there is another post on our blog which covers them in detail.

Schedule 1-on-1 Demo

Schedule a consultative conversation now to learn how the Moovweb XDN can help you achieve sub-second page loads.

Click here!

Speed = money

It’s common knowledge that website speed impacts the customer experience and therefore revenue, especially on mobile devices—70% of consumers state the site speed impacts their willingness to purchase. Amazon calculated that one second of delay in page load would cost $1.6B in lost revenue a year. To sell more, you have to make sure wherever a visitor lands, for example your product listing or product description pages, the content loads quickly and effortlessly. Likewise, the payment process should be fast and simple. This builds the foundation for re-engagement and makes the buyer inclined to return and buy more from you.

However, as things stand today, it’s getting more and more difficult to deliver speedy mobile experiences. On top of badly optimized, bloated websites with oversized images and messy code, a mobile page makes on average 214 server requests, of which a hundred are ad-related. As a result, an average page takes 15.3 seconds to load on a mobile device (on 4G). Some of the more competitive retailers are able to bring mobile page load times down to just 3-5 seconds – but there is still room for improvement. And this is not a problem that 5G can solve.

It’s the irreconcilable compromise between ads, personalization, analytics and tracking and an excellent user experienc

The foundation for speed

The first building block in delivering lightning-fast first-page loads is to use AMP for search traffic and SSR for the other channels. The second step is to ensure blazingly-fast subsequent page loads. This is done with portable frontends built for speed, such as Progressive Web Apps (PWAs). The last pillar is a modern CDN with edge computing capabilities to squeeze every millisecond possible off of page loads.

In fact, Google has recommended an ideal customer journey in which a website first delivers an AMP page to search users and then transitions them to the full PWA version of the site on subsequent pages. And since nearly half of retailer website traffic comes from organic search, supporting both AMP and PWA makes sense.

This topic was broadly discussed at Google I/O 2017.

With PWAs, developers can deliver highly engaging and lightning-fast experiences that rival native apps. However, when it comes to search-generated traffic, AMP is the fastest possible option with median load times of half a second.

Thus, in a nutshell, climbing higher in SERP requires a combination of AMP and SSR for speedy first loads and PWA for lightning-fast browsing transitions. The problem is that it’s easier said than done, as it requires enterprise eCommerce websites to add SSR support, which is a complex task on its own, and maintain two separate websites one for the PWA (typically written in React, Angular, Vue, Next, or Nuxt) and the other in AMP HTML.

AMP pages are so fast because they are pre-fetched, pre-rendered, and cached by a CDN (Content Delivery Network). Most AMP pages are delivered by Google's AMP cache.

So, the foundations of website speed consist of these three key elements:

SSR + AMP for speedy first-loads

From SERP, users are directed to an AMP version of the page for blazingly-fast first-page loads. SSR does the same for visitors from every other channel, including email, social and referral.

PWA portable frontend for lightning-fast browsing speeds

PWA takes over to provide instant browsing speeds as the visitor navigates through subsequent pages of the website. This way consumers enjoy an enhanced experience of lightning-fast first-page loads as well as instant page transitions beyond just the first page.

Predictive prefetching + modern CDN

Predictive prefetching and a modern CDN with edge computing capabilities let you stream dynamic data to the edge and from there to the users' browsers before they request it. This lets you cache and serve what consumers are actually waiting for – the JSON data that translates to the different products you have in stock, their prices and information. This is how eCommerce websites and other database-driven websites can deliver instant experiences and remain 5 seconds ahead of consumers’ taps (e.g. prefetch a product description page that a user is most likely to click on before they actually click on the link).

Now that we understand the three pillars that form the foundation of website speed we can dive deeper into each.

What is AMP and how does it work

Google AMP is an open-source framework for creating mobile web pages with median load times of 500ms. AMP creates better, faster experiences on the mobile web by simplifying the HTML and enforcing stringent limitations on CSS and JavaScript. These pages are then cached and pre-rendered on the Google server, which is how they are delivered so quickly.

The benefits of AMP

AMP pages enable 500ms median page loads for traffic coming from Google’s SERP. These speeds are possible because Google servers pre-fetched and pre-rendered AMP content to a user’s browser before they click on the link to the AMP page. For the average eCommerce site Google search (both organic and paid) accounts for approximately 50% of their traffic, so these gains can apply to a large percentage of your traffic.

Sites that use AMP also see benefits in reduced bounce-rates, as users who may typically bounce while waiting for a page to load will now be met with a lightning-fast experience.

How AMP + PWA changes the game

The AMP and Progressive Web Apps (PWAs) combination covers the entire customer journey from search, making it fast end-to-end. The shopper loads the AMP page from a Google SERP, and then while browsing the AMP page the resources needed for the PWA version of the site load in the background. That way, when the user takes an action (e.g. clicks anywhere on the site) the PWA has already gotten a head start on preloading the content for the subsequent page, and from there all the remaining transitions are client-side rendered browsing transitions and not fresh navigations.

Why doesn’t everybody use AMP?

The AMP and PWA combination is a match made in heaven as far as speed goes, but it’s a nightmare development-wise. Supporting the technology effectively involves creating two versions of your site—one in the language your frontend is written in (which tends to either be JavaScript heavy or CSS heavy) and another that follows the AMP project’s standards. And it’s just the beginning: every bug fix, layout change, new feature, etc. may require being propagated to both the AMP and PWA codebases.

The React Storefront framework and the Moovweb XDN make it much easier for developers to support AMP in their React apps.

Retail upstarts outperform their multi-billion dollar competitors

By utilizing Moovweb’s AMP technology, the fashion retailer AKIRA not only delivers instant first loads from search, but also outranks Amazon, Nordstrom, Zappos, and other big brands for key phrases.

Before utilizing Moovweb technology, AKIRA’s first-page loads unimpressively averaged 4.8 seconds, and subsequent pages loaded in 2.5 seconds.

AKIRA was able to improve these results and get to sub-second page loads by utilizing advanced technology built-into the Moovweb XDN: an eCommerce PWA with server-side rendering and AMP conversion, Moovweb’s CDN-as-JavaScript delivering a 95%+ cache hit rate for dynamic content at the edge (and keeping the website 5 seconds ahead of the shopper), and Moovweb's Serverless JavaScript backend for frontend to optimize servers and APIs.

With the Moovweb XDN the retailer saw an immediate boost in many areas:

  • First load times dropped by 70.8% to close to a second
  • Browsing transitions dropped to an astounding 500ms
  • Half of the website pages now load in less than 500ms
  • Mobile conversion rate increased by 37.25%

Lighthouse is also a great reflection of these improvements—AKIRA’s performance score got a 36 point boost, outperforming 75% of the sites on the web and offering improved browsing experience for their customers.

Read the full AKIRA case study here.

Annie Selke is another stellar example of how investing in website speed can help a retailer climb up the search engine results page.

Prior to hopping on the Moovweb XDN, the home and decor retailer Annie Selke didn't even appear above the fold of Google search results. Today, with a 32% boost to organic traffic and 40.41% lift in mobile organic traffic it outranks its multi-billion dollar competitors.

If you're interested, there is also an Annie Selke case study on our website where we go into the nitty-gritty.

For online retailers like AKIRA and Annie Selke, a well performing mobile website is a low-hanging fruit. It can be just what they need to stand up to the unrelenting competition from eCommerce giants like Amazon, Nordstrom and Zappos.

The faster the site, the higher it ranks, which is like instant, guaranteed SEO. There are plenty examples in Moovweb's portfolio which prove that. AKIRA, Annie Selke and Shoe Carnival are just a few that outrank many big names out there, including Amazon.

Moovweb XDN offers a combination of advanced technology to get eCommerce up to speed:

  • eCommerce PWA with Server-Side Rendering support and AMP conversion
  • Predictive prefetching
  • CDN-as-JavaScript delivering a 95%+ cache hit ratio for dynamic content at the edge that keeps the website 5 seconds ahead of the shopper.
  • Moovweb's Serverlss-JavaScript backend for frontend optimizes servers and APIs.

Schedule 1-on-1 Demo

Schedule a consultative conversation now to learn how the Moovweb XDN can help you achieve sub-second page loads.

Click here!

What is Server-Side Rendering and how does it work?

Server-Side Rendering (aka SSR) is a popular technique for rendering a normally client-side only PWA page on the server and then sending a fully rendered page to the browser. The client’s JavaScript bundle can then take over and the PWA can operate as normal. SSR essentially translates JavaScript pages to HTML, a language both search crawlers and browsers understand, on the server. This ensures that browsers and search crawlers can easily deliver and index your pages.

One major benefit of using SSR is in having an app that can be crawled and indexed properly by every search engine. This helps with SEO as well as with providing metadata to social media channels.

The benefits of SSR

SSR can also often help with performance because a fully loaded app is sent down from the server on the first request. For non-trivial apps though, your mileage may vary because SSR requires a setup that can get a bit complicated and it creates a bigger load on the server. Thankfully there are services and tools out there, like isomorphic frontends and the Moovweb XDN with SSR support out-of-the-box.

In the end, whether to use server-side rendering for your website really depends on your specific needs and on which trade-offs make the most sense for your use case.

What are modern CDNs and edge computing?

Edge computing is a networking philosophy focused on bringing computing closer to the source of data—and reducing latency and bandwidth use in the process. This can be implemented by the use of many different technologies. Bringing computation closer to the network’s edge (a user’s computer, an IoT device, or an edge server) minimizes the amount of long-distance communication that has to happen between a client and server.

CDNs with edge computing capabilities let you cut down on the travel time from the website’s servers to the user’s browser by streaming the content to the closest CDN Point of Presence (PoP) to the user (so that a user in San Francisco is delivered content from a PoP in South San Francisco while a user in NYC is delivered content from a PoP in Brooklyn).

The benefits of CDNs with edge computing

To ensure faster page loads, CDNs store a cached version of your website in multiple geographical locations. Each such PoP contains a number of caching servers responsible for content delivery to visitors within its proximity.

Moovweb's CDN-as-JavaScript takes the concept to another level. It’s an application-aware CDN which understands your app. It uses the same language your frontend developers already know and gives you full control over caching. As a result, websites using the XDN see cache hit ratios of 95%+ for dynamic content at the edge.

The edge computing capabilities of Moovweb's CDN-as-JavaScript keep you 5 seconds ahead of the shopper by predictively prefetching the most likely next pages and streaming them to the edge before they are requested, so they are cached and ready for the user before they tap on a link to them.

Summary

Long load times can ruin a user’s experience and a websites search ranking. AMP solves a part of this problem – it makes the first page from search blazingly-fast. But that’s just half the battle. Getting your website up to speed requires going the extra mile and a more holistic approach – a combination of technologies like Accelerated Mobile Pages (AMP), modern portable frontends, Server-Side Rendering (SSR), and CDNs with edge computing capabilities.

Moovweb XDN helps complex, dynamic eCommerce websites get to sub-second speeds, while increasing developmental velocity and bottom-line growth and reducing DevOps costs. It also includes a CDN-as-JavaScript that delivers a 95% or higher cache hit ratio for dynamic content, compared to just 15% for other CDNs.

The Moovweb XDN consistently delivers sub-500ms median page loads for large eCommerce websites with dozens of tags and scripts, not to mention dynamic pricing and real time inventory lookups. These speed gains are known to lead to 15-30% conversion lifts and better visibility, reach, and ultimately higher revenue.

Schedule a consultative conversation with a site speed expert to see how we can help you gain a competitive advantage with an instant eCommerce website!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Newsletter
Get great insight from our expert team.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions

Don't wait another second. Go instant.

Get started in seconds