How do Accelerated Mobile Pages (AMP) from Google Work?

You may well have already heard of Facebook Instant Articles, which allows publishers to host content within Facebook's infrastructure in such a way that it will load much quicker than an equivalent web page in a standard mobile browser. Facebook's technology is closed, but Google (and others) have created a more open framework with similar goals called the Accelerated Mobile Pages (AMP) project.

At its simplest, AMP HTML is a subset of HTML with only specific JavaScript "components" available. It's designed for creating "reading" content, rather than anything interactive. It is already designed to have ad units included and is going to have a standardised way of including analytics code, but it drastically limits the use of JavaScript.

AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <link rel=prerender> tag, but they need to be conservative about this mechanism because prerendering can be expensive. With AMP HTML we added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP document can initiate rendering of docs before the user acts much more aggressively, so that in many cases the document will be done rendering by the time the user clicks.

This essentially means that Google (and Twitter, and possibly others) can aggressively cache, pre-load and pre-render AMP content because it's designed to be static.

Get blog posts via email

About the author

Will founded Distilled with Duncan in 2005. Since then, he has consulted with some of the world’s largest organisations and most famous websites, spoken at most major industry events and regularly appeared in local and national press.
For the...
read more