How to develop an eCommerce AMP

You are viewing a cached version of this page! Last updated 2019-08-24 08:15:33pm.
We will update this page as soon as you get back online

Published on 26/06/19 by Bradlie Houldsworth.

As of 2019, 52% of total internet users are browsing via mobile phones or similar small-screen devices. Statista recently announced (click here to read) this percentage is likely to increase beyond 80% in the coming 2 years. Therefore, eCommerce retailers are focused and looking towards improving mobile customer journeys and development functionality, website features and technology that is focused solely for mobile devices.

In this article, we explore why and how the Google AMP project was initially created, how eCommerce retailers can migrate towards this latest format of the web, and whether AMP is a good idea at all.

What is AMP?

AMP stands for Accelerated Mobile Pages and is a website framework and format that allows for smooth, near-instant loading of content. It is likely you will have noticed the lightning icon next to particular pages listed in Google, indicating they are AMP-format pages. As well as speed, AMP was developed to focus the web industry on the growing requirement for device-agnostic customer experiences, moving away from fragmented mobile journeys.

Loading speeds are now more important than ever before – firstly, search engines like Google are including this performance and scoring as part of their ranking algorithms, meaning if your website is slower than others then it will rank lower, and therefore receive less traffic from organic listings in search engines. Google’s view on AMP remains favourably and AMP pages are seen to be ranked much higher on mobile devices by default. Secondly, website visitors are not happy to wait any longer than 3 seconds for a page to load – any retailer will be losing traffic if this is the case for them.

The AMP Structure

 The structure and practice of implementing AMP are different for eCommerce retailers, essentially more complex but fundamentally more powerful.

To begin with, AMP was created and launched in 2016 for content such as blog articles, news pages and how-to guides. Before starting to migrate through to eCommerce application in 2017, first spotted on marketplace giant eBay.

Essentially, the AMP setup is relatively straight forward: where instead of having one HTML document for a page, there are two. The second file (where the AMP tags are installed) normally sit on a subdomain or subfolder on the domain. For example example.com/page and example.com/amp/page

The initial structure of AMP pages is made up of 3 parts: the HTML tags, Javascript to replace existing JS and AMP styling.

Build AMP for eCommerce

Every page type on an eCommerce website is not relevant for an AMP implementation, for example, smaller pages with not many large images such as the ‘Contact-us’ page or ‘FAQ’ page would not need transforming. However, page types like product categories or the homepage, are ideal for AMP implementation.

AMP relies on simple Javascript and CSS, making the on-page functionality available fairly restricted for the time being. The framework also disallows further more extensive Javascript, like iFrames not being allowed.

Although rewriting large areas of a website can be a daunting task, the AMP framework allows for functionality to be written relatively quickly. AMP will help you with the following areas when it comes to building product pages:

  • Product Image Gallery
  • Product Configuration
  • Add to Bag
  • Product data in Tabs
  • Star Ratings
  • Comments and Reviews

The ‘Getting Started’ guide on the AMP documentation website gives details and samples of Accelerated Mobile Page code, which can be useful when implementing. The topics cover installing a product page using the amp-bind component, product category pages including amp-form for the Site Search component and also checkout payments via Android & Apple Pay. Click here to read the ‘Getting Started’ guide.

Track Commerce AMP

Tracking accelerated mobile pages in 2019 should really be more advanced than it currently is. Tracking any eCommerce site is essential and critical to any retailer looking to understand customer behaviour. However, because of the JS restrictions in place, the only tracking tags allowed to fire on an AMP page is Google Analytics and official partners such as Adobe Analytics, Chartbeat and Quantcast.

Despite the restriction on tracking, the publishers and retailers who have implemented AMP have reported incredible performance gains, for example:

  • AMP pages are 4x faster, use 10x less data compared to non-AMP pages
  • On average AMP pages load in less than 1 second
  • 90% of AMP publishers experience higher page CTRs (click-through-rates)
  • 80% of AMP publishers experience higher ad viewability rates

The benefits of AMP for Commerce

Speed, speed, speed. By-design, the AMP framework is quicker than any other web format, it does this by changing the architecture of a web page and adding client-side caching through service workers. It is possible to improve speed even further by using the AMP CDN.

Speed leads to higher Google rankings, higher rankings lead to higher volumes of traffic, and higher volumes of traffic lead to higher revenue. SEO 101.

Additionally, the consumption of mobile web pages is only ever going to increase over time and the instant-loading of pages will promote visitors to return to your website in the future if their experience has been positive. 

Common AMP myths debunked

  1. AMP is owned by Google
    False. The AMP project is headed-up by Google however the technology itself is open-source.
  2. AMP is only for publishers or static pages
    False. AMP functionality is growing monthly and will soon be a strong enough framework for advanced commerce features.
  3. No eCommerce retailers have developed AMP pages
    False. Check out these retailers and their eCommerce AMP implementations: Campmor, eBay, Carved and WeGo.
  4. You cannot personalise AMP
    False. Using the amp-access component from the AMP framework allows for displaying customised content for logged-in and known users.
  5. Responsive is just as fast as AMP
    Technically true. Yet typically this is incorrect, as 99% of responsive web pages are bloated with additional tracking tags, un-needed code and additional assets are loaded that inevitably slow load times down.

You can find more information about AMP, what features will be available soon and further resources on developing this technology here: https://amp.dev/

If you are not convinced that AMP pages are the right option for your eCommerce development schedule, then we suggest exploring Progressive Web App technology.

Discover how to be

Download the brochure including a full list of Remarkable.net's product features.
Please enter your details and we will send you our extensive introduction to our technology