Implement Google Accelerated Mobile Pages (AMP)


Part One Chapter 21

CSS JavaScript

Accelerated Mobile Pages (AMP) is a Google-backed open source project which lets you build web pages for static content that render faster. AMP consists of 3 major parts:

  • AMP HTML
  • AMP JS
  • Google AMP Cache

AMP HTML

AMP HTML is HTML extended with custom AMP properties. Below is a mobile web page that has a typical AMP HTML head section.

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

AMP JS

AMP JS is a JavaScript library that implements AMP's best performance practices and provides the custom tags for your mobile web pages. Using the custom tags will ensure a fast rendering of your web pages in mobile environments.

AMP JS allows resources to load asynchronously so nothing in your mobile web page can block anything from rendering.

Google AMP Cache

Google AMP Cache is a content delivery network that is proxy-based.

  • The AMP Cache works when delivering documents (i.e. web page, resource files, etc) that are AMP-enabled.
  • The AMP Cache fetches AMP HTML pages, caches them, and improves page performance.
  • To maximize performance, the AMP Cache loads HTML pages, JavaScript files and all images from the same origin that uses http 2.0.
  • Google AMP has a built-in validation feature that can validate a web page will work on the AMP Cache.

An Example: Configure AMP Head Section

An AMP HTML page must have the following custom tags.

<!doctype html>

Start the web page with:

<!doctype html>

<html ⚡> or <html amp>

Enclose the HTML5 document with <html ⚡> or <html amp>. You may also see <html ⚡ lang=”en”> or <html amp lang=”en”>. For example:

<html amp lang="en">
   ...
</html>

Head Section

The head section must be enclosed with <head> and </head>. For example:

<head>
  ...
</head>

Charset

The Charset attribute must be the first META tag in the head section. For example:

<head>
   <meta charset="utf-8">
   ...
</head>

Script to Include and Load AMP JS Library

This script is for including and loading the AMP JS library. it must be included as the second tag in the head section. For example:

<script async src="https://cdn.ampproject.org/v0.js"></script>

rel="canonical" and rel="amphtml"

Must contain a rel=”canonical” attribute.

If you have two versions of your mobile web page (i.e. the first one is the normal version, and the second one is the AMP version), then on the AMP version:

<link rel="canonical" href="http://www.chinamobileseo.com/buy/" />

On the normal version:

<link rel="amphtml" href="http://www.chinamobileseo.com/buy-amp/" />

If you only have one version of your mobile web page, then it should point to the page itself (in the rel=”canonical” attribute:

<link rel="canonical" href="http://www.chinamobileseo.com/buy/" />

ViewPort

Must contain a viewport in the head section that specifies:

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

amp-boilerplate

Must add the below tag to the head section:

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

Body Section

The body section must be enclosed with <body> and </body>. For example:

<body>
  ...
</body>

The Entire AMP HTML Page

Let's put all the AMP elements together and construct the mobile web page.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Buy the China Mobile SEO Book</title>
    <link rel="canonical" href="http://www.chinamobileseo.com/" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2016-04-13T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Why Buy the China Mobile SEO Book?</h1>
  </body>
</html>

Include Images in AMP

When you include images onto your AMP-enabled mobile web pages, enclose the image in <amp-img> and </amp-img>. This is how you should include an image:

<amp-img src="http://www.chinamobileseo.com/images/the-china-mobile-seo-book-cover-191x239.jpg" alt="The China Mobile SEO Book Cover" height="239" width="191"></amp-img>

To include an responsive image, you can specify the width and height, set layout to “responsive”, and assign multiple image sizes to “srcset”.

<amp-img
  src="/images/narrow-image.png"
  srcset="/images/wide-image.png 640w,
         /images/narrow-image.png 320w"
  width="1698"
  height="2911"
  layout="responsive"
  alt="The China Mobile SEO Book">
</amp-img>

Caveat

Before the implementation of AMP, you must prepare to make significant changes to the way you develop your mobile website (and/or web pages).

Implement Inline CSS

You must inline the CSS of all your web pages.

Problems:

  • When you place all the CSS inline onto each web page, web browsers will not cache the inline CSS.
  • When you have more than a few thousands of pages on your mobile website, when maintaining your CSS it will become a very tedious project.

Implement Asynchronous JavaScript

You must make your JavaScript asynchronous. When using AMP, the JavaScript will not block the rendering of your mobile web pages.

One common way to use JavaScript is to place your JavaScript in an external file and then include it in the head section of your web page. For example, your external file is “main.js”.

<head>
<script src="http://m.example.com/main.js"></script>
</head>

To make external JavaScript file asynchronous, add the “async” attribute.

<head>
<script src="http://m.example.com/main.js" async></script>
</head>

Problems:

  • Not all mobile web pages can implement asynchronous JavaScript. For some reasons, some JavaScript must be loaded first, otherwise some interactive functions on the page may not work properly.
  • If your mobile website has been using one or two JavaScript-based frontend framework (such as jQuery mobile) and you implement AMP, the rendering of your web pages may not work properly.


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Books:
The China Mobile SEO Book
Analytics Book