Accelerated Mobile Pages (AMP) for Magento 2

[akent99]

With Black Friday approaching, ecommerce retailers will be competing to attract mobile shoppers. For most retailers, however, this presents a challenge, as mobile traffic is rising but conversions lag behind. And the main culprit for poor performance is slow-to-load pages. As the Aberdeen Group points out, for every one-second delay it takes a page to load, the result is a 7-percent loss in conversions. To address this problem, Google launched Accelerated Mobile Pages (AMP), which delivers a consistently fast experience to handheld devices.

This blog post provides a high-level overview of Google’s initiative, including a skeleton Magento 2 module to help developers get started on their first AMP project. This goes beyond responsive web pages that Magento has supported since Magento 1. Magento teamed up with WompMobile, a digital agency that’s launched over 2 million AMP pages, to build the module and to inform the technical content of this article.

Please note that AMP is a separate Google initiative from Progressive Web Apps (PWA) discussed recently on this blog. AMP and PWA can be used separately or together to deliver high performance customer experiences. This blog post is to educate developers about AMP. Magento is not currently actively working on AMP as we are focusing on PWA.

AMP solves a legitimate problem

This mobile dilemma – the surge of smartphone traffic paired with lackluster conversions – is a principle reason why Google created the AMP project.

AMP is an open-source initiative, a subset and a superset of HTML, that removes speed-robbing elements from websites. How? By limiting custom JavaScript, using light-weight architecture, and by serving pre-rendered, pre-cached pages to users directly in search results. Even before a user clicks on an AMP page, content is pre-loaded and delivered

The speed is undeniable. On average, AMP pages load four-times faster and use 10-times less data compared to non-AMP pages. And, in many cases, sites appear to load instantly, offering a fast, responsive experience.

Building your first AMP page

AMP pages are built with three-core components: AMP HTML, AMP JS, and AMP Cache.

While most HTML tags work as expected, some HTML tags are either intentionally unsupported or replaced with performance-oriented AMP components (see spec). For example, the <object> tag is prohibited, as it allows resource-intensive applications like Flash, and <img> is replaced with <amp-img> to enable finer control of image-resource loading and positioning.

JavaScript is powerful but it can delay page rendering. Balancing the need for functionality and page speed, AMP has firm limitations on custom JavaScript. For example, third-party JavaScript is allowed in iframes but cannot block rendering and must be 75 percent of the way down from the top of the page. With the AMP JS library, however, many common functions that once required JavaScript are replicated with AMP components and action-aware element attributes.

All valid AMP pages can (optionally) be delivered to visitors by the Google AMP Cache. This ensures consistently fast page loads. The Google cache fetches AMP HTML pages, stores them, and automatically improves page performance (including image and asset optimization). The cache also comes with a built-in AMP validation system.

But does AMP work with Magento?

A common misconception is that AMP and ecommerce don’t mix. Popular criticisms include that AMP pages lack style and functionality, and that third-party integrations – such as customer review platforms and product recommendations – are not possible. While some of these concerns were valid when AMP was first launched, today, they are immaterial. AMP has evolved since its inception – constantly adding more functionality – to strike a balance between mobile performance and ecommerce functionality.

Everyday, AMP pages deliver effective shopping experiences, converting browsers into buyers. Examples of the ecommerce functionality being used in AMP pages include:

• Integration with enterprise inventory systems
• Ability to choose – in real time – from product options (e.g. sizes, colors, models, etc.)
• Incorporation of the main site’s cart and checkout
• Showcasing of related products and real-time pricing
• Use of existing security and payment options

For Magento users, there’s an easy way to get started.

WompMobile and Magento worked together to develop a module that provides a basic template for displaying Magento product pages in valid AMP markup. The module is intentionally minimal; site-wide themes are not applied and only basic product information is displayed. The hope is that the Magento developer community will recognize AMP is both easy to implement in Magento and a worthwhile undertaking – delivering pages at amazing speeds.

The demo module is open source and available at github.com/wompmobile/Magento-Module-AmpProductExample. Installation and usage instructions are provided in the readme.

Developing AMP pages in Magento

Two common techniques to produce AMP pages from existing content include:

• Processing post-rendered content. This technique is easy to implement and is useful when AMP conversion is outsourced or server access is limited. A web page is rendered, unsupported elements are converted to AMP components or stripped away, if necessary, and the final source is posted to an amp-specific domain.
• Providing a template where content is imported. The demo module uses this method. It is consistent with the philosophy of content management systems like Magento. Website visitors are served fast-loading AMP pages with up-to-date product information.

The demo module consists of two core components:

1. An AMP product template: view/frontend/templates/index/index.phtml
2. A block that contains the functions used to populate the template: Block/AmpProductBlock.php

There's plenty of room for interested developers of all skill-levels to display more product information, make the page themeable and, eventually, compartmentalize the code into smaller templates and helper classes. This is a simple first step into both AMP markup and Magento module development. The AMP by Example Product Page is a great resource for implementing features in AMP, and the Magento Catalog module serves as an ideal reference for retrieving product information.

Some of the more interesting tasks that remain to be implemented include product variant selection and additional media display. Product variant selection involves use of amp-bind to set state variables, allowing element show/hide operations. Product audio and video clips can be presented via a number of media-specific AMP components. Support for popular streaming services like SoundCloud and YouTube have dedicated components and you can serve your own content using amp-audio and amp-video, replacements for the HTML5 audio and video tags, respectively.

Lastly, to make a newly created AMP page discoverable, you must link from your original site to the AMP page using a <link rel=”AMPHTML” href=”AMPPageURL”> tag. The addition of the <link> tag alerts Google that an AMP version of the page exists, which is then cached and displayed in search.

AMP delivers on the bottom line

The benefits of AMP go beyond speed. It’s also about SEO, user engagement and conversions.

Because AMPs feature a lightning-bolt badge which is a guarantee from Google that a page is an excellent mobile experience, customers are more likely to engage. Click-through rates from search have been measured to increase 29 percent as a result of AMP. And because shoppers are met with instant speed, conversions go up and bounce rates go down.

While Google has been adamant that AMP pages don’t receive preferential SEO, mobile speed and usability are known ranking signals. Many ecommerce retailers are measuring major bumps in keyword rank position and conversions.

With more than 2 billion mobile pages, covering 900,000 domains, the AMP initiative is showing its staying power. During the shopping melee this November, retailers using AMP stand to gain an edge by delivering mobile customers with fast, easy-to-purchase products, minus the friction.