Accelerated Mobile Pages (AMP) for Magento: How to win customer hearts with lightning fast product pages?

AMP for Magento

In today’s world, a second can last a lifetime. Or that’s the feeling one gets as webpages load on a mobile browser. From an e-commerce point of view, it has been a major problem. Despite mobile hogging 60% of the browsing traffic, it only contributed to 15% of the sales. This contrast is glaring when taking into consideration Mobify’s prediction that 70% of e-commerce revenue would be coming from mobile devices. With Black Friday fast approaching, e-commerce retailers need to understand what the consumer is looking for in a mobile shopping experience.

A survey by Fluent in its Devices & Demographics 2017 report mentions that about 20% of the respondents hinted that more mobile purchases would happen if pages loaded faster. Looking at demographics, the percentage rose to 25% when it came to shoppers under 35 years of age. An easy solution to this problem can be found by implementing Accelerated Mobile Pages (AMP), an open source initiative by Google, to speed up web pages by stripping away the clunky elements in a web page.

What is AMP technology? How does it make webpages faster? Where can it be used? These are some of the questions we need to tackle. While the AMP framework can be applied to a host of webpages, this blog will focus on how it can be applied to Magento 2 e-commerce platform.

At The Speed of Light: Accelerated Mobile Pages Explained

AMP is an open source project, initiated by Google, to create fast-to-load pages – essentially a stripped-down version of HTML, with limited custom JavaScripts and pre-cached, pre-loaded directly into the search result. AMP is estimated to load 4X faster and use 10X less data and on an average load in less than a second (which is as fast as you can get!)

How does AMP do this? By laying out a three-part framework:

1. AMP HTML: A subset of HTML, AMP HTML uses a lean model by intentionally not supporting resource heavy html tags or by replacing them with performance driven amp tags. For example, the <img> is replaced with <amp-img> which requires the dimensions and positioning to be explicitly mentioned in the code, so that it can be pre-loaded on to the page.

2. AMP JAVASCRIPT: A complete library of AMP JS has been replicated to replace custom JavaScripts with more enhanced, performance-driven AMP components. Third-party scripts are allowed to run in sandboxed iframes, which ensures the page renders regardless of the JavaScript’s execution.

3. AMP CACHE: It also provides the option of a Content Delivery Network where valid AMP pages can be stored in the Google AMP Cache, which loads the pages directly from the cache, and ensures consistently faster speeds.

Mixing & Matching: AMP & Magento 2

While there is a school of thought that believes AMP is not a good add-on to the Magento platform as they are unattractive and basic in their functionality – this is only a misconception. In its initial days, the AMP Project was quite a bare-bones project; which has now acquired new features over time to match robust mobile performance with e-commerce functionality. AMP pages can be used for Magento 2 functions such as –

1. Linking to inventory systems

2. Displaying product variants (different colors, size and features)

3. Shopping Cart and Checkout procedures

4. Real Time Pricing

5. Payment Portals

Featured whitepaper


Methods and Modules: Create your first AMP 

There are two ways Magento users can create Accelerated Mobile Pages:

1. Process post-rendered content into AMP: An easy and quick to implement method is when the page is rendered and adapted to the AMP supported elements and the final output is uploaded into an amp-specific domain. This is best suited when the work is outsourced to a third-party.

2. Importing content into a demo template: Magento has teamed up with WompMobile to create demo template, which displays a product page with valid AMP structure. The module is open-ended and minimal in design and content and has been kept so intentionally with the intention that the Magento developer community can bring in their ideas and innovations. The module is available in Github with the installation guide and usage manuals. This is better suited when the work is done in-house.

The Final Step: Take the Plunge into AMP

There is no doubt about it: Over two billion pages and 900k domains have adopted AMP; and it is phenomenon that e-commerce retailers can ignore at their own peril. Google has maintained that AMP will not get preferential SEO. But one can scarcely ignore the fact that armed with lightning bolt badge, AMP loads 2X faster and reduces bandwidth usage on slower networks, making it a must for retailers during the upcoming shopping season. 

We’re listening

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn.

Author : Anish Shankar Date : 06 Nov 2017