AMP - Accelerated Mobile Pages in Perch CMS
With every project I undertake I try and learn something new. The web industry moves so quickly that it's very easy to get left behind. The other night I decided to get to grips with AMP or Accelerated Mobile Pages.
Basically, AMP pages are built in a very similar way to a standard web page, but they're purposefully light-weight and are cached (by Google and others) so that when a user clicks on a link to the page the content loads pretty much instanteneously.
If you use Google Chrome on your phone or tablet you may well have been served an AMP page already, and possibly not even noticed.
As this was my very first experiment with AMP I decided I'd practice on my pilates socks side-project. The site is built using Perch CMS, which is now my go-to solution for content management.
I won't bother sharing my code here - the tutorials on the AMP site are more than clear enough for most developers to get their heads around. Here's a good place to start:
I built an AMP version of my product page. The idea of AMP is to get important information to users as quickly as possible - so I thought I'd start by seeing if applying AMP to my product pages increases conversion. Here's the result, with the AMP version on the left and the standard page on the right:
I've tested both version of the page for grey pilates socks in Pingdom Tools with fairly convincing results. The standard page received a performance grade of A at 85% with a page size of 800kb and a download time of 1.5s. The AMP version weighs in at 200kb, scored 95% for performance and took around 800ms to download.