Google AMP for accelerating content pages

Google’s new initiative aimed at improving the web experience for mobile users. Accelerated Mobile Pages is a new format of building web pages to optimize the content (images, JS, plugins social networks.) And increase the responsiveness of the mobile version of the site, in fact facilitating page. Google AMP HTML

Principle

AMP consists of three parts:

  • AMP HTML — slightly modified markup language in which some of the tags are replaced by equivalents, with a focus on the AMP, and some altogether prohibited;
  • AMP JS — strict use of the AMP library, which is tuned for asynchronous loading;
  • Google AMP Cache — optional feature for caching AMP pages on Google's servers for the fastest output.

Basic requirements and restrictions:

  • Only asynchronous scripts;
  • Only built-in CSS;
  • Styles are limited to 50KB in size;
  • You must specify the size of HTML-links to external resources (images);
  • JS is always performed asynchronously;
  • It supports only JavaScript for AMP;
  • Fonts downloaded using the link tag or CSS @font-face rule.

AMP HTML

Let’s analyze a simple HTML-page, built by AMP requirements:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <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": "2015-10-07T12: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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

# AMP page with new tags and asynchronous script

AMP-page syntax

HTML-document developed by the technology requirements, should follow the syntax:

  • Starts with <!doctype html>;
  • Keep the top level tag <html ⚡> or <html amp>;
  • Keep the <head> and <body>;
  • The first in the <head> should be <meta charset="utf-8">;
  • Keep the link <link rel="canonical" href="$SOME_URL" />, which indicates the normal version of the page, within the <head>;
  • Keep the <meta name="viewport" content="width=device-width,minimum-scale=1"> within the <head>;
  • Keep the <style amp-boilerplate> within the <head>;
  • Before the closing </head> should be
    <script async src="https://cdn.ampproject.org/v0.js"></script>, which includes a JS library for AMP.

Additionally, you can include styles in the </head>:

<style amp-custom>
  # Custom style here
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

# Implements custom stiles

The main built-in components of AMP HTML

  • amp-ad — container for ad units.

    It supports only advertisements via [pp467 HTTPS] channel. It requires script:

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    
    <amp-ad width=300 height=200
          type="adsense"
          data-ad-client="ca-pub-8125901705757971"
          data-ad-slot="7783467241">
      </amp-ad>

    # Set AdSense

    Amp-ad also supports inline styles and a range of advertising services.

  • amp-img — managed by the runtime replacement for the standard tag <img>. It supports styles. Used in the form:
     <amp-img
                src="img/hero@1x.jpg"
                srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
                layout="responsive" width="360" placeholder
                heights="(min-width:1420px) 20%, (min-width:1320px) 25%, (min-width:1000px) 40%, (min-width:760px)  85%, (min-width:500px) 100%, 120%"
                alt="an image"
                height="216" on="tap:headline-img-lightbox" role="img" tabindex="0">
            </amp-img>

    # Inserting a picture from the different sources for different screen sizes

  • amp-pixel — a element to track page views. It does not support styles, the code is as follows:
    <amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>

    # Specifies tracking, randomly generated code

  • amp-video — a replacement for <video> tag from HTML5. Note that the component can only be used for direct insertion of HTML5 video:
    <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
        poster="video-poster.jpg">
      <div fallback>
        <p>Your browser doesn’t support HTML5 video</p>
      </div>
      <source type="video/mp4" src="foo.mp4">
      <source type="video/webm" src="foo.webm">
    </amp-video>

    # Specifies the size and path of the video, as well as an error if HTML5 is not supported

    There’s a separated script and tag to insert a YouTube video:

    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
    
    <amp-youtube
          data-videoid="WHD8FM2lpUE"
          layout="responsive"
          width="480" height="270"></amp-youtube>

    # Insert video ID from YouTube, specify the option to adjust the window size

AMP supports the HTML extentions for including clips from Facebook, photos from the Instagram, payment, analytics, animation, audio, and other popular features.

rel="canonical"

If the site has two versions of the page, standard and AMP, then you must specify the cross-reference for proper indexing in Google:

 # On main page
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

 # On AMP page
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

# Search engine automatically indexes the AMP-version when indexing the main page

AMP-pages check

There are two ways of checking AMP pages for errors. The first and easiest — to add to the URL-address of the new page #development=1 in the form:

http://www.example.org/released.amp.html#development=1

# Errors are displayed in the Chrome DevTools

In addition, the company has developed a console validator (Beta status), written in JavaScript:

$ ./index.js testdata/feature_tests/minimum_valid_amp.html
testdata/feature_tests/minimum_valid_amp.html: PASS

$ ./index.js testdata/feature_tests/several_errors.html
testdata/feature_tests/several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
testdata/feature_tests/several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.

# Error output in HTML

AMP Cache

To fast return AMP page, you can use another Google service — AMP Cache. To distribute content using CDN, you need to modify it’s URL:

 # Was 
https://example.com/amp_document.html

 # Is
https://cdn.ampproject.org/c/s/example.com/amp_document.html

# Prefix /c/s means secure connection, /c — normal

Source URL can also contain a query string. Google provides AMP URL API to automatically receive cached pages using batchGet method.

The most important

If a significant part of the audience comes from mobile devices, the creation of AMP-versions of your pages will improve user interaction with the website. Do not forget to optimize your web server and implement mobile optimization.

Подпишитесь на Хайлоад с помощью Google аккаунта
или закройте эту хрень