AMP Project for E-commerce

5 MIN READ

Lately I have heard, several times, about AMP project. There is so many questions around this topic. I have decided to prepare short summary based on my research. I hope, it will be useful for all of you.

Contents

Overview of AMP

This section was created based of following resources:

AMP should not be seen as a new technology, but rather as a collection of relatively complex optimization techniques bundled together for convenience. It’s giving the developer a strict set of rules that if followed, should in theory give you a faster site. AMP fundamentally, is an HTML page designed to be super lightweight and critically designs really fast loading. Some of highlights:

CSS cannot be external stylesheets anymore. All styling has to be included in head section or added inline. The maximum size of CSS is 50kb, comparing to minimised version of Bootstrap which is in itself heavier than 121kb, is interesting change.
Custom JavaScript is not allowed anymore. AMP project gives some additional elements as carousel which can be used instead.
AMP sites get a special tag in the Google search results. However it is worth to remember it is mobile only, AMP is still not be confirmed as a ranking factor in search results.

If AMP will make my site faster?

This section was created based on https://webdesign.tutsplus.com/articles/amp-project-will-it-make-your-sites-faster–cms-25853

It depends. If your site includes a lot of custom JS, huge files of CSS etc it is really likely that AMP will make your site faster as on mobile all of it will be removed. However if your site is already mobile optimized and simple, there is small chance that you will see any difference or even AMP can potentially decrease speed of your site. It is probably good to confider AMP project if:

You’re using enough media to benefit from the optimized loading processes.
You would prefer to have AMP guide your optimization process rather than handling it manually yourself.

One of my favourite sentence: AMP gives you a method to make your sites fast. You can increase speed of your site using other methods and you can achieve better results. AMP project is just one of the methods to make your site faster.

What does AMP mean for developers?

Add specific AMP libraries
Replace standard HTML tags with AMP tags
Reduce CSS and move it to head section or inline
1. max 50kb
2. there are prohibited CSS selectors and HTML elements
External fonts only from Google Fonts or Fonts.com
Remove all custom JavaScript and fancy effects
Width and height of images are static and set in HTML
Validate the site to check implementation with AMP standards

What does AMP mean for e-commerce sites?

This section was created based of following resources:

First of all, it is worth to say that there is not so many ecommerce sites which are using AMP. Personally, I didn’t find any yet, excluding eBay which is used as an example by Google.

Convert just part of your site

There is not possible to convert all ecommerce site to AMP site yet. AMP doesn’t support payment transactions yet. It is recommended to use AMP on homepage, category page and product page, which makes sense.

What about RWD then?

Implementing AMP project doesn’t mean that you don’t need to have responsive site. You do, you have to remember that AMP project is only for mobile, which means, you still need to have responsive site for tablets. Especially on e-commerce site when you will have to switch between AMP product page and Responsive Non-AMP checkout. Implementing AMP to your page means to create a new instance of your page for AMP project, it is double work from development perspective.

Should I implement AMP on my site?

As there is not so many AMP e-commerce site yet, implementation can be expensive. It is still new project, currently it is used just by eBay as first e-commerce site, there is huge risk and time-consuming implementation. Moreover from business perspective and client perspective – AMP sites are really simple, what means, if you decided to create mobile version of your site using AMP, you will need to remember that you are limited, you can only use AMP elements, forget about “fancy” effects, if your current implementation includes so many JavaScript effects, you will need to replace it.

Pros of Accelerated Mobile Pages for Ecommerce Sites

A potential increase in mobile site traffic
A potential decrease in bounce rate (due to faster loading times)
A potential increase in conversions (assuming your site UX and path to purchase is solid)
The lightning bolt tag displayed alongside results could lead to higher click-through rates as users realise more and more that they correspond to quicker loading speeds
Google’s algorithm favours faster pages, therefore better load times could improve your site’s rankings

Cons of Accelerated Mobile Pages for Ecommerce Sites

AMPs only served on mobile–if your mobile site doesn’t see a lot of traffic, you won’t see huge results
Difficult to implement AMP code
AMP files available to be crawled and cached by 3rd parties
Traditional ads slow to load on AMP pages (GDN)
A lack of pop-ups or check boxes
Vendor technology spotty within AMPs
Weaker analytics insights on AMPs
AMPs require time and expertise to implement
Ecommerce sites on the Google Display Network may see lowered impressions on AMP pages on partner sites
Developers will only have a limited level of control over the design and customisation of these pages due to restrictions on the use of JavaScript and other elements that could limit functionality
Analytics could be an issue – although amp-analytics can be utilised on many platforms, there’s still a fair amount to be developed. Ebay have written a blog post on some of the potential complexities that is worth a read
It is currently being recommended by Google Analytics that website owners should set up a separate property for AMP measurement and only certain data can be collected which could limit ecommerce sites. According to Google’s AMP roadmap “support for ecommerce analytics” is currently in the planning and design phase (see screenshot below)
There is also the matter of potential duplicate content issues – but site owners should be able to overcome this by using correct tagging of pages and importantly ensuring that the AMP page contains a rel=canonical tag that references the standard (i.e. HTML) version of the page

What does AMP mean for Magento?

This section was created based on following resources:

Install Magento module

There are ready Magento extensions (Magento 1 and Magento 2) which allows you to convert homepage, category page and product page to AMP pages. I think it could be one of approaches, install module and based on it build rest of the site/modules and learn the code.

Create basic template which will include AMP tags

Another approach could be create base template which can be parent for our client’s template. Base template should be re-build and customise for AMP project. Of course, this option is much more time-consuming however I think it is worth it. Maybe it would be a good idea to work with first approach for couple of first projects and then as soon as you are more familiar with the code, it could be worth to move to second approach.

Conclusion

AMP project is really new project. It is probably not mature enough for ecommerce. In current stage it is better to focus on response performance. However it looks like AMP is growing fast and definitely everybody should look into implementing this as soon as possible.

Zaneta Baran

Zaneta loves challenges so deciding about career path she has chosen typical male industry. Woman who codes. Every 1-2 years she lives in different part of the world. Gym dates is something what she specialised in. Healthy lifestyle, extreme sports and motorbikes have stolen her hear years ago.