Magento 2 AMP Extensions

- E-Commerce, Magento 2

Magento 2 AMP Integration

As a Magento merchant, you might have already faced the following problem: the slower you pages are, the more customers abandon your store. We’ve created several guides related to the most vital performance improvements for both platform versions (Magento Performance Guide, Magento 2 Performance Guide), and today we’d like to draw your attention to Google AMP which stands for Accelerated Mobile Pages. More and more people start using smartphones to purchase online, so mobile support for ecommerce websites is a must. But your store not only should have a responsive layout or a separate mobile version, but also be fast and agile. In order to achieve this goal, we propose you to install one of Magento 2 AMP extensions mentioned in this post.

The Google AMP project was developed to solve the problem of choice related to the user experience/monetization binary opposition. A small viewing surface and the desire to get as higher monetization as possible lead to the problem when store visitors get slow mobile websites with lots of unwanted content. As a result, they neither click on ads, nor stay on the website. But how does AMP solve the problem?

Magento 2 AMP IntegrationBeing an open source subset and super-set of HTML, AMP eliminates speed-robbing elements. It sets limits on custom JavaScript, fully leverages light-weight architecture, and provides users with pre-rendered and pre-cached pages directly in search results even before an AMP page is clicked. This leads to a dramatic mobile page speed improvement: an average AMP page loads four-times faster than a non-AMP one. At the same time, it uses ten-times less data and the user-oriented content gets much higher priority than other page elements, so users get it above all others. Such brilliant AMP Google results, aren’t they?

Three core components AMP pages are based upon are special HTML, JavaScript, and cache. For instance, you will never find the <object> tag among other HTML tags of the optimized page. Why? Because it allows resource-hungry apps that essentially slow down page load speed. Furthermore, some common tags are replaced with new ones. The most obvious example is the new <amp-img> tag. As you might have already guessed, it is used instead of the <img> tag. The replacement enables better control over loading and positioning of images, providing better page performance.

As for the usage of JavaScript, it is limited by the AMP project. Of course, JS is a powerful technology, but a custom code may essentially slow down website pages delaying page rendering. Therefore, custom JS is used in iframes but it doesn’t have authority to block rendering. Furthermore, the third-party code must be situated 75 percent of the way down from the top of the page. Also note that many common functions that were initially based on JavaScript are replicated with: 1) AMP components; 2) action-aware element attributes. This is how the second core component of the AMP project works. What about cache?

The usage of the Google AMP cache is optional, but it also plays an important role in making store pages faster. It fetches and stores AMP HTML pages and optimizes both images and assets improving website performance. And there is an AMP validation system built into the cache, so you can get lots of benefits by leveraging this third key component of the project. For further information about the project, check this accelerated mobile pages wiki and watch the video below. We however should tell a few words about Magento 2 AMP integration.

Magento 2 AMP Integration

While it was hard to imagine how the AMP project with all its limitations would be used in ecommerce in the beginning of the AMP era, it no longer causes such questions. Yes, the first AMP pages looked absolutely unaccomplished and lacked third-party integrations, but the project has come a long way towards ecommerce with all its requirements, so all old concerns are now immaterial.

A balance between ecommerce functionality and mobile performance has been achieved. The project fully supports integration with various inventory management platforms, allows customers to select product options in real time (yes, all product types are supported!), leverages cart and checkout functionality, enables real time pricing and related products showcasing, and allows using security (!!!) and payment options. Nothing similar was possibly when the project was launched.

Now, lets focus on some technical aspects of the optimization. There are two ways to create Magento 2 AMP pages:

  • Post-rendered content processing; 
  • New template usage.

 

These two different techniques have different features and implementations, and since Magento 2 has its unique ecommerce requirements, there is only one solution that is utilized in its case.

The first technique is widely used when server access is limited or AMP conversion is outsourced. While the page is rendered, all supported elements gets the following treatment: they are either converted to AMP components or stripped away. Next, everything is posted to a specific domain. It is not suitable for ecommerce.

In case of Magento and other similar systems, the second approach is implemented. The usage of special product page templates allows providing visitors with fast-loading AMP pages with relevant data. And there is no need to create such templates and pages manually, since the ecosystem already provides some reliable Magento 2 AMP extensions. Let’s start with the official demo module that may be used in production.

WompMobile Magento 2 AMP Extension

Magento 2 AMP Integration

If you are looking for a basic free solution that not only demonstrates the AMP project integration with Magento 2, but can be also used on a live website, pay attention to the WompMobile Magento 2 AMP module. This extension consists of just to core components: the template itself and a block with functions necessary for template populating. This Magento 2 AMP plugin is not meant to be comprehensive for all ecommerce stores. Its core purpose is the demonstration of a proof-of-concept. It shows how to create a module that loads a custom page template, write an AMP page, and populate a template with basic product data. Everything is extremely simple but yet effective, so you don’t have to worry about some complicated concepts while mastering the new technology. Note that site-wide themes are not applied with the WompMobile Magento 2 AMP module. It is responsible for basic product information only. For the Magento AMP extension free download, follow this link:

Download / Buy WompMobile Magento 2 AMP Extension

Plumrocket Accelerated Mobile Pages (AMP) Magento 2 Extension

Plumrocket Accelerated Mobile Pages (AMP) Magento 2 Extension Module Review

Now, let’s describe the most reliable Magento 2 AMP extension in the whole ecosystem. Meet the Plumrocket AMP plugin. The tool is as simple as the aforementioned free AMP Magento 2 extension in terms of usage, but much more powerful. It creates highly optimized separate store pages in accordance with all Google AMP standards. Google AMP-optimized pages are generated not only for product pages, but for homepage, categories, as well as catalog search and CMS pages. Thus, mobile page speed may be enhanced for the whole Magento 2 website.

Plumrocket Accelerated Mobile Pages (AMP) Magento 2 Extension Module Review

Furthermore, the Magento 2 AMP extension by Plumrocket allows customizing your AMP-optimized pages right in the backend section.

It is also necessary to mention that Google AMP Cache is utilized. Besides, you can enable/disable the extension for smartphones and tablets separately (‘Force AMP On Mobile Devices’ and ‘Force AMP On Tablet Devices’ features).

Plumrocket Accelerated Mobile Pages (AMP) Magento 2 Extension Module Review

On the following image, you can see an example of an AMP-optimized category page. Scan the QR code to check Magento 2 store performance right on your mobile device.

Plumrocket Accelerated Mobile Pages (AMP) Magento 2 Extension Module Review

The price of the PlumRocket AMP is $199. For further information, follow this link:

Download / Buy Plumrocket AMP Magento 2 Extension

Webkul Accelerated Mobile Pages (AMP) Magento 2 Extension

Magento 2 AMP Integration

Another reliable Magento 2 AMP extension is offered by Webkul. The module is designed to create the same AMP-optimized pages for m-customers. The extension enables faster page loading, improves SEO ranking, and offers better user experience. The two supported page types are product pages and category pages.

Magento 2 AMP Integration

Thus, the Magento 2 AMP module by Webkul provides a little bit limited opportunities in comparison to the aforementioned Magento AMP extension. At the same time, it costs just $99. While we don’t think that there is huge difference between $99 and $199 when it comes to vital performance optimization, for someone it may play a key role when choosing a module. For further information about the Webkul AMP Magento 2 extension, follow the link below:

Download / Buy Webkul Accelerated Mobile Pages Magento 2 Extension

BSScommerce Google AMP Magento 2 Extension

Magento 2 AMP Integration

BSScommerce offers the middle course. The BSScommerce Google Magento 2 AMP extension allows optimizing not only product and category pages, but also a homepage. Furthermore, the module provides the ability to customize AMP pages by several AMP-standard widgets. Thus, you can additionally configure banners, product lists, iframes, social share features, etc. Another vital aspect of the module is styling for each page type via custom CSS. At the same time you can avoid it by using standard backend options (Plumrocket offers a wider range of options).

Magento 2 AMP Integration

Google Analytics integration for AMP pages is possible as well. And it is allowed to enable ‘Search’ and ‘Subscribe To Newsletter’ blocks. As you can see, the AMP Magento 2 extension is powerful enough and it costs $119. For any additional information, follow this link:

Download / Buy BSScommerce Google AMP Magento 2 Extension

Final Words

And if you still think that we are so excited just by the mobile page speed improvement the AMP project provides, you are right only to some extent. Of course, a Magento 2 ecommerce store must be lightning-fast on all devices and separate speed improvements for smartphones and tablets is inevitable in case you are going to run a successful online storefront, but there are some more aspects of the AMP usage we should draw your attention to after all.

Optimize your store pages with AMP, and Google will provide you with a lightning-bolt badge. The badge shows that your store provides an excellent mobile experience. According to Magento DevBlog, click-through rates from search increase up to 29 percent. And since you provide fast pages with optimized layout, conversion goes up. Consequently, bounce rate goes down.

Although the official position of Google doesn’t let AMP pages receive preferential SEO only because they have new HTML tags and JS limitations, there are still two strong ranking factors caused by the AMP optimization: increased mobile speed and enhanced customer experience. Both lead to major bumps in keyword rank position. Thus, another vital aspect of the technology is SEO related to mobile search with all the consequences that come with it.

So, we recommend you to follow Google AMP guidelines to improve the mobile version of your Magento 2 ecommerce storefront. To simplify the procedure, choose and streamline the Magento 2 AMP extension that suits your needs the best.