This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

AMP for Ecommerce: A Definitive Guide for Mobile Browsing

Updated on  May 8, 2018

7 Min Read
Reading Time: 7 minutes

[UPDATED] Around 52 percent of the total internet users use mobile phones and similar devices to surf the internet today. According to Statista, this percentage will increase in the next two years to almost 80 percent. That’s just one reason why Google considers the speed of mobile websites an important ranking factor. Businesses now must make sure that the website pages must load flawlessly faster for mobile devices or else they might lose their SERP positions.

Google has launched Accelerated Mobile Pages for ecommerce sites, its own open-source framework for making pages lighter and faster.

AMP for Ecommerce

So, in order to help you, I have written this detailed guide on how you can use AMP framework to increase your ecommerce application’s speed and make it more attractive on mobile devices.

What Is AMP?

AMP is an open source initiative by Google that enables publishers create faster loading pages for improved experience on mobile devices. Through AMP, developers can easily achieve higher performance without altering the primary code structure.

Components of AMP

AMP speeds up website pages on mobile by adding AMP snippets to the website code. The code structure is simple and any developer with hands-on experience of frontend development can easily add AMP framework to a website.

The structure on an AMP page is made up of three components. These are:

AMP HTML

AMP works by adding custom HTML tags to the website. The change in code structure can be used to show an AMP led version of the website on mobile devices.

Here’s a complete list of AMP code snippets for ecommerce websites.

AMP JavaScript

AMP has also released a JavaScript (JS) framework that replaces the existing JS on the website for easier loading on mobile devices. Regular JS won’t work with an AMP HTML code because of delayed rendering.

AMP Styling

AMP offers few templates so that developers don’t have to start from scratch. With these templates, they can make deploy-ready websites faster. The AMP templates are available here.

How to Add AMP to Ecommerce Stores

Initially, AMP was rolled out to make blogs, articles, and other static content load faster. While generally, ecommerce websites run slow on mobile, so it makes sense to add AMP-functionality to these ecommerce websites to decrease their page-response time. Therefore, here is the step by step process given below on developing a basic ecommerce page with AMP functionality.

Read on to know what elements you need to enable AMP on your ecommerce store.

Add AMP to Homepage Layout

Majority of the traffic coming to your store will directly land on the homepage and then will browse to the inner product pages. So to make this customer journey smooth by simplifying the layout, the homepage content shouldn’t be static. Counter this by adding ‘amp-carousel’ to the products on the homepage for faster loading.

AMP Carousel

The front layout of the web page when using AMP Carousel.

Enabling AMP

AMP-List Code taken from AMP by Example

Read more about enabling ecommerce AMP on the homepage using AMP by Example website.

Add AMP to Product Pages

The product pages are usually filled with extended descriptions, reviews, pictures, and prices. AMP features ‘amp-accordion’ to add tags to all elements on the product page.

You can also add related products and videos using ‘amp-carousel’ and ‘amp-video’ elements on the product pages in the same way.

Or, if you want to give users the privilege to share product links, that’s also possible with ‘amp-social-share’ element. For easy navigation, add a sidebar using ‘amp-sidebar’ that makes it comfortable to navigate on the whole page.

Amp Example

Check out Amp by example for more details on how to edit product pages.

AMP Caching

In the google AMP ecommerce framework, you can allow caching of the website using Amp-install-serviceworker on client’s browser. However, this only applies to Progressive Web App (PWA) based website and will work on three browsers including Chrome, Mozilla, and Opera for now. AMP service worker helps decrease the page loading time by fetching the AMP page from the browser, but it requires subsequent visits to the website.

Personalized Experience

AMP also helps you make custom webpages based on user’s personal preference. Using the amp-access component, you can find out if the user is logged in or not. It also comes with its own amp-analytics component that provides an easy way to learn about the types of visitors that your platform is getting.

AMP analytics

See the complete list of amp-analytics vendors available with AMP.

Pros and Cons of AMP

Some of the major benefits and drawbacks of AMP framework that you should understand before adding AMP to your website are:

Pros of AMP for Ecommerce

Makes Website Lightning Fast

AMP has one specific purpose that is to increase the speed of your webpage on mobile. It does that by, first changing the architecture of the web page and then adding client-side cache through service workers. Moreover, site administrators can also get AMP CDN to speed up their websites even further.

Increases Mobile Rankings

Google has now made speed a major ranking factor, and AMP plays a crucial part in increasing page speed. It now shows a lightning symbol next to each website that has AMP enabled in the SERPs. So, using AMP can also benefit you from that.

Mobile Search Results

Source: Search Engine Land

Boosts Performance

For websites that get a lot of traffic, AMP can reduce their load time significantly by transferring the load to the client. However, this can be further improved by using the Google AMP cache URLs.

The Google AMP URLs reroute the traffic from Google servers to your website. In this case, the users will not see the actual URL but the webpage will load a lot faster.

Read how it works here.

Cons of AMP for Ecommerce

Hard to Implement

One problem with AMP is that it is really hard to implement if you aren’t a developer. But if your website is on WordPress, then the implementation is much easier. You only have to add AMP for WordPress to your website and it will take care of the rest.

Doesn’t Guarantee Higher Rankings

Before you get all excited and make your website AMP-enabled, remember that it doesn’t GUARANTEE higher rankings in the SERPs. Though Google has said that speeding up the website will lead to higher rankings, because Google will also count other ranking factors to rank the website.

How to Track AMP Pages

There are two ways to track AMP pages on an Ecommerce website. These include AMP’s own tracker and Google Analytics tracker.

AMP’s Google Analytics

AMP’s analytics tracker works by adding the amp-analytics snippet in each page that you want to track. However, in Google Analytics, you will need to add ‘/amp’ while searching the landing pages to search for analytics of each page.

AMP URL

Another way to check how many pages Google indexes is by going to the ‘Accelerated Mobile Pages’ section in webmaster tools.

Accelerated Mobile Pages section in webmaster tools

AMP Plugins for Your Ecommerce Store

If you don’t want to go through the hassles of adding AMP to your website manually, I have good news for you. All top ecommerce platforms such as WooCommerce, Magento, Joomla, and many others have plugins available that automatically add AMP to your ecommerce store.

Here are the list of few plugins that you can use:

WooCommerce AMP Plugins

WooCommerce offers AMP WooCommerce, a free plugin that automatically optimizes your store for AMP. It is completely free to use but is limited in features. Its paid counterpart is WP AMP, a premium AMP plugin for WooCommerce.

Magento AMP Plugins

Just like WooCommerce, Magento developers have also produced numerous AMP extensions to speed-up ecommerce stores operations. One popular extension for Magento is AMP extension for Magento 1, a premium plugin that adds AMP to Magento based ecommerce stores in just a few clicks.

Joomla AMP Plugin

Joomla also offers multiple AMP plugins for its users. One plugin is jAmp that generates the AMP version of each web page. Second is ‘Accelerated Mobile Pages for Joomla’ that automatically creates mobile optimized pages instantly.

Questions on AMP for Ecommerce Sites

A list of common FAQs related to AMP for ecommerce that beginners often ask.

How to Make Sure That Your Website is AMP-Enabled?

AMP also features an ‘AMP Validator’ that checks if the framework is properly deployed on the website.

AMP Validator URL: https://validator.ampproject.org

Will AMP Impact My Search Rankings?

Not directly, but AMP can have impact on the search rankings of the website. As Google considers speed a ranking factor, so in a way, AMP can impact your search rankings. But there is no guarantee that will happen.

How Can I Track AMP Pages?

AMP comes with a built-in tracking tool called amp-analytics. You can add it to your website to track anything from a click to a single scroll. If that isn’t your cup of tea, go with Google Analytics and Google Webmasters to know where your website gets traffic from and how many pages of the website are ranking on the SERPs.

Can I Add Product Reviews in AMP Pages on Ecommerce?

Normally product reviews are added through a JavaScript library. This library isn’t supported by AMP. This means AMP pages won’t show product reviews.

Visitors can visit the Non-amp page of the website to see product reviews instead.

How to Add Product Related Information on AMP-Enabled Pages?

You can organize static product information such as descriptions, specifications, and shipping info using an ‘amp-accordion’ snippet. The feature can display all the relevant information you need on the product pages.

Final Word!

That’s it. We hope this comprehensive post has helped you add AMP to your website and get answers to all the questions you had about AMP for ecommerce sites.

Share your opinion in the comment section. COMMENT NOW

Simplified Managed Cloud Hosting for Ecommerce Stores.

Convert traffic into buyers with managed Ecommerce Cloud hosting.

About The Author

Sajjad Shahid

Sajjad is an Ecommerce Community Manager at Cloudways. He loves helping out Ecommerce store owners, merchants and marketers in establishing their businesses and startups. Sajjad enjoys playing table tennis and cricket over the weekend.

Stay Connected:

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.