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 tag, using the lightning bolt character. If you like, you can use instead.
You must inline all your CSS in the HEAD section (no external stylesheets allowed) using the
