Static sites are pretty awesome. Recently I’ve been interested in the Accelerated Mobile Pages project – a JavaScript library from Google that makes static pages even better on mobile.

AMP is targeted toward static pages like news articles. Even this page is an AMP page! It makes pages work better on mobile devices by only dowloading media when needed, making sure elements don’t do any jarring resizing, and a number of other things. First we’ll look at the benefits of writing your page using AMP.

Using AMP doesn’t just mean pulling in a JavaScript library – it’s a slightly modified way of writing your HTML. The second part of this post will look at how AMP HTML differs from regular HTML.

Benefits of writing your page using AMP

✅ Google will boost you in search results (see below).

✅ Google caches valid AMP pages in its own CDN (example).

✅ All media is lazy-loaded: e.g. images only load when about to become visible.

✅ AMP tries to minimize page re-flows, so that content doesn’t move around, jarring users.

These are all great benefits, but they come with a price. Let’s look at how you need to structure your page to take advantage of AMP.

How AMP HTML differs from HTML

Here’s the bare-minimum AMP page, from the README:

<!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>

Before any JS executes, AMP pages hide the entire <body> on page load (by setting visibility: hidden). There are a couple backup mechanisms that ensure that your content is shown even if an error occurs.

Moving on, here the differences to know about when building an AMP page:

  • You can’t use any of your own or 3rd party JavaScript. In other words, you can’t add <script> tags of any sort.

  • All CSS must be in a <style amp-custom> tag or inline. No external CSS files.

  • AMP registers a number of custom elements which replace normal elements. The AMP elements require dimention information so that the page can be laid out before they’re loaded.

<amp-img
  src="/images/el-jefe.jpg"
  width="540"
  height="303.75"
  layout="responsive"
  alt="A picture of Jeff Carpenter">
</amp-img>
  • For example, <img> tags become <amp-img> and require width and height attributes. AMP elements’ width and height attributes don’t perform the same way – they help AMP retain the element’s dimensions and page layout in different form factors.

  • Google Analytics (or any other analytics) won’t work, since it uses a <script> tag. You must use include what AMP calls an extended component: <amp-analytics>.

Those are the biggest differences. For a more thorough look at AMP, check out the AMP docs.

(Comments aren’t working because I haven’t gotten Disqus working with AMP yet. For feedback, please contact me directly.