What are Accelerated Mobile Pages (AMP)?

By Rob Gravelle

As people's consumption of Web content moved from the desktop to mobile devices, it became apparent that the existing ways of designing, constructing, and serving resources over the Web simply wouldn't cut it anymore. In particular, script- and graphics-heavy Web pages were not only ugly on smaller screens, but they often took far too long to load. Couple that with a more business oriented audience, publishers were faced with losing visitors and revenue. For that reason, improving the performance of the mobile Web became paramount. In February 2016, Google launched the Accelerated Mobile Pages (AMP) framework and since that time has seen significant publisher and developer adoption. In fact, the mobile framework is set to roll out to a billion people in Asia. In today's article, we'll explore what all the fuss is about.

A Little History

Google launched the AMP project in October of 2015 with the aim to dramatically improve the performance of the mobile Web. Their goal was to come up with a way to deliver Web pages with rich content like video, animations and graphics that load almost instantaneously. The same code should also work across multiple platforms and devices so that performance would be vastly improved, regardless of the type of phone, tablet or mobile device utilized. This was achieved using AMP HTML, a new open framework built entirely out of existing Web technologies, which allows Web sites to build light-weight Web pages.

How it Works

AMP pages are built with 3 core components: AMP HTML, AMP JS, and AMP Cache.

AMP HTML

AMP HTML is just like regular HTML, but pared down to what Google considers to be the bare minimum. At the same time, AMP HTML is extended with some custom AMP properties:

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

Notice the top-level <html ?> tag, using the lightning bolt character. If you like, you can use <html amp> instead.

You must inline all your CSS in the HEAD section (no external stylesheets allowed) using the <style amp-custom> tag.

Finally, you must include the special <style amp-boilerplate> tag as the last item before the closing &lt/head> tag.

AMP JS

Most JavaScript is off-limits in AMP since third-party JavaScript can be the cause of so many performance issues. However, you can see in the code above that there is a <script> tag. It's the AMP JS library; it facilitates the fast rendering of AMP HTML pages. More specifically, the AMP JS library implements all of AMP's best performance practices, manages resource loading and gives you AMP's custom tags. One of the biggest optimizations is that the AMP script forces everything that comes from external resources to load asynchronously, so nothing in the page can block other resources from rendering. Other performance enhancing strategies include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded, and the disabling of slow CSS selectors.

AMP Cache

As everyone knows, caching is one of the best ways to increase Web page performance. Google AMP implements its own proxy-based cache for delivering all valid AMP documents. It caches AMP HTML pages immediately after fetching them for future requests. Moreover, the document, as well as all JS files and images load from the same origin, using HTTP 2.0, for greater efficiency.

Every time that a page is cached, it is validated to guarantee that it will work, and that it doesn't depend on external resources. The validation system runs a series of assertions to test the page's markup against the AMP HTML specification. A version of the validator comes bundled with every AMP page that logs validation errors directly to the browser's console when the page is rendered, allowing you to better ascertain how changes in your code might impact performance and user experience.

URL Format

Your AMP-optimized site(s) will require a separate URL, ending with "/amp", for example: robgravelle.com/news/amp. WordPress already has a plugin to help convert your existing site to AMP and help Google find them. Speaking of Google, they are affording special treatment to sites that follow the AMP specs, in that AMP-optimized sites are included in the stories that appear at the top of Google's mobile search results.

The downside is that, if readers decide to share a link to an AMP page they've clicked on through a Google search, the link points to Google.com rather than the originating server, for example: google.com/amp/robgravelle.com/news/amp. The reason is that content must be hosted on Google's AMP Cache servers in order to take advantage of their caching system.

Performance Benefits

Judging by the success of AMP so far, we can only assume that Google is doing something right. In fact, according to Google's own research, AMP pages load in less than one second on average, compared to seven to ten seconds for typical page content. Similar numbers have been reported by independent parties. Even pages that are fairly fast loading to begin with experience big performance gains, such as one-and-a-half seconds to well under a second.

Conclusion

Now that we know what AMP is and how it works, we'll learn more about how to create AMP content in future articles.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and has built web applications for numerous businesses and government agencies. Email him for a quote on your project.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, that has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on ReverbNation.com.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date