What is Accelerated Mobile Pages (AMP)?

  7th Decemeber 2016

Accelerated Mobile Page (AMP) is a project from Google, Twitter, WordPress and a group of other companies designed to make really fast mobile pages. It's basically a stripped-down form of HTML (a diet HTML), an HTML designed to be super lightweight and really fast loading. The aim for AMP is for publishers to be able to load their sites quickly on mobile since mobile responsive could be clunky and slow because desktop resources are heavy and plenty.

What makes AMP so fast?

It's like a diet HTML. So certain tags of HTML like forms are excluded. You also need to use a streamlined version of CSS. JavaScript is not allowed at all. You have to use an off-the-shelf JavaScript library provided by them, which has features like lazy loading. The whole platform is designed just for pure readability, pure speed. Things such as images don't load until they're scrolled into view, and the JavaScript does all that for you. And all of this is designed to be really heavily cached so that Google can host these pages, host your actual content on their servers, and so they don't even need to fetch it from you anymore. Basically when you integrate AMP to standardize your mobile responsive pages, you are putting speed and readability as top priority over anything else.

AMP on Mobile

The following optimizations combined are the reason AMP pages are so fast they appear to load instantly:

  • Allow only asynchronous scripts
    • AMP pages can't include any author-written JavaScript. Instead of using JavaScript, interactive page features are handled in custom AMP elements. The custom AMP elements may have JavaScript under the hood, but they're carefully designed to make sure they don't cause performance degradation.
  • Size all resources statically
    • External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element's size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.
  • Don't let extension mechanisms block rendering
    • AMP doesn't let extension mechanisms block page rendering. AMP supports extensions for things like lightboxes, instagram embeds, tweets, etc. While these require additional HTTP requests, those requests do not block page layout and rendering.
    • Any page that uses a custom script must tell the AMP system that it will eventually have a custom tag. For example, the amp-iframe script tells the system that there will be an amp-iframe tag. AMP creates the iframe box before it even knows what it will include.
  • All CSS must be inline and size-bound
    • Since CSS blocks all rendering, it blocks page load, only inline styles are allowed in AMP HTML pages. This removes one or more HTTP requests from the critical rendering path.
    • Also, the inline style sheet has a maximum size of 50 kilobytes. It still requires the page author to practice good CSS hygiene.
  • Prioritize resource loading
    • AMP controls all resource downloads: it prioritizes resource loading, loading only what's needed, and pre-fetches lazy-loaded resources.

How AMP Works?

It is an open-source coding standard. AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

1. AMP HTML

AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:

<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
    Hello World!
</body>
</html>

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.

For example, the amp-img tag provides full srcset support even in browsers that don't support it yet.

2. AMP JS

The AMP JS library implements all of AMP's best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page.

Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.

3. AMP CDN

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

The cache also comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page's markup meets the AMP HTML specification.

Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser's console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

How this works in your mobile device?

For every webpage, there will be two versions - the regular desktop version and an AMP version. In the source code, you would designate that with the rel AMP HTML link, which points over to your, what we call "hosted AMP page."

Add the following to the regular desktop (non-AMP) page:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

And this to the AMP page 

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself: 

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

So when you actually see these things showing up in Google search results, the version that shows up there will typically be hosted on a gstatic.com (a Google-hosted cached version). And critically both of these, both the one you host yourself and the version that is cached around the Internet potentially even by other people as well, both of those would contain the rel=canonical back to the original. It's similar. It's like a rel alternative in a mobile world.

So it's fast because the HTML is cut down, but it's also potentially designed that these things are bits of content that can be cached potentially by anyone without rel=canonical pointing back to you.

It's worth saying that even on the cached version of the pages, Google have said that you're still going to be able to provide your own adverts. They've built a platform where you can serve adverts from AdSense, Outbrain, where you'll still accrue all the revenue. Also with the cached versions you can use Analytics. You can still provide ads to your pages and everything, even when you're served via the cached versions of the pages.

Who Else Benefits?

Officially, Google cites three primary areas of benefit for AMP adoption:

Content: The AMP open source approach makes it easier for publishers to deliver more resource-intensive content, such as video, image carousels and plug-ins by reducing substantially the amount of bandwidth needed to deliver such content.

Distribution: By making the Google AMP Cache service available to all comers, the massive global footprint of their data centers will store and deliver webpages with greater efficiency than most publisher's own hosting services ever could. Think Akamai for publishers (and anyone else really) for free. It also extends Google's control over content created by others in a similar fashion as Facebook's Instant Articles.

Ad Delivery: At the heart of the AMP initiative is the mission of strategically protecting Google's cash cow advertising franchise. Google aims to grow it's roughly $80 billion annual ad revenue, especially relative to its largest competitors. AMP was designed to work with most ad formats, work with any ad network and will support publisher paywall and subscription services.

How Will You AMP Your Site?

For starters, you will have to maintain two versions of any article page: The original desktop version of your article and the AMP version of that page.

Since AMP doesn't permit things such as form elements and third-party JavaScript, you likely will not be able to have lead forms, on-page comments and some other elements you may be used to having on your page in a standard implementation. (Although you can use iframes that provides a solution to this.)

It is also likely that you will have to rewrite your site template to accommodate the restrictions. For example, all CSS in AMP must be in-line and be less than 50KB. Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension, in order to better control that loading.

Multimedia must be handled specially. For example, images need to utilize the custom amp-img element and must include an explicit width and height. (When converting a legacy website to an AMP template, this can be a major pain if the width and height attributes aren't already being used). Additionally, if your images are animated GIFs, you need to use the separate amp-anim extended component.

Like images, there is a custom tag that must be used to embed locally hosted videos via HTML5, called amp-video. For embedding YouTube video, however - there is a separate extended component, amp-youtube.

There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components.

The AMP Discovery page also mentions that some platforms that support AMP will require Schema.org meta-data to specify the content type of the page – like "article,” "recipe,” "review” and "video” etc.

These tag and extended components aren't difficult to use; they just require some planning in your site design.

Once you finish designing your page, to validate your AMP pages, you actually use a tool that's built into Chrome.

Just add #development=1 to the URL, for example,

http://localhost:8000/released.amp.html#development=1

And it will tell you any problems with that page.

Impact on the SERPs

Right now it's mobile only. Because most of this is focused on obviously reading contents. The people who've rolled this out first have been news publishers typically. So you search for a news-related term.

Accelerated Mobile Pages (AMP) has been speculated to have two benefits for SEO. One is it will have a "Fast” label designation on search engine results pages, and the other is that it will be a ranking factor.

Does AMP Have Analytics?

Yes. In fact, analytics in AMP is very smart. To prevent multiple analytics tracking from slowing down a site, they implemented the philosophy of "measure once, report to many.” There are two paths to enable analytics functionality with AMP for your website:

  1. The Amp-Pixel Element: This is a simple tag that can be used to count page views as a typical tracking pixel would, using a GET request. There are a number of variables that can be passed through it, such as DOCUMENT_REFERRER and Title.
  2. The Amp-Analytics Extended Component: This is a little bit more advanced than the amp-pixel. It is likely what you'll use to implement analytics on your site because it allows for a greater level of configuration for analytics interactions.

If you are interested in Google Analytics in AMP, check out the Google's AMP Analytics section on their developer page. It has several examples of implementations.

How Can I Monetize With Ads In AMP?

The increased rise of ad-blockers has made it difficult for publishers to monetize their websites. For some users, improving website load time has been an incentive to use ad-blockers, which can aid in improving browsing speed. AMP may be seen as a response to this issue, with the project stating:

"A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. With that context, the objective is to provide support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages.”

Conclusion

So if you are a publisher, you need to start thinking about Accelerated Mobile Pages. Build AMP pages and make sure you're doing it well, and work out how to streamline building pages regularly. If you're using some sort of CMS, then obviously you want this to be an integral part of your process going forward. You want AMP pages to be something that all pages or as many pages as possible have an AMP version of those pages. So there's already - for the most popular CMSs, things like WordPress already have plugins available - that you can choose and basically for a lot of the pages it will do a lot of the work for you in creating those AMP pages. Also, obviously, if you're building your own CMS, then you should prioritize trying to get similar functionality into that CMS.