What is AMP?

AMP Conference 2018, project mission

Accelerated Mobile Pages (AMP) is an Open Source project started by Google in 2015 with the purpose of improving website load speeds. Its central idea is that content should take priority when serving a web page to mobile.

The speed boosts it brings are often dramatic and its usage is rapidly expanding, especially amongst news and e-commerce sites.

Notable examples are eBay, Wired and The Washington Post, amongst many others. The Chinese e-commerce site AliExpress, for example, has reported a 40% improvement in content load speed in comparison to their traditional mobile website.

Some impressive statistics from the Chinese e-commerce site AliExpress.
Chinese e-commerce site AliExpress, 40% faster with AMP.

How it works

AMP is a Javascript library that provides a special set of HTML components, extension JS scripts and cache. JSON can also be used for dynamic content and Structured Data.

There are a few rules you must keep in mind:

  • The AMP page must be explicitly declared and its canonical specified, regardless of whether this is itself or a traditional webpage.
  • Javascript is not allowed, other than the scripts bundled with the AMP library. 
  • No external stylesheets are allowed. All CSS must be typed directly inside <head> and be of no more than 50Kb in size.
  • Images, embeds and iframes must explicitly declare their dimensions.
  • It is highly encouraged that you validate all AMP pages before publishing them.

The structure of an AMP page

Let's see how that would translate on a basic website example (we will assume the URL of this example file is https://your-domain-name.com/amp/index.html):

<!doctype html>
<html amp lang="en">
  <head>
    <link rel="canonical" href="https://your-domain-name.com/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta charset="UTF-8">

    <style amp-boilerplate>
      //Please refer to https://www.ampproject.org/docs/reference/spec/amp-boilerplate for full version.
    </style>
    <script async src="https://cdn.ampproject.or/v0.js"></script>

    <style amp-custom>
      //the minified CSS stylesheet for this page goes here.
    </style>
    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js></script>
  </head>
  <body>
    <a class="screen-reader-text" href="#content">Skip to content</a>
    <button on="tap:main-navigation.open" class="menu-toggle pull-right" aria-controls="main-navigation" aria-expanded="false">MENU</button>
    <amp-sidebar id="main-navigation" layout="nodisplay" side="left">
      <ul id="main-menu" class="menu" aria-expanded="false">
	<li class="menu-item active"><a href="https://your-domain-name.com/amp/index.html">Home</a></li>
	<li class="menu-item"><a href="https://your-domain-name.com/amp/about-us.html">About Us</a></li>
       </ul>
    </amp-sidebar>
    <header>
     <h1>My AMP example page</h1>
    </header>
    <main id="content" role="main">
      <p>We can have here the usual mix of text and graphic elements that you normally find in webspages. Some, like images, will need special HTML tags as seen below:</p>
      <amp-img src="assets/img/image1.jpg" alt="image alt description" width="185" height="164" layout="fixed"></amp-img>
      <p>Please note that we use tag attributes to explicitly indicate the image's width, height and coverage. this space will be allocated to the image before the image is loaded.</p>
    </main>
  </body>
</html>

First of all, the <html amp> tag tells us this is an AMP page. This could also be written as <html ⚡> .

What goes in the head tag

Then, the first line in the <head> tag tells us https://your-domain-name.com/index.html is the canonical of the current page.

Inside the canonical index.html we would have the corresponding link connecting it to its amp version: <link rel="amphtml" href="https://your-domain-name.com/amp/index.html">

Further along, still inside <head> , we find the two tags that load the main AMP libraries: <style amp-boilerplate>...</style> and <script async src="https://cdn.ampproject.org/v0.js"></script> . Please refer to the AMP Project Documentation for the most current version of these tags.

After that, the CSS styling of our page goes inside the <style amp-custom> tag. Remember to minify it as it can't take up more than 50Kb. It is also worth keeping in mind that there are some common practices that are not allowed within your styling, such as the qualifier !important .

Finally, we end the <head> tag by loading the sidebar extension component as it is not part of the core file and the example needs it for its navigation menu.

What goes in the body tag

You will notice a mixture of traditional HTML and AMPHTML in the <body> tag. If a tag exists in both, the latter must be used.

In the example file, we have two AMPHTML tags: amp-sidebar and amp-img. Notice that both components have opening and closing tags, even when their HTML equivalent doesn't.

<amp-img src="assets/img/image1.jpg" alt="Image ALT description" height="185" width="164" layout="fixed"></amp-img>

Images must specify their height and width.

In this example, we also include the layout attribute and set it to fixed , which means the image height and width do not vary with the screen size. Other possible layout values are fixed-height , responsive and fill .

Progressive enhancement best practices can also be used.

Remember to always validate your code before publishing it.

To validate your code, just open the page in Google Chrome, add #development=1 at the end of the URL and open the DevTools Console to read the validation messages.

Pros and Cons of AMP

Because of the restrictions over adding external JS scripts or CSS stylesheets,  you may find you need a feature that is not yet available in AMP. So, in practice, you will most likely need to have two versions of the same webpage, one written in standard way, with all its functionality bells and whistles, and the other written in AMP to serve to mobile.

A lot of what you have read will initially sound counter-intuitive and even look like a backward step, especially given the Do not Repeat Yourself (DRY) programming best practices and the separation of concerns we have all grown used to.

At least for the moment… Malte Ubl, from Google, announced at the AMP Conference 2018 that they have started investigating the option of allowing JavaScript in the future.

In any case, the improvements for large sites are there for all to see and new AMP components come out all the time. In fact, you could even write your own and submit them to the AMP project. It is Open Source afterall!

So if you need something that is not there yet, all you need to do is open an issue on the project's Github to have it considered.

If the predictions are right, it won't be long until we start seeing a growing number of AMP-only sites.

Find out more

You can find out more here: AMP Project, AMP by example and the AMP YouTube channel.

In the next few weeks, I will publish more articles about this topic, specifically about making the site even faster with Cache and on how to use AMP in a WordPress website.

Stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: