JavaScript is the core building block for advanced web apps, but for static content it may not always be required: for a headline, some text and an image you do not need JS. Looking further into the content being created on the web nowadays, there are, however, things like lightboxes, various embeds, polls, quizzes and other interactive features that cannot easily be implemented without JavaScript. But the web platform has a great solution: custom elements and web components. AMP components may have JavaScript under the hood, but it is coordinated with other AMP components, so its composition into the page doesn’t cause performance degradation. If AMP HTML provided the right custom elements, we might be able to get rid of arbitrary JavaScript for these documents altogether.

AMP HTML takes advantage of CSS to let webpages look like their authors intended them to, and so allowing extensive styling is core to the platform.

Ads and analytics

A big part of the performance problem are ads and analytics, they are an important element of monetization on the web. AMP HTML uses so-called “tracking pixels” that can be embedded into AMP web pages as long as they don’t use JavaScript. AMP HTML doesn’t allow JavaScript so ads cannot be directly embedded – instead they live in sandboxed iframes with no access to the primary web page. Relying on iframes solves some of the worst performance pitfalls with ads.

But how to get from good to, let’s say, instant?

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.

With all of these techniques in place, AMP HTML web pages can be loaded with a small set of HTTP requests: the web page itself, custom fonts (if used) and the AMP JavaScript library that implements the AMP custom elements and resource loading. All resource loading is controlled by the AMP library and, more importantly, resources must declare their sizing up-front. Web page authors have to state resource sizes explicitly.

AMP HTML is a specialized subset of HTML with custom elements that provides reliable performance and instant loading of static content. You can find the specification here: AMP HTML spec as well as a prototype implementation on GitHub.

Any thoughts, make your comments below.