Google’s Accelerated Mobile Pages (AMP)

There has been quite a buzz about Accelerated Mobile Pages since Google presented it in October 2015. Recently the topic gained momentum as some sources report Google Search would rank AMP pages higher than “regular” pages.

Time to take a quick look at AMP, see what’s behind it and whom it is made for - and for whom not.

What is AMP?

AMP is an open-source framework developed by Google that is relatively easy to integrate in existing web pages to speed up page load near the “magic” 1 second mark.

It’s main promise it that “all accelerated mobile pages should be always decently fast”.

AMP is focused at the content-consumption use case and tries to balance the user experience against typical business requirements such as

  • monetization via ads
  • user tracking via beacons and analytics

How does AMP work?

AMP applies and enforces several best practices that are around for a while - but are not widely adopted by web developers. For instance,

Content Prioritization

  • load only what is likely to be seen, for instance because it’s in the initial viewport (above the scroll fold)
  • download ads with low priority and when the user agent is idle

Rendering Performance Optimization

  • resources such as images, ads or iframes need to state their size in the HTML. This allows to render the page layout without downloading these resources
  • all javascript must load asynchronously and only inline style sheets are allowed. So no further HTTP request is needed before fonts are downloaded and can page layout can be rendered
  • limited size for style sheets (max. 50 KB) and FASTDOM like optimizations
  • forms, 3rd-party javascript, etc. must be sandboxed in iFrames

Content Delivery Network

AMP offers a Content Delivery Network (CDN) so that the HTML document and all resources are loaded from the same origin using HTTP/2.0.

A comprehensive list of optimization can be found on the project’s webpage: https://amphtml.wordpress.com/2015/12/16/why-amp-is-fast/

For whom is AMP?

As mentioned above AMP is designed for content pages. It is not intended for web apps that focus on functionality such SaaS tools, etc.

The adoption rate for AMP in popular content management systems like Wordpress, Typo3, etc. is still poor: an AMP Plugin for Wordpress exists in V0.3 but it has significant limitations and a low / moderate rating. That said, AMP currently requires a web developers.

It is still a quite new framework and definitely work-in-progress. That means it may comes with some flaws and drawbacks that are not obvious when you start. I would recommend using it for selected content pages and roll out after you have gained enough experience and confidence.

AMP vs Facebook Instant Articles

On 12. April 2016 Facebook is going to launch Instant Articles - a tool that addresses the same issue: pages load up to 10 times faster than on the standard mobile web. So what is the difference to AMP?

  1. Instant Articles work only from within you Facebook app on iOS and Android. Users of other platforms and apps, such as your mobile or desktop browsers, will be linked the web version of the content and thus not benefit from Instant Articles whereas AMP improves performance no matter what tool or platform you are using.
  2. Instant Articles uses a fixed set of HTML5 elements to structure your content. You can define style templates using a web based Style Editor that allows you to set custom fonts, colors and a few more style elements. However, Instant Articles limit you much more on the design and interactivity options that AMP does.

For further information on Instant Articles please check

Hands-On AMP

I am preparing a short tutorial on how to integrate AMP in your web pages right now. Will post an update here as soon as it’s ready.

Further References