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)