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.
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.
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.
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.
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 React Storefront framework and Layer0 make it much easier for developers to support AMP in their React apps.
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.
With 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
- 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 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 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 Layer0 portfolio which prove that. AKIRA, Annie Selke and Shoe Carnival are just a few that outrank many big names out there, 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
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 Layer0 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.
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.
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.
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 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!