BT

InfoQ Homepage News Speeding Up the Mobile Web with AMP HTML

Speeding Up the Mobile Web with AMP HTML

Bookmarks

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
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.

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

Community comments

  • Demo

    by raj n /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    The demo link is broken.

  • Re: Demo

    by Abel Avram /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.