Jack Barber / Website Design

AMP - Accelerated Mobile Pages in Perch CMS

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:

https://www.ampproject.org/doc...

The Result

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:

Screenshot 20180130 163254

There are limitation to AMP pages - namely that you can't include external javascript or stylesheets. Because of this, using things like webfonts is tricky (if not impossible). I also chose to not display anything the user wouldn't need to know at this point - so the green bar at the top of the page has disappeared as it's unimportant.

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.

Clearly, cutting out lots of images, external CSS and/or Javascript files and reducing the page content to minimum is going to have a big impact on performance. The question now is whether or not this improved performance keeps users on my site longer, as they're not put off by slower page loading times. Time will tell.