AMP (Accelerated Mobile Pages)

What is it

AMP is a free, open-source web component framework that powers all kinds of experiences on the web, is an project created by Google which aims to make webpages and articles load very quickly. The AMP works by following a series of optimizations that make the pages load barely instantly such as.

  • Never stop the content: Load all scripts and content in parallel.
  • Static layout: Only one HTTP request is required to load the layout.
  • Inline size-bound css: Allows only a single inline css.
  • Web font optimization: Because all CSS is inline, there is no HTTP requests blocking the browser from downloading fonts.
  • Minimize style and layout recalcatulations: AMP midiates all render operations and intelligently combines readings and changes to minimize effort.
  • GPU Accelerated animations: Only allowed animations that can happen on the GPU.
  • Prioritize resource loading: AMP optimize downloads so it more important resources are downloaded first.

How to use it

Creating AMP pages is as simple as creating HTML pages. You just need the simple AMP Boilerplate and you can start writing the page using the custom AMP tags.

Here is a simple example of AMP Boilerplate:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="This is the AMP Boilerplate.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
    /* Add your styles here */
    </style>
    <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>

    <link rel="canonical" href=".">
    <title>My AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

How to learn

A good place to start learning is AMP Documentation Page and the The AMP Channel, on the doc you can see the difference between the main HTML and AMP tags.

Useful material

Useful Components

Possible problems

AMP allows the use of custom JavaScript code with the amp-bind components but you must include the script hash in a <meta /> tag in the header. To determine the hash value, open the page adding #development=1 to the end of the URL:

# change this
http://127.0.0.1:5500/static/tutorial.html
# to this
http://127.0.0.1:5500/static/tutorial.html#development=1

Open de developer tools and you should see an error message like this:

  amp-script Script hash not found. amp-script[script="hello-world"].js must have sha384---QL3AhhBPRcOa20KSoZltNjk8OplnKtITZFTCTWHcqGr9iJKFeuBuVtP_0Z9eUp" in meta[name="amp-script-src"]. See https://amp.dev/documentation/components/amp-script/#security-features.​​​

To solve this, add the SHA hash to the amp-script-src meta tag

<meta
  name="amp-script-src"
  content="
     sha384---QL3AhhBPRcOa20KSoZltNjk8OplnKtITZFTCTWHcqGr9iJKFeuBuVtP_0Z9eUp
  "
/>

Note that the hash is sensitive to the code inside the script tag, any change on the code will generate a new hash.

← Presentational Container Design PatternBubblewrap →