AMP or PWA for Mobile-First eCommerce – Why Not Both?
February 28, 2019
Mobile now rules search engine results pages (SERPs). Google’s Mobile First Index is self-explanatory – mobile versions of pages are crawled and shown first, over desktop. It’s therefore imperative brands are thinking mobile-first.
And, when it comes to a mobile-first approach, page loading speed is now a crucial ranking factor to consider. Google has taken into account user behaviour: 53% of visits are abandoned if a mobile site takes over 3 seconds to load, and 77% of mobile sites take over 10 seconds to load on a 3G network. So, to boost rankings on google, sites need to optimise page load speed, without compromising user experience.
Two solutions are available for addressing mobile loading speeds: AMPs (Accelerated Mobile Pages) and PWAs (Progressive Web Apps).
What is AMP?
But, as yet, eCommerce has been slow to adopt AMP, due to the functionalities sacrificed for rapid load times. EBay has been partnering with Google to “close the gap in launching a full-fledged eCommerce experience in AMP”. This includes the development of UX tools such as one-click add-to-cart, buy-now buttons, and search boxes – common features of eCommerce sites but currently unavailable in AMP.
What is PWA?
Progressive Web Apps (PWA) are fast-loading pages – up to 4 times faster than responsive or standard websites. They are designed to mirror the functionalities and experiences of actual mobile apps – think app-like UX in your mobile browser, without having to download and install on your device. PWAs are designed to load even on low-quality networks and, once loaded, have full functionality, even offline.
PWAs work for eCommerce – with the features and functionalities to create engaging shopping experiences that convert. Retailers are seeing up to 50% more mobile conversions through using PWAs. The fast, optimised experience keeps customers engaged, and the UX features that perform on apps – fixed navigation bars, add-to-cart buttons, short payment forms – convert browsers to buyers. Push notifications can engage customers in real-time based on their behavior or location, and offline mode ensures shoppers stay engaged through moments of limited or no connectivity.
AMP vs PWA
AMP + PWA = Perfection
Higher search ranking and fast, interactive sites are crucial for online retailers battling for market share. And, we now know that, fundamentally, AMP cannot be matched for speed, whilst PWA is a good option for a combination of speed and functionality. But AMP cannot yet support a wholesome eCommerce experience, where users need to select product variants, log-in, and perform a variety of other dynamic actions. And PWA, whilst able to do this faster than responsive or standard websites, isn’t as fast with its initial load as AMP. This is where a combination of the two can work. AMP for the instant load, to make sure users don’t jump off before they’ve even landed. And then can PWA deliver a fast, app-like experience through the rest of the journey.
So, AMP can be used to load the landing pages – its instant load time meaning users can digest the initial content whilst the PWA features are loading in the background. (This only takes a few seconds, but a few seconds is often enough for users to abandon their visit before they’ve even reached the first page). Now, once the PWA has loaded, a frictionless, app-like commerce journey can begin, from browsing to payment. The Carved.com site is a nice example.
Search ‘carved wood phone cases’ on Google, and Carved.com is the first organic result, shown below the paid Google Shopping Ads. Notice the grey lightning bolt symbol next to the URL, indicating that this is an AMP page. At this point, the AMP page has already cached on Google, meaning it is ready to load instantly.
A tap on the result loads up the page in milliseconds, where we view an attractive AMP page. There’s enough rich content here to keep us engaged for a few seconds whilst the PWA elements – the search and navigation features – load up. Notice the URL of the page is still Google, meaning we are viewing this cached page through Google’s infrastructure.
A tap on the navigation icon loads up a nice PWA-powered search box and a menu where we can browse product categories. This is the kind of functionality we wouldn’t get on an AMP-only page, but combining PWA with AMP allows these app-like experiences, with quick load times. Notice the URL is still sitting in Google, as we haven’t left this page yet.
Select an option from the menu and dive fully into the PWA version – notice the URL changes from Google to Carved.com. This does take slightly longer than the instant AMP load, as we are switching between sites, but it’s still pretty quick, and you’re now engaged and enjoying the site experience, so chances are you’ll be happy to wait. And now we have a clean, seamless mobile UX that mirrors what you might expect from an app, in your mobile browser, with easy search and navigation, product images with short descriptions, and clear action buttons.
Tap a product and the product page quickly appears, with more information, images, reviews and a ‘Buy Now’ button. We still have the fixed search and navigation functionalities, in case we want to continue browsing.
Select ‘Buy Now’ and the seamless experience continues, quickly loading the PWA-powered cart page, where we can proceed through an optimised payment experience to complete the order. A navigation tab is present, and we have some further action buttons at the bottom of the screen.
In summary, Carved.com now has a site that delivers a mobile experience with discoverability in Google and the functionality of a native app. Super-fast page transitions and actions allow shoppers to easily navigate from category pages to product listings, to purchase.