An Introduction to Google’s Accelerated Mobile Pages (AMP)

This article is also available in French

Google’s Accelerated Mobile Pages initiative is getting a lot of exposure since its launch in early October. Let’s see what it is, how it works, and how you can publish your own AMP HTML pages.

Speed Matters

In this age of speed, a page that takes more than a few seconds to load is losing its appeal, and this is especially important on mobile phones.

Many studies have shown that page load has a direct impact on sales. For instance, conversion rates drop 27% after one second, and bounce rates drop 56% after the same amount of time.

On the SEO side, page speed is one of the many ranking factors for Google, hence your site’s visibility is at risk if it’s too slow.

Therefore, user experience, business goals, and findability are all impacted by site speed.

Responsive web design and carefully-crafted sites with performance in mind are part of the solution. While working on these issues, we can’t blame others, or we’ll soon get closed inside walled gardens.

Facebook’s Instant Articles and Apple News are answering these issues in their own way. Fortunately, the AMP Project, while promoted by Google, is an open-source project and you should give it a try.

AMP Page by the Washington Post — *source*

An Overview of AMP’s Features

Performance best practices are built-in with AMP: asynchronous calls and lazy-loading on components, no repaint while loading the page, no FOUC effect, inlined critical CSS, no extensive use of the CPU and GPU, minimal JavaScript usage, a CDN by default for scripts, and a minimal tracking footprint.

Everything that we should keep in mind when developing fast rendering pages has been enforced for us:

A subset of HTML with a few new tags to be handled by the JavaScript runtime renderer;
Only a subset of CSS allowed;
One JavaScript to rule them all, and only a few allowed scripts for the extensions, all of them delivered through Google’s CDN;
Each component width and height declared to prevent any repaint when loaded asynchronously.

Anatomy of an AMP Page

Here is a minimalist AMP page:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="__CANONICAL_URL__" >
    <meta name="viewport"
          content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style>
    <noscript>
      <style>body {opacity: 1}</style>
    </noscript>
    <style amp-custom>
      __YOUR_OWN_CSS__
    </style>
    <script async src="https://cdn.ampproject.org/v0.js">
    </script>
  </head>
  <body>
    Your actual content.
  </body>
</html>

As you can see, there is a default style to which you can add your own inline CSS, and an asynchronously-called script hosted on a CDN. We also have a viewport meta tag and a canonical link. And that’s about it.

Styles
You can add your own styles within the <style amp-custom> element. However, not all features are allowed.

JavaScript
The AMP JavaScript library includes built-in components and handles the loading of external resources behind the scenes, extensively lazy-loading as much as it can. It is also responsible for the painting of the page.

Hands-on Questions & Answers

How can I validate my AMP HTML code?
The validation of the code is provided within the Google Chrome’s DevTools. Navigating to your page with the hash #development=1 added at the end of the URL enables validation.

How do I reference an AMP HTML page in a normal HTML page?
AMP pages are declared as an alternative type of content, a bit like an RSS feed. Yet, the full auto-discovery mechanism used for RSS has not been implemented, as it would have required the creation of another MIME type like text/amphtml.

Instead, we use a new value for the <link> tag’s rel attribute in the head of the matching regular HTML page.

<link rel="amphtml" href="__MY_AMP_URL__">

How do I tell browsers the AMP HTML page exists?
We can tell the browser an AMP page is a version of a full-fledged HTML page. As we don’t want any duplicate content penalty, we declare that page as canonical.

<link rel="canonical" href="__MY_REGULAR_HTML_PAGE__">

What is the SEO advantage to using this new format?
As we’ve seen above, an AMP page is a related version of a regular page, declared as canonical. Search engines will not list both pages, only the canonical page – unless the search is performed on a mobile device, in which case the AMP page could be favored.

When searching for a specific news item, a carousel with the matching AMP pages previews is shown, as you can see in this YouTube video by Addy Osmani.

Why does AMP HTML have a CSS rule that hides the <body> element?
The <body> element is hidden by default with CSS opacity when JavaScript is not supported by the client. As the whole layout is rendered by AMP’s JavaScript, the temporarily hidden body prevents the display of a broken page.

There is another advantage to this, as it prevents any FOUT effect when using a CSS font. Usually, the browser loads the CSS font as soon as it encounters it in a style applied to an element of the document, hence it can start rendering the page before calling that external font. In an AMP page, the opacity style is removed once the fonts used in the page are loaded.

How do I embed an image?
The <img> element is not supported by AMP and is replaced by the <amp-img> element. An AMP image must set its width and height, and provides support for an attribution attribute.

<div class="image_container">
  <amp-img
    src="pine-trees-snow.jpg"
    alt="Pine trees covered with snow"
    width="220" height="318">
</div>

How do I embed a video?
The HTML5 <video> element is replaced by the amp-video element, and is a built-in component.

Among the supported extensions, you can find a YouTube extension to handle YouTube videos. Like for the other extensions, you need to call specific JavaScript in the <head> of your page to support it, in this case:

<script async
  custom-element="amp-youtube"
  src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script>

If you want to support responsive videos, the width and height values of your component should match the 16:9 aspect ratio.

<amp-youtube
  data-videoid="SqT0glwuYYo"
  layout="responsive"
  width="480" height="270">
</amp-youtube>

Are there other components available?
The AMP components are divided into built-in components (directly supported by the main JavaScript renderer) and extensions (which require calling a specific script for each).

The current list of built-in components includes:

amp-ad: container to display an ad
amp-img: replacement for the HTML <img> element
amp-pixel: used as tracking pixel to count page views
amp-video: replacement for the HTML5 <video> element

The current list of extensions includes:

amp-anim: runtime-managed animated image, most typically a GIF
amp-audio: replacement for the HTML5 <audio> element
amp-carousel: generic carousel for displaying multiple similar pieces of content along a horizontal axis
amp-fit-text: expand or shrink font size to fit the content within the space given
amp-iframe: displays an iframe element
amp-image-lightbox: allows for an “image lightbox” or similar experience
amp-instagram: displays an instagram embed
amp-lightbox: allows for a “lightbox” or similar experience
amp-twitter: displays a single tweet
amp-youtube: displays a YouTube video

How do I display an ad from Google AdSense?
The amp-ad component is used to display an ad. Like with other components, the width and height values must be set (I guess you’re used to this by now).

To display an AdSense ad, the code is as follow (don’t forget to replace the values of the data-ad-client and data-ad-slot attributes with your own).

<amp-ad width="300" height="200" type="adsense"
  data-ad-client="ca-pub-1234567890123456"
  data-ad-slot="1234567890">
</amp-ad>

The currently supported ad networks are A9, AdReactor, AdSense, AdTech, and Doubleclick. Each comes with its own set of attributes.
You can also run ads from a custom domain.

How can I track my visitors with Google Analytics?
Trackers are implemented through the amp-pixel element to count page views. To use a Google Analytics tracker on an AMP page, you need to follow the Analytics Measurement Protocol :

<amp-pixel src="https://ssl.google-analytics.com/collect?v=1
                &tid=UA-12345678-1&t=pageview&cid=__CID__
                &dt=__PAGE_TITLE__&dl=__PAGE_URL__
                &z=__RANDOM_STRING__">
</amp-pixel>

The Client ID (CID value) is generated on the server side as valid v4 UUID, the PAGE_TITLE and the PAGE_URL should be URL-encoded, and the z parameter is a cache buster.

The Speed Gained

Andy Davies shows us some benefits of the AMP pages implemented by The Guardian and BuzzFeed. Using WebPageTest, he’s painted a mixed picture about the speed gained for a variety of networks.

Here’s the same comparison with a regular site hosted in France on one server and called from the New York City, USA. The top set of images is the current full-fledged web page, and the bottom is the AMP version.

3GFast

Cable

No network shaping

The regular page makes 34 HTTP requests, while the AMP version makes only 13. Of course the number of requests (and the page weight) varies depending on the ad served. The AMP version is always faster, it starts rendering about half a second before the vanilla version, and is sometimes visually complete even before the vanilla version starts rendering (on the 3G and cable connections).

I warmly invite you to take the test once you have a working example in your own code structure, as the results depend a lot on the optimisations you have implemented.

AMP page on Washington Post

Some Design Ideas From Big Publishers

The AMP format has already been embraced by many big players in the publishing industry. Here is a short list of a few of them, to illustrate their take on the design simplification.

The Guardian: regular HTML / AMP
The Washington Post: regular HTML / AMP
El País: regular HTML / AMP
Folha de São Paulo: regular HTML / AMP
La Stampa: regular HTML / AMP
The New York Times: regular HTML / AMP
The Atlantic: regular HTML / AMP

Now It’s Your Turn

The Accelerated Mobile Pages initiative is all about speed to deliver pages. To enforce its rules, many restrictions are applied – but in these limitations lies a real freedom to focus on content.

You have seen in this article the steps needed to develop simple yet fully functional pages with pictures, videos, ads, and trackers. Animations, carousels, SVGs, and many other components are available to create great user experiences.

It would be great if you could share your own creations in the comments.