We all know that 1 in 2 of your mobile site visitors leave after 3 seconds of load time. This is why AMP (Accelerated Mobile Pages) stepped up and came to the rescue by responding to this exact challenge, without the large team and large budgets that would usually go with it.
What is AMP?
Accelerated Mobile Pages is an open-source Google & Twitter project – a way to publish online. One that initially came as a response to Facebook’s Instant Articles and Apple News. An initiative that would make static pages load even faster (pages that don’t depend on user behavior).
It’s an HTML subset, especially optimised for mobile navigation. It was designed to provide a fast website experience and, at the same time, to maintain flexibility. As in keep the ability to style the look and feel of the brand in a way that supports functionality.
Its main scope is to enable visitors to do what they came on your site to do.
Basically, it has three core components:
- AMP HTML – it’s HTML code, but with some restrictions to enable performance in terms of both speed and content readability.
- AMP JS – it’s the JS library that deals with resource loading and implements AMP’s best practices to ensure pages render quickly.
- AMP Cache – basically, AMP fetches and caches pages without taking them back to the publisher, which increases performance.
Fundamentally and simply put, AMP is a super lightweight HTML page with a lazy load functionality and a heavy caching system. Lazy loading in the sense that JS loads pictures when you get to them, as you scroll down and heavy caching as in Google hosts your AMP pages so that they don’t need to fetch it from you anymore. A bunch of best practices for building mobile web pages, as the guys from eBay call it.
How is AMP good for eCommerce?
It was initially built for static pages and text, such as news and blogs and other related content, and it then progressed to create high performing websites on any niche. Retail included.
As we mentioned in the beginning of this article, speed and mobiles drive eCommerce because that’s what determines user retention. One might even conclude that fast pages help with conversions. So, in this context, it comes off quite handy because of its synchronization with visitors’ preferences.
Google reports show that 75% of mobile sites take 10+ seconds to load which definitely encourages visitors to switch sites. But, if we were to copy web pages into Google’s AMP cache, they would take milliseconds to load.
Another issue might be that 91% of mobile sites load more than 50 resources, which translates into a great deal of requests sent, which, again, affects loading speed.
In terms of actual pages, home, product and product category pages are best optimized with Accelerated Mobile Pages. The content there is typically static, and doesn’t usually change based on user session.
Also, to personalize and understand user behavior, AMP has support components for Google Analytics and Tag Manager. Thus, it collects data directly or it can integrate it with 3rd party analytics platforms. But, the bump in the road here is that Google Analytics doesn’t do cross-domain analytics, which is what Accelerated Mobile Pages require to track correctly.
On top of that, because it’s a Google product and it’s easily integrated in their system, it will influence search rankings, and thus help with SEO. It also facilitates and encourages distribution through social pages.
The AYG AMP Theme
Here, at AYG, we always stay up to date to the latest trends, so, when we had the chance of pitching this framework to our partners, we said a strong “Yes!” and challenged ourselves to create an AMP theme to fit Magento 2 requirements.
Magento is an extremely complex platform which uses a lot of JS. On the other side, an AMP theme is very simple and comes with a lot of limitations. So, the greatest challenge, in this case, is making sure the online store will function properly within all restrictions.
Well, the first step we took to solve that and ensure functionality performance was deciding which pages are AMP compatible and what to do with the rest of them. To start with, we chose the home, product and category page, so that, now, these pages load in less than 1 second. These are the pages that show up in Google searches, so that’s why it’s quite important they’d be AMP compatible.
On a side note, We can distinguish Accelerated Mobile Pages by the small, grey lightning bolt at their left. In time, visitors will become more and more aware of this mark and will feel inclined to access them instead of the regular pages.
We then added a complex menu, on more levels. Accelerated Mobile Pages access that menu through AMP components, such as the AMP sidebar, whereas non-AMP pages use very little JS and CSS code language, which is a better solution for mobile.
Now, if you’re interested in AMPlifying your online store or to simply find out more about AMP themes and how they can benefit you, get in touch! Your store doesn’t have to load slowly, anymore! *wink
