Accelerated Mobile Pages (AMP) : Jargon Buster

Google’s Accelerated Mobile Pages (AMP) project is an open source initiative that aims to help content publishers create more optimised mobile experiences. If you have spent any length of time browsing the web on a phone you can probably identify with the problem Google are aiming to solve…

“For many, reading on the mobile web is a slow, clunky and frustrating experience.”

And most of this is down to a growth in page weight and the number of different resources that are called upon in rendering a single page. The average size of a page, in terms of kilobytes, continues to grow year on year (depending on where you take your numbers from, anything up to 16%) and the number of http requests made per page is also rising steadily. A fairly conservative assessment would put the average web page at over 2mb in size and rendered from more than 100 http requests.

The worst culprits tend to be websites where content publishing is subsidised by advertising and so a typical page can include a whole raft of tracking code, banner advertising networks, social sharing scripts and syndicated content feeds all of which add weight and http requests. We found a popular technology blog that made more than 500 http requests just to render a single article page!

As computers have got faster and bandwidth more plentiful the impact of this bloat may not be that noticeable on desktop, but on less capable devices, running on slower mobile networks, the result can be a painfully slow browsing experience, just when speed can matter most.

Step in Accelerated Mobile Pages

The Accelerated Mobile Pages project addresses this with a new by framework, built out of existing web technologies, that helps publishers create light-weight web pages that can achieve near instant loading times. Think of it as standard HTML, but with some restrictions for reliable performance. For example all CSS must be inline, scripts must be called asynchronously and external resources like images must state their size in the HTML. Most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags.

Remember that article page that made more than 500 http requests? The AMP equivalent cuts it down to just 31 and drops the overall page size by around 3MB. On a pretty good broadband connection the difference in load time is pretty similar, but on a slow 3G connection it grows to a 11 second advantage for the AMP page.

Google is also providing access to its own content delivery network (CDN) and caching system for delivering any valid AMP document. So when a visitor requests a page it can be served up directly from this Google AMP Cache rather than you own hosting. Their vast infrastructure and ability to do things like pre-load the top results on web searches means that can really help give an extra performance edge, resulting in effectively instant page loads.

Why should you care about AMP?

The benefits of improved website performance are neatly illustrated by research carried out by some of the web’s biggest names. Google found that 2% slower page load times resulted in a equal drop in searching per user. Amazon found that just a 100ms improvement was enough to generate an extra 1% of revenue and Yahoo that a 400ms improvement resulted in 9% growth in traffic.

40% of people will abandon a website that takes more than 3 seconds to load.

As the main proponent of AMP Google is doing its bit to encourage adoption by waving the usual carrot/stick of search rankings. Additional prominence is already given on mobile to news sites that have implemented AMP for their articles and it is reasonable to expect that this trend will continue. The time a page takes to load has an obvious impact on user experience so perhaps it should be no surprise that Google would make it a ranking factor and those who have been early to adopt are already seeing the benefits.

Slate magazine saw a 44% increase in monthly unique visitors from Google searches and a 73% increase in visits per monthly unique user. The Washington Post saw a 23% increase in mobile search users who returned within 7 days, while Wired saw a massive 63% increase click-through-rates on in ads in AMP stories. All of which seem like some great returns from simply making existing content available in the new AMP format.

Implementing AMP on your website

If you are using one of the popular content management platforms implementing Accelerated Mobile Pages can be pretty straightforward. In fact you could be up and running with something workable in about a day. Remember you aren’t replacing your whole site with an AMP-based one, simply serving up AMP-formated equivalents of certain pages, a bit like presenting your content in a different language. To help Google and others discover your AMP content a meta tag is added to the head section linking your original page to its AMP equivalent and vice versa.

At this point article-type content is the most easy to adapt to the AMP format and that is where most of our clients have chosen to trial it and where we are using it too (see the AMP equivalent of this article). But simple landing pages and other static content could also benefit from the AMP touch and there is certainly no harm in adopting the format more widely, especially if you have a predominately mobile audience.

If your website is already efficiently coded, uses optimisation techniques such as minification and compression and page caching then the returns from implementing AMP won’t be as great. Even so the principles behind this new framework are still worth adopting. We have always viewed good performance as a key element in the success of any design, which is why performance budgets, pre-launch benchmarking and then monitoring real-world performance after are are all part of the set of Design Standards that we apply to all our web development projects.