skip to Main Content
AMP Pages Mobile First eCommerce Design

AMP or PWA for Mobile-First eCommerce – Optimising Page Load Speed and SEO for Mobile

BLOG

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?

Accelerated Mobile Pages (AMP) are becoming a mainstay of SERPs, designed to provide super-fast loading speeds. The open source platform is created on JavaScript and approved by Google, and has been popular with users looking for quick information — on news sites, for instance. AMP results are marked on SERPs with a lightning bolt icon, and are pre-cached, meaning they load instantly on clicking. One study found that AMP resulted in conversion rate increase of 105%, whilst decreasing bounce rates by 31%.

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
Instant page load
Fast page load
Designed to deliver the fastest page load speed
Designed to deliver app-like web experiences quickly
Faster load times can improve SEO rankings
Enhanced user experience can improve SEO rankings
Suitable for basic landing pages, blogs, news sites
Suitable for eCommerce websites and app-like browsing
Very restrictive of certain HTML, CSS, and JavaScript. Very limited use of fonts, images and video.
Supports HTML files, CSS style sheets, JavaScript scripts, fonts, images, videos, and other multimedia content.
Responsive – compatible with any browser and on desktop, mobile and tablet
Responsive – compatible with any browser and on desktop, mobile and tablet
Pages will be static if offline, images will not load
Once loaded, works offline and on poor network connection
Secure access via https
Secure access via https
Does not support push-notifications
Supports push-notifications for re-engagement
Unable to track user activity
Able to track user activity

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.

Combining AMP With PWA

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.

Combined AMP + PWA Mobile Site Example

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.

LiveArea

LiveArea is an award-winning global commerce services provider. Our comprehensive portfolio of capabilities combines commerce strategy, design/UX, platform technology, and digital marketing to bring commerce to life. For more than a decade, emerging businesses, and leading brands have turned to LiveArea to grow and transform their commerce journeys.

RELATED ARTICLES