AMP Pages - Guillermo Garron

What are AMP pages

AMP stands for Accelerated Mobile Pages, and actually is just a sub-set of HTML aimed at creating:

Websites
Ads
Emails

And surely more applications to come, it is a Google product, yes it is Open Sourced, but strongly backed by Google, that it almost belongs to it.

As said the HTML code needed to create AMP pages is a reduced sub-set of the whole HTML set, when the project started, JavaScript was not allowed, now it is possible to use JavaScript libraries like JQuery or React. Also, the css used in the website should be in-lined in order to comply with AMP standards.

AMP pages example

From the AMP project website, here is the most basic example:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

As it can be seen, there is little difference with basic HTML, main differences are, the declare at the beginning of the document with the tag <html amp lang="en">, the use of <amp-img>, instead of <img>, <amp-iframe> instead of <iframe>.

It also enforces the use of Schema.org metadata, to put information about the article so search engines better understand what are the pages about.

When to use it

It seems like a good idea for everybody to have an AMP version of every page, that way when a visitor comes to the site using a mobile phone it will see a fast page.

The only problem is that this only works when someone arrives to the site from Google or Bing, but not if they write the url directly on the phone.

This is true unless the only version of the site would be the AMP version. So, using AMP pages seems like creating websites for Google traffic. There is also the idea that Google prefer sites that have pages implemented with AMP, so if the site owner is looking for Google traffic, then yes it is a good idea to have AMP pages, otherwise it may be the same to just worry about creating a light and fast site.

Main benefits of AMP

The main benefit is that if any given website is slow, the AMP version of it will be a lot faster, but if the site is already fast, it may not be any beneficial to have an AMP version of the website.

Another benefit is that if the website publish news, being it built using AMP will make it eligible to appear on Google News Carousel, this can send a lot of traffic to that given website.

How to use AMP

There are two main ways to implement AMP pages on your website.

Making all your site AMP compatible

In this scenario, the framework or theme of the site is changed to one that is AMP compatible. The main benefit of this is that it should be just like changing themes, the counter benefit is that given the small set of JavaScript allowed, if the site relies heavily on JavaScript to display its contents it can be hard to recreate the full site functionality without it.

Creating a second version of the site using AMP pages

The other way, is to have two versions of the site, one with basic HTML, and all the JavaScript you need, and a second version of the site using AMP markup.

The main benefit of this approach is that the functionality will be not compromised, but what happens when users links to the AMP version, if a visitor comes from a Desktop to the site following that link will get the “reduced” version of the website instead of the “full” version of it.

Also, if for any reason the site owner decide to get rid of AMP altogether he will need to implement 301 redirection in all old pages, otherwise visitors will get 404 errors when trying to follow all links to the AMP version of those pages.

Final words

Nobody wants slow sites, there are different options in order to accomplish fast sites:

Try to avoid too much Java Scrip
Use gzip on your webserver
Keep your CSS files as small as possible
Use system fonts whenever possible

Or, if you really need disobey all of the above, then create an AMP version of your site