GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
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
- Speed = money
- What is AMP and how does it work
- Retail upstarts outperform their multi-billion dollar competitors
- What is SSR and how does it work?
- What are modern CDNs and edge computing?
- Summary
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 mobile and speed.
The search giant has been on a decade-long quest to clarify 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 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 that 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 interest as 58% of the searches and 65% of the company’s ad revenue come from mobile.
Schedule 1-on-1 Demo
Schedule a consultative conversation to learn how the Edgio (Layer0) 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 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 must ensure that 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 becoming 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 can 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 experience
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, regarding 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). Google’s AMP cache delivers most AMP pages.
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 website pages. This way, consumers enjoy an enhanced experience of lightning-fast first-page loads and 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 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 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 from Google’s SERP. These speeds are possible because Google servers pre-fetched and pre-rendered AMP content to a user’s browser before clicking on the AMP page link. 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 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 for speed, 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 Layer0 make it much easier for developers to support AMP in their React apps.
Retail upstarts outperform their multi-billion dollar competitors
By utilizing Layer0 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 Layer0 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 Edgio (Layer0): an eCommerce PWA with server-side rendering and AMP conversion, Layer0 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 Layer0’s Serverless JavaScript backend for frontend to optimize servers and APIs.
With Edgio (Layer0) 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
- The 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 an improved customer browsing experience.
Read the full AKIRA case study.
Annie Selke is another stellar example of how investing in website speed can help a retailer climb up the search engine results page.
Before hopping on Edgio (Layer0), 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 a 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, like an instant, guaranteed SEO. There are plenty of examples in the Edgio (Layer0) portfolio which prove that. AKIRA, Annie Selke and Shoe Carnival are just a few that outrank many big names, including Amazon.
Layer0 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.
- Layer0 Serverless-JavaScript backend for frontend optimizes servers and APIs.
Schedule 1-on-1 Demo
Schedule a consultative conversation to learn how Edgio (Layer0) 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 has an app that can be crawled and indexed properly by every search engine. This helps with SEO and 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 create a bigger server load. Thankfully there are services and tools, like isomorphic frontends and Layer0 with SSR support out-of-the-box.
In the end, whether to use server-side rendering for your website 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. The use of many different technologies can implement this. 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 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
CDNs store a cached version of your website in multiple locations to ensure faster page loads. Each such PoP contains several caching servers responsible for content delivery to visitors within its proximity.
Layer0’s CDN-as-JavaScript takes the concept to another level. It’s an application-aware CDN that 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 Layer0 see cache hit ratios of 95%+ for dynamic content at the edge.
The edge computing capabilities of Layer0 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 website’s 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.
Layer0 helps complex and 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.
Layer0 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, 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!
