Diving Into Google Accelerated Mobile Pages (AMP)

accelerated mobile pages

The mobile web is constantly evolving and Google is always experimenting with new ways to speed up content delivery and performance across all devices. The new Accelerated Mobile Pages (AMP) project from Google is aiming to do just that by allowing websites to build light-weight web pages using their open source framework, built on AMP HTML. Today we will dive into how to use Google AMP, show you examples of it in practice, and also discuss some of the pros and cons of this new project.

What is the Google Accelerated Mobile Pages Project?

google mobile accelerated pages

The open source initiative known as the Google Accelerated Mobile Pages Project was originally announced on October 7, 2015 by the Google web team. It officially started showing up in SERPs on February 24, 2016. The inspiration for the project was that Google wants the same code to work across multiple platforms and devices, no matter what type of phone, tablet or mobile device people are using and that it load instantly.

40% of people will wait no more than 3 seconds before abandoning a website. – think with Google

Google Accelerated Mobile pages (AMP) is available for everyone to use and the HTML source code can be found on their GitHub page. To put is simply, AMP is basically a stripped down HTML page which restricts certain HTML, CSS, and Javascript. Some interesting requirements to make a note of:

  • Allows only asynchronous scripts
  • All CSS must be inlined
  • Styles are limited to 50KB
  • External resources like images must state their size in HTML
  • All Javascript must be out of critical path
  • No user written Javascript is allowed, only AMP supported
  • Fonts must be loaded with a link tag or a CSS @font-face rule

Remind of you Google PageSpeed Insights guidelines? That is because Google is basically taking all of the recommendations they have told us over the past years and are enforcing them with AMP. Which is a good thing, for the most part, as it should stop some bad mobile performance habits floating around the web.

How Do Accelerated Mobile Pages Work?

Google has published a great tutorial on how to create your first AMP page. We will go through a quick rundown on what is involved and what you need to know. It is important to know how AMP works in SERPs. In most cases, Google will only serve AMP pages to mobile devices. However, Google does not penalize users who have AMP-only pages (i.e. no additional HTML desktop version) such as the ampproject itself. Google has a preview up but you can emulate it from your desktop using Chrome DevTools. For example, we toggled device mode over to an Apple iPhone 6 and did a search for “Mars” which is one the AMP promos running right now. You can see below a little AMP icon that appears in the carousel, which means an AMP HTML page is being served.

emulate AMP on your desktop

So if you are running AMP you might be lucky enough to grab one of those carousel spots on mobile SERPs. And below you can see this is an AMP HTML page.

AMP page in SERPS

Below is an example of what you’re starting AMP page might look like from an HTML perspective.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>My AMP Page</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 my AMP Page</h1>
  </body>
</html>

Depending on the platform the AMP page is on the URL might vary slightly, but typically the URL will have /?amp=1 or /amp appended to it.

Some also use .amp as the phys.org did in the Mars example.

amp extension

According to Google’s documentation AMP HTML documents must follow the following syntax.

  • Start with the doctype <!doctype html>.
  • Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
  • Contain <head> and <body> tags (They are optional in HTML).
  • Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Contain a <meta charset="utf-8"> tag as the first child of their head tag.
  • Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.
  • Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).
  • Contain the following in their <head> tag:
    <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>

Images

In AMP HTML the <img> tag is replaced with <amp-image>. Here is an example.

<amp-img src="amp-image.jpg" alt="AMP Image" height="200" width="500"></amp-img>

CSS

Remember as we mentioned earlier your CSS must all be inline within your HTML doc using the following tag <style amp-custom>.

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: red;
  }
</style>

Validating AMP

Every AMP page must be validated to ensure there are no errors. There is an easy way to validate your AMP HTML page with Google Chrome DevTools.

  1. Open up your AMP page and add #development=1 to the end of URL.
  2. Launch the Console, refresh the page and you will see if your AMP validation is successful. Learn more about validation.
    validating accelerated mobile pages AMP

SEO Your AMP Pages

By having an AMP version of your post or page you don’t want to get dinged for duplicate content, so Google requires that you use the canonical tag when linking to pages.

Example on your original page:

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

Example on your AMP page:

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

Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.

Schema Required for Carousel

If you are wanting to achieve that carousel shown in the earlier preview you are required to use Schema markup. Here is an example below.

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

AMP in the Wild

There are a number of larger companies and publishers already using AMP HTML in production, such as The Next Web, The Verge, Washington Post, Entrepreneur, The New York Post, and many more. Below is an example of what the AMP page looks like on a recent article posted on The Next Web. The AMP page is accessible via the ?amp=1 string added onto the web page.

http://thenextweb.com/dd/2016/02/29/this-clever-design-firm-is-open-sourcing-its-rejected-logos-so-startups-can-use-them-for-free/?amp=1

the next web AMP

A big problem today is that people don’t optimize the responsive or mobile versions of their website’s enough. Here is a comparison of the desktop version and the AMP version of that post above.

Desktop Version of The Next Web

As you can see the desktop version of The Next Web post is quite heavy at over 5MB and 275 requests. That is a lot of content. Most of the weight and requests are actually coming from third-party advertising networks.
the-next-web-desktop-version

AMP Version of The Next Web

The AMP version of that same post is only 380KB and only generates 13 requests. That is quite a difference and should have no trouble loading fast on a mobile device.

the-next-web-amp-version

It is important to note though that since Google AMP is new a lot of publishers haven’t worked ads into their AMP sites yet. AMP actually already supports Google Adsense along with 10+ other ad networks. Here is a good tutorial on how to use responsive Adsense ads with Google AMP. Publisher’s aren’t just going to sit back and take a loss on their advertising income, so over the next 6 months expect to see ads show up again even on AMP HTML pages.

Pros and Cons of Google Accelerated Mobile Pages (AMP)

Google is definitely pushing for a faster mobile web which is great! But there are pros and cons to using Google Accelerated Mobile Pages which every developer should think about before jumping on the AMP bandwagon.

Pros

  • AMP is open source.
  • By loading pages faster you might see an SEO advantage as speed is a ranking factor in SERPs.
  • Since this is a project developed by Google you can probably assume that AMP HTML pages will eventually be its own ranking factor as well.
  • Possible to gain carousel spot in mobile SERPs as we showed you above.
  • Lots of customization opportunities  and full control such as the ability not to use AMP Cache and serve content from your own CDN or origin server.
  • There is already a WordPress plugin and you can expect them to pop up for Drupal, Joomla, Magento, etc.
  • Prevents users from bloating pages with large CSS and JS frameworks.

Cons

  • AMP can be difficult to implement if you’re not a developer.
  • Introduces another layer of complexity. Perhaps we should spend more time optimizing our current mobile and responsive sites?
  • Still a lack of major features and customizations on CMS integrations such as WordPress, such as not supporting pages. However this could change with time.
  • Supports only AMP JS functions which means your own third-party JS might not be supported. You can use custom Javascript in <amp-iframe> tags but it won’t allow you access to data within the script.
  • No browser support for IE11 yet which means Windows Phone users are currently out of luck. However they are supporting Edge. Official browser supportIn general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers. Beyond that the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.In particular, we try to maintain “it might not be perfect but isn’t broken”-support for the Android 4.0 system browser and Chrome 28+ on phones.

Using Accelerated Mobile Pages in WordPress

There are a couple WordPress plugins on the repository already that will enable Google Accelerated Mobile Pages on your WordPress site.

We installed the AMP plugin on our test site, which automatically creates the AMP version of your posts. There are no settings in the plugin, simply install and you’re good to go. It also adds the required canonical and links tags as well. Note: This plugin doesn’t support pages yet and there have been reported issues with getting AMP content to index in Google Search Console.

mobile vs amp

Yoast also recently released Glue for Yoast SEO & AMP which adds the necessary schema data on your posts. You can test your schema markup using Google’s structured Data Testing Tool. Remember the schema data is needed if you want that carousel feature in SERPs.

There are also a Drupal AMP module and Joomla AMP extension now available.

Good References for Google Accelerated Mobile Pages (AMP)

There are a lot of great references out there to get you started with Google AMP. Here are a couple we recommend:

Summary

As you can see the Google Accelerated Mobile Pages Project is definitely something to keep an eye on and you might want to start experimenting with it. We are not sure if it is quite ready for prime time, but would love to know your thoughts on Google AMP. Perhaps the creation of this project is a result of us not optimizing our sites well enough for mobile in the past? Join our community discussion on Google AMP.

Related Articles

Diving Into Google Accelerated Mobile Pages (AMP) was last modified: March 14th, 2017 by Brian Jackson