- Overview of AMP
- If AMP will make my site faster?
- What does AMP mean for developers?
- What does AMP mean for e-commerce sites?
- What does AMP mean for Magento?
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.
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.
- 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
- max 50kb
- there are prohibited CSS selectors and HTML elements
- External fonts only from Google Fonts or Fonts.com
- 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?
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
- 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.
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.
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.