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

By Alexis Ulrich

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.

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">
    <meta charset="utf-8">
    <link rel="canonical" href="__CANONICAL_URL__" >
    <meta name="viewport"
    <style>body {opacity: 0}</style>
      <style>body {opacity: 1}</style>
    <style amp-custom>
    <script async src="">
    Your actual content.

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.

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

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">
    alt="Pine trees covered with snow"
    width="220" height="318">

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

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

  width="480" height="270">

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"

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="

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.

On a 3G connection

On a 3GFast connection

On a cable connection

No network shaping
With 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.

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.

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.

  • Greg Raven

    Validate pages one at a time? You’re kidding, right? I’ve got several static sites with 1,000+ pages. I can validate an entire site using BBEdit in a couple of seconds. Even using Scrutiny5 it takes only a bit longer.

  • Adrian SANDU

    It is always interesting to learn about new performance-enhancing technologies and techniques. I wonder though how AMP can be used with dynamic sites. Will we have to generate pages twice? Once in normal full HTML5 and another one in AMP format?

    The way I understood things it looks like this approach works best for content-driven websites, yet I must wonder how would it work together with something like WordPress or another blog or forum engine. The question is even more important in the case of e-commerce websites. Last but not least, is this a viable alternative to native apps in the race to provide optimal performance on mobile devices?

    • Ruby Clay

      When I saw the draft which was of 7159 dollars, I accept that my friend’s brother was like really generating cash in his spare time with his computer. . His aunts neighbor has done this for only 10 months and by now repaid the loan on their home and bought a new Car .This is what they are donig …


  • Alex Walker

    A great write-up. Thanks Alexis.

  • Stefan

    Hi Alexis, thanks for the insights. Ad-blocking is extremely easy with AMP, isnt it?

  • Stefan

    Hi Alexis, thanks for the insights. Ad-blocking is extremely easy with AMP, isnt it?

  • Puneet Jain

    Will it not cause loss of revenue, as there are no ads on such optimized pages



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.