Book Image

AMP: Building Accelerated Mobile Pages

By : O'Donoghue
Book Image

AMP: Building Accelerated Mobile Pages

By: O'Donoghue

Overview of this book

Google introduced the Accelerated Mobile Pages (AMP) project to give mobile users lightning-fast response times when accessing web pages on mobile devices. AMP delivers great user experiences by providing a framework for optimizing web pages that otherwise would take much longer to load on a mobile platform. This book shows how to solve page performance issues using the mobile web technologies available today. You will learn how to build instant-loading web pages, and have them featured more prominently on Google searches. If you want your website to succeed on mobile, if you care about SEO, and if you want to stay competitive, then this book is for you! You will go on a mobile web development journey that demonstrates with concrete examples how to build lightning-fast pages that will keep your visitors on-site and happy. This journey begins by showing how to build a simple blog article-style web page using AMP. As new concepts are introduced this page is gradually refined until you will have the skills and confidence to build a variety of rich and interactive mobile web pages. These will include e-commerce product pages, interactive forms and menus, maps and commenting systems, and even Progressive Web Apps.
Table of Contents (17 chapters)
14
Actions and Events
16
amp-bind Permitted Attribute Bindings

AMP Hello World - your first AMP page

Let's take a look at the most basic AMP page possible. It consists of the AMP boilerplate code that will be used in every AMP page you write. You can find this code at /ch1/amp.html.

<!doctype html> 
<html >
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://theampbook.com/ch1/amp.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>
</head>
<body>Hello World!</body>
</html>
Note when copying the boilerplate code: the <style amp-boilerplate>...</noscript> markup must all be on a single line. If copying from the ebook version of this book, you may run into issues with unwanted line-breaks, so it's recommended to copy the source code from the github repository for this book, or from theampbook.com.

Save this file as amp.html on your web server, and open it up in your browser (any browser will do, even a desktop browser). You should see Hello World! printed to the browser. Well done, you've created your first AMP page!

Nearly every line you see in this example is required in every AMP page you will write. Let's walk through the code and use it to highlight the minimum requirements of all AMP pages:

  • AMP pages must start with <!doctype html> followed by <html amp> or <html>
  • AMP pages must contain <head> and <body> tags
  • The opening <head> tag must be immediately followed by:
<meta charset="utf-8">
  • Next it must include the AMP JS library, with:
<script async src="https://cdn.ampproject.org/v0.js"></script>
  • It must contain a canonical tag pointing to its associated desktop HTML version, or pointing to itself if there is no associated page:
<link rel="canonical" href="amp.html" >
  • It must include a viewport meta tag:
<meta name="viewport" content="width=device-width,minimum-scale=1">

(initial-scale=1 is also recommended)

  • AMP pages must include the following style boilerplate within the <head>:
<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>
Ironically, the AMP lightning bolt symbol is slow to type, since you won't find it on your keyboard. It's the unicode high voltage sign character, code point U+26A1. Using copy-paste is the easiest way to get it into your documents.

Optional but recommended boilerplate

The following items are not required in AMP pages, but are recommended so that you get the most SEO benefit from your web pages:

  • Title tag: Title tags are used as a ranking signal in search engines, and are useful to users in identifying pages. You can add the title tag right after the AMP-JS <script> tag:
<title>Hello World!</title>
  • Structured metadata: Adding structured metadata allows third-party services to more efficiently index and preview your pages. For example, Facebook uses the Open Graph Protocol, while Twitter uses Twitter Cards, to extract images and specific data about your page. Additionally, Google's Top Stories Carousel supports the schema.org Article and Video categories to generate article previews such as the ones shown in the next section.

    To get a structured metadata preview of your page in Google search results, you need to add code similar to this to the head of your page:
<script type="application/ld+json"> 
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2017-03-01T08:00:00+08:00"
}
</script>

Structured metadata and the AMP carousel

While structured metadata is not generally AMP specific, a significant AMP-only benefit of adding structured metadata to your page is the AMP Top Stories carousel. This is a horizontal carousel of relevant search results featured prominently on the Google search results page. Having your content featured in this carousel brings obvious SEO benefits, and so including structured meta data is highly recommended.

AMP Top Stories carousel

Validating your AMP pages

We'll be seeing more about validation in the next chapter. For now, you just need to know that your AMP pages must validate before they will be added to the AMP Cache. The easiest way to check if your page is valid is to append #development=1 to the URL of the page in the browser address bar, and open up the Developer Tools (Cmd + Opt + I on Mac, Ctrl + Shift + I on Windows), and navigate to the Console tab. You'll then get a report for your page, indicating if it's valid. The page we just created should validate as follows:

Successful AMP validation in Chrome developer console

If it's not valid, you'll get some helpful error messages for any failures. To see this in action, remove the line that begins with <link rel="canonical"...> from your code and reload the page with #development=1 at the end of the URL. This time the validator informs us that the mandatory canonical tag is missing:

AMP validation reports an error for an invalid page

You'll need to add that line back in before the page validates again. But even if it doesn't validate, it will still render in most modern web browsers, since AMP is HTML-based. You will lose out on the benefits of the AMP Cache however.

What's with the <style amp-boilerplate> code?

You might be wondering why you need to include the <style amp-boilerplate> code in every page. Even AMP's creator and tech lead, Malte Ubl, described this code as an atrocity! Unfortunately, it's a necessary evil; a hack developed by the AMP project team to avoid the infamous flash of unstyled content while the AMP page is loading.

It works like this. First, the AMP page content is hidden while it loads. Then, when the AMP-JS library has loaded, it will unhide the page after it has finished rendering it. This presents a problem, however. If the AMP-JS library was ever unavailable when a user requested the page, then the page would stay blank forever. This would be an unacceptable user experience, even if it happened only rarely.

The trick, then, is to use a CSS keyframe animation as a timeout function: if the AMP-JS library fails to make the content visible, then the CSS animation will make it visible automatically after a few seconds, and the user will still get to see some content. A simplified version of this trick, without the vendor prefixes, is shown as follows:

body { 
animation: amp-timeout 0s 8s 1 normal forwards;
}
@key-frames amp-timeout {
0% {opacity: 0;}
100% {opacity: 1;}
}