Google AMP and why you should care

Google AMP | PPC Town can help get your site moving on mobile!

Google AMP: Accelerated Mobile Pages

Google AMP has been popping up for a while over the past year or so, and it’s starting to make an impact. AMP is a new way to deliver static content for it to be rendered faster than normal. There are three parts to Google AMP: AMP HTML, AMP JS, and the Google AMP Cache

Watch this Video on Google AMP

It’s just as easy to show you an introductory video on Google AMP from Google for the 10,000 foot overview.

Breaking Down the Setup

If you want to see this site in action under AMP, click here. Also, as I mentioned before, Google AMP is made up of three parts:

  • AMP HTML
    Slightly-restricted HTML that has extensions for AMP properties. Being simple makes it easier to render, thus being faster.
  • AMP JS
    Short-and-sweet JavaScript library that makes sure that the AMP HTML renders fast.
  • Google AMP Cache
    This is a cache designed to serve up AMP HTML pages.

AMP HTML

In a simplistic form, the Google AMP HTML is pretty straight-forward. Nothing too crazy here (BackboneJS, I’m looking at you). It’s just HTML with some add-ons. Borrowing from Google’s AMP HTML example (below), we can see a simple setup.

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

You can find out more about the AMP HTML formatting here. Most of the HTML in AMP HTML stays the same, but there are a few instances where there are AMP-specific tags such as <amp-img> and <amp-ad> to name a few.

AMP JS

Using the AMP JS library is like getting a Lamborghini for your daily commute. It brings in all of AMP’s best performance practices, and it manages resource loading plus gives you custom tags. The whole purpose of AMP JS is to make the fastest rendering possible of your web page.

Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

If that wasn’t enough, there are other performance enhancements like the sandboxing of all iframes, pre-calculation of layouts for all elements on a page prior to resources being loaded, and lastly, the disabling of slow CSS selectors. Good stuff.

Here is a video by Malte Ubl on the Anatomy of AMP JS.

Google AMP Cache

If you understand the basis of caching web pages, then this should make sense to you and why Google has their own caching system.

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically.

For efficiency, HTTP 2.0 is used with the Google AMP Cache to pull all the JavaScript and image files from the same originating domain. The Google AMP Cache also has built-in validation. This validates that a page is guaranteed to work, and that it doesn’t need (or depend on) external resources. Assertions are run against the page code to make sure that the markup is valid and meets the AMP HTML specification.

Here’s how you can test your AMP HTML pages.

(Google Amp referenced on this post can be found here)

Leave a Reply

Your email address will not be published. Required fields are marked *