BT

Speeding Up the Mobile Web with AMP HTML

| by Abel Avram Follow 12 Followers on Oct 09, 2015. Estimated reading time: 3 minutes |

Google has open sourced the specification for a restricted HTML that is meant to improve the mobile experience on the web.

Accelerated Mobile Pages (AMP) is a project started at Google and soon embraced by about 30 content publishers with the purpose of making web pages load fast or almost instantaneously on mobile devices. The user will benefit from a more seamless experience on the web, while publishers expect more income from ads visibility due to lower bounce rates, which can be as high as 58% when a page takes more than 10 seconds to load, according to a recent study.

AMP aims to improve the performance of mobile static content by having a restricted HTML and using cache. This framework does not introduce new web languages or technologies, but builds on the current existing ones. Publishers will continue to have freedom in creating and publishing their content with some limitations. They are also encouraged the keep content in caches around the world to speed up page loading. Google will offer cache services for free to those interested in using AMP.

AMP pages use a restricted set of HTML tags. This means existing browsers will render AMP pages without any change. Servers providing these pages can treat them like any other HTML pages or can apply further optimizations on them, such as: sizing image to the size of the viewport, inline certain images or CSS, minify HTML and CSS, preload external components, etc..

A number of HTML tags are banned for performance reasons: applet, base, embed, form, frame, frameset, object, param. Input elements excluding button are banned. script is banned except for type application/ld+json and the mandatory script tag that loads the AMD runtime and needs to be last element in the header of a page. audio, img and video are replaced with custom elements: amp-audio, amp-img, and amp-video. iframe is replaced by amp-iframe, which introduces certain limitations to the original iframe. A number of other custom elements have been designed: amp-anim, amp-ad, amp-pixel, amp-twitter, etc. All these elements have been designed to enforce certain rules on preloading, loading, rendering, etc. to maximize page performance.

Except for the AMP script, no author-written JavaScript is allowed in the page. The AMP script, which is written in JavaScript, loads the AMP runtime which implements the AMP custom elements, prioritizes and performs resource loading, and may validate the page during development. The AMP runtime decides if a resource is to be loaded and when.

Third party content (including third-party JS) such as ads or analytics may be included in an AMP page via the corresponding AMP elements -amp-ad, amp-pixel- which forces them to run in an iframe sandbox. Tracking pixels are used for analytics.

AMP components built according to the specification may include JavaScript which is executed in the context of the main page, but with lower priority. These components are used by specific services by Instagram, Twitter or YouTube. CSS is welcome but it has to follow certain guidelines.

Speed Index was used to measure the performance of some web pages optimized with AMP and a 15 to 85% improvement has been noticed according to team behind AMP. A Google Search demo has been set up to show how fast AMP pages are. The following link needs to be accessed from a mobile device to run the demo: http://g.co/ampdemo. The AMP specification is not definitive.

A number of publishers have joined the project with the intent of using AMP when delivering content. The list includes among others BBC, Financial Times, The Economist, The Huffington Post, The New York Times, and The Washington Post.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Demo by raj n

The demo link is broken.

Re: Demo by Abel Avram

Thank you. I fixed it. Every once in a while Live Writer is doing this to me and introduces a file link.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

2 Discuss
BT