Pseudorandom Knowledge

Speedy mobile web pages with AMP

Accelerated Mobile Pages (AMP) is a technique for making fast rendering web pages on mobile devices. It is primarily intended for static and non-interactive content, such as articles.

AMP is written in AMP HTML, which is HTML with certain restrictions and additions. For example, custom JavaScript is banned, img tags are replaced with amp-img tags and all styling must be inside the head tag.

AMP HTML is interpreted partly by the web browser and partly by AMP JS. The latter is a JavaScript library that takes care of resource loading, layout calculations and implements custom tags. For example, for the amp-img tag AMP JS will:

  1. find the amp-img tag
  2. reserve space for the image in the layout
  3. load the image asynchronously
  4. add the image to the DOM

The great thing about AMP is that it is built entirely upon HTML standards and JavaScript. Therefore, AMP works natively in any web browser.

For a practical example, take a look at this ordinary static web page. 

<!DOCTYPE html>
<html>
<head>
 
<title>Berries</title>
<link type="text/css" rel="stylesheet" href="style.css" />
 
</head>
<body>
 
<article>
    <img alt="Blueberries" src="Blueberries.jpg" />
    <h1>Forest food</h1>
    <p>
        The word berry is used for many different kinds of small fruits...
    </p>
</article>
 
</body>
</html>

Then check out this AMP version of the same page. 

<!doctype html>
<html amp>
<head>
 
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Accelerated berries</title>
<link rel="canonical" href="index.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>
<style amp-custom>
    body{font-family: arial; font-size: 14px; background: maroon;}
    article{width: 700px; margin: 50px auto; background: white; padding: 0 0 15px 0;}
    h1{font-size: 1.5em; margin: 10px 20px;}
    p{margin: 5px 20px 5px;}
</style>
 
</head>
<body>
 
<article>
    <amp-img alt="Berries" src="Blueberries.jpg" height="500" width="700"></amp-img>
    <h1>Forest food</h1>
    <p>
        The word berry is used for many different kinds of small fruits...
    </p>
</article>
 
</body>
</html>

Note: The code shown above will not pass AMP validation because the validator is very pedantic about whitespace in the the amp-boilerplate style. I wanted it to be readable here. The code in the linked AMP page validates properly.