AMP for Ecommerce: Answers to All Your Questions on Accelerated Mobile Pages

Early bounce rates are a big problem for retailers. We know that 53% of visits are abandoned if a mobile site takes over 3 seconds to load, and that 77% of mobile sites take over 10 seconds to load on a 3G network. It’s no wonder mobile conversions are still a fraction of desktop, even though mobile traffic has taken the traffic lead. Luckily…

…There’s an AMP for that

Accelerated Mobile Pages (AMP) are a new-to-ecommerce, open-source, Google-led initiative focused on reducing initial page load times on mobile. AMP for ecommerce delivers a mobile experience that loads almost instantly, keeping customers engaged and shopping. With mobile traffic at an all-time high, AMP for ecommerce landing pages has never been more crucial.

How does AMP for Ecommerce work?

The lightweight web pages are copied into Google’s AMP cache and load in milliseconds. It was initially adopted by publishers, and – because of its success – is now being used by ecommerce leaders like eBay, AliExpress, and Mobify customer Lancôme. In March, Yahoo Japan, Baidu, and Sogou (the number 1 and 2 search engines in China) also rolled out AMP. The expansion to Asia introduces AMP to over a billion new users. 

AMP is identified in mobile Google search results by a small lightning bolt logo. As users get familiar with the logo, they will be more inclined to click, knowing they are guaranteed a consistently fast experience.

AMP for ecommerce icon image

You can see the lightning bolt logo on Google search results on the left, and one of Lancôme’s AMP landing pages on the right.

AMP are HTML pages made up of open-source components. Lean CSS and inline style sheets, along with the limitations of no JavaScript and constrained markup, are among the factors that make AMP pages so fast. When combined with an AMP cache and pre-rendering in an AMP viewer, such as the ones used as part of Google’s Search Engine Results Pages, the result is performance that’s a magnitude faster than typical mobile sites.

Looking to get into the nitty gritty on the tech behind AMP? Read this Medium post.

Conversions and SEO

Higher search ranking and faster time-to-interactive are fundamental in helping retailers maintain or win market share. Most retailers are struggling with flat or declining organic search traffic, and slow sites are penalized by Google with low search rankings. AMP doesn’t affect search ranking directly at this point, but the improved performance on mobile does. There is some speculation that AMP will be a factor in search ranking in the future.

AMP for Ecommerce + Progressive Web Apps = true love

We’ve already seen another Google-backed technology – Progressive Web Apps – deliver mobile web speeds up to 4 times faster than adaptive or responsive web approaches. AMP for commerce extends speed – and therefore customer engagement and acquisition – even further.

A good way to understand how AMP for ecommerce and Progressive Web Apps (PWAs) work together is by viewing a real world example. The GIF below shows Lancôme at the top of the search engine results, with the AMP icon beside. See how the AMP page loads almost instantly, and how seamless the experience is as the user transitions into the more complex part of the website.

Lancome AMP for ecommerce PWA gif

AMP will work with any mobile site, but is best when combined with PWAs. PWAs for ecommerce are so much faster than responsive or m.dot websites, thanks to both real and perceived performance enhancements.

The combination of the two technologies is important. Imagine you are going on a roller coaster for the first time: the first half of the roller coaster is thrilling and adrenaline-inducing, but the second half the roller coaster is slow and choppy. How would you feel about that roller coaster? Using AMP is great, but you need to ensure the rest of your mobile offering keeps up, or you’re going to leave your customers disappointed. With AMP and PWA, your customers will get the instant load of the first page from AMP, followed by an incredibly fast, app-like experience on the rest of your site.

Limitations and workarounds

AMP for ecommerce PWA comparison imageAMP is so fast in part because it restricts how pages are coded. These restrictions need to be adhered to, though, because the AMP Validator will invalidate pages that do not meet the requirements. It’s important to realize that your site design may not translate perfectly into an AMP document, or deliver all the same functionality. However, our experience building Lancôme’s AMP-PWA has provided us with insight into what retailers need from their mobile sites, and how we can make that happen. Below you’ll find answers to some of the most common questions about AMP for ecommerce.

FAQ

Will AMP improve my SEO?

AMP doesn’t affect search ranking directly at this point, but the improved performance on mobile does. AMP results for organic search terms are promoted to the top of the search engine result page.

Do AMP pages appear higher on organic search results than paid ads?

Google AdWords still take priority in search results. However, Google is integrating AdWords and AMP to make them work together better. Read more about the integration on Google’s blog.

How are analytics affected by AMP?

Unfortunately, AMP and Google Analytics do not currently play nicely together, because Google Analytics does not deal with cross-domain analytics, which is exactly what AMP requires to track correctly.

Customers launching AMP will need to make their analytics teams aware of this issue, and understand how to plan around it – at least until Google has a proper fix. Mobify works around this by using our Engagement Engine to track cross-domain analytics.

Can my customers click-to-buy on an AMP?

Being able to add-to-cart directly from AMP pages is still in its experimental phase, but it’s on our roadmap. In the meantime, an optimal UX would be to present a single action on the page to ‘Select options and buy’ which would then load the PWA.

AMP for ecommerce PDP image

This example of a Lancôme AMP product description page (left) shows how shoppers are presented with a single action to ‘Select product options’. Once clicked, the shopper transitions to the PWA experience (right) and keeps the heavy interactivity of choosing product options and adding-to-cart off the AMP.

Will my customers be able to search from an AMP page?

Certain behaviors, such as automatically triggering the keyboard or displaying suggested search terms, are not possible with AMP, but a combination of amp-lightbox and amp-form can be used to create a search experience similar to most non-AMP pages.

AMP for ecommerce lightbox image

Use of amp-lightbox allows search keywords to be taken before loading the search results in the PWA. Lack of JavaScript, however, means that the keyboard cannot be automatically activated and there can be no suggested results.

Will I be able to use my company’s branded font on the AMP?

AMP-font can be used to render custom fonts in an AMP document, however, we recommend you use these fonts sparingly and favor system fonts instead. Device fonts are faster to load and reduce code complexity, which may otherwise cause failures in the AMP validator.

My company has a ton of products. Will our customers still be able to sort from an AMP?

Amp-form contains a ‘select’ element that allows the user to choose a sorting option within the AMP document. The PWA version of the site is then loaded with the new sorting option applied.

What about filtering?

Currently AMP only supports one amp-sidebar per document. If it is used for the navigation drawer, the ‘filter’ action should transition to the PWA experience. If not, amp-sidebar can be used to display the filtering options instantly without leaving the AMP page.

AMP for ecommerce sidebar image

Mobify’s test site Merlin’s Potions shows how amp-sidebar and amp-accordion could incorporate list refinement options into the AMP document, linking through to the filtered product list on PWA.

Images are really important on our product description pages. Will AMP affect this?

Amp-carousel can be used to allow the user to browse multiple images on a product page. Enlargement is also possible using amp-lightbox. Pips (the dots you often see below an image carousel that indicate how many images there are) and thumbnails are not supported on AMP.

AMP for ecommerce carousal image

Lancôme uses amp-carousel to present its multi-image product pages as a scrollable carousel, along with amp-lightbox to offer enlarged images within the AMP page.

What about products that require a written description?

Static product information such as the description, specifications, and shipping info can be organized using amp-accordion. The amp-accordion component can be styled to look and perform the same as its PWA counterparts, as shown in this example from Merlin’s Potions.

 How do customer reviews work on AMP for ecommerce?

Information such as reviews and product FAQ are essential to a good shopping experience, however, ecommerce sites often load this content dynamically through a JavaScript library that’s not supported by AMP. Use our UX best practices to ensure that shoppers are aware they can access the content through a seamless pathway to the rest of your site.

Related products have a big impact on average order value for my company. How do they work on AMP?

Provided your related products are available in the HTML, they can be presented on the AMP document using amp-carousel. If this is not the case, a seamless AMP-to-PWA pathway should allow the user to access this content.

AMP for ecommerce carousal image

Lancôme’s product image viewer shows how amp-carousel can be adopted to display content in a horizontally scrollable display of content.

How do I get AMP for ecommerce on my mobile site?

AMP is included as a new feature of the Mobify Platform.

Core components include an AMP user interface (UI) kit containing best practices for AMP page designs, together with a software developer kit for adding AMP pages to any PWA. A pre-built AMP for ecommerce component library and integration with ecommerce backends speeds time to market, while AMP analytics in Mobify’s Engagement Engine track bounces, click-throughs, and conversions.

More questions?

We’re here to help! Email us at hello@mobify.com

See how AMP for #ecommerce makes #mobile shopping quick and friction-free. Click To Tweet

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.