[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 or AMP for ecommerce sites, its own open-source framework for making pages lighter and faster.
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 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 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.
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.
Check out Amp by example for more details on how to edit product pages.
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.
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.
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.
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 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.
Another way to check how many pages Google indexes is by going to the ‘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?
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.
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.
Simplified Managed Cloud Hosting for Ecommerce Stores.
Convert traffic into buyers with managed Ecommerce Cloud hosting.