By Matt Kukawski

With the AMP project celebrating it’s second birthday recently (and 25 million website domains having published over 4 billion AMP pages to date) now is a great time to look into what AMP is and what’s involved in implementing AMP pages on your site.

Back to blog home

Why AMP?

By now, if you do any mobile browsing whatsoever, you’ve likely come across the little AMP lightning bolt in your mobile search results. Accelerated Mobile Pages (AMP for short) is an open-source project championed by Google with partners including Twitter, LinkedIn and Pinterest (amongst a growing number of others). The basic aim of this project is to improve the mobile web browsing experience. 

Back in 2015, an increasing number of in-app publishing platforms looked to seize portions of the mobile content browsing market (FB Instant Articles and Apple News to name a couple) by delivering faster, cleaner experiences than could be had via regular search methods. With the obvious speed and ease-of-use advantages apps provide, some of the heavy hitters in the mobile web industry decided it was time to come up with a way to keep the mobile web browsing experience on a par with apps or risk losing users who got sick of lengthy page load times (let's be honest, there's not many of us today who retain much affection for those blank screens, spinning circles and rotating hour glasses). According to Google53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.” Thus was born the impetus for the AMP project and its goal of near-instant page loads.

AMP page speed

How do AMP pages work?

I’ll save the nuts’n’bolts detail for a follow-up article (or 10… there’s lots to talk about as AMP continues to evolve). Basically AMP is a set of mandated web development best practices. AMP leverages light-weight versions of existing web technologies HTML, JavaScript and CSS to deliver faster, smoother browsing experiences. Note however that to keep pages from getting bogged down by features that aren’t critical to page functionality, there are some constraints on how these technologies can be used. The end result is minimal loading times for pages that meet AMP specifications delivering near-instant page load times.

In addition to the optimised page code, AMP pages also utilise caching to assist in improving page load speed. Google (or another 3rd party host such as Cloudflare) stores copies of AMP pages to facilitate swift retrieval as well as enabling pages to be checked for compliance with AMP standards before being endorsed as AMP pages. To retrieve the relevant page, instead of having to navigate to the servers you use to host your site, Google already has a copy of your page available. It knows exactly where to find it, how big it is and its layout thereby minimising resource and time intensive browser recalculations, additional server requests and the like. 

Page loading is also optimized in numerous other ways including prioritizing the loading of content above the fold, loading elements and scripts in parallel (to prevent one from delaying the loading of others) and partially preloading pages that are likely to be clicked on by a user following a search. Your users can therefore get to reading the content they’re after almost instantaneously while the other page elements are loaded in the background.

AMP elements

Sacrifices had to be made!

As mentioned earlier, to make these speed increases possible some compromises had to be made. The big loser here is all the custom JavaScript used to make pages more interactive and responsive (though nowadays there are CSS3 workarounds for much of the interactivity previously only possible through Javascript). 3rd party JavaScript is restricted to iframes to prevent it from interfering with page rendering (and, as with images, these iframe elements must state their size within the HTML of the page to minimise the need for layout recalculations). The good news is that this still enables Ads and other rich media to be served to users via a growing number of specialised amp elements, including amp-video and amp-ad, using your usual ad network. 

You’re also limited in the amount of CSS you can use (up to 50 kilobytes) and how you use it (inline only), while not all HTML elements are valid for use in AMP pages (though a growing number of customised AMP HTML alternatives exist).

Sounds tricky… fear not, help is at hand

While there’s no way around the fact that you will need to change some code on your pages (or create AMP versions of them) if you want them to meet AMP standards, you’re not flying blind. The AMP project has made a point of trying to minimise barriers to adoption with extensive documentation and initiatives such as the AMP Validator, AMP By Example and AMP Start templates along with numerous others to help make implementing AMP pages as painless as possible.

But what about my data?

Well I’m glad you asked! Understanding user behaviour has become an increasingly important tool in enabling websites to better serve their users as well as meet their business goals. Facilitating the analysis of user behaviour was an early priority for the AMP Project with amp-analytics being introduced to enable this. 

Here at Merkle|Periscopix we’ve a great deal of experience with all kinds of different website tracking solutions but the obvious candidate for tracking AMP pages at present, in our opinion, is Google Analytics tracking via Google Tag Manager. GTM has introduced a specially tailored container just for AMP pages which maintains the simplicity and user-friendly features we’ve come to know and love in GTM but with a specific focus on AMP pages. We therefore feel it’s the perfect tool to get the most out of your AMP interaction tracking. 

If you’re thinking of delving into the world of AMP pages and would like a little friendly advice on how best to go about getting high quality data from them we’d be more than happy to help. Setting up accurate, robust tracking solutions is one of the things we do best so please get in touch.

Share this article