Last fall, on the heels of Mobilegeddon, Google introduced their Accelerated Mobile Pages (AMP) project, which was motivated by the fact that smartphones and tablets are now the primary ways in which the world accesses information and news.
We’ve all been there: we try to access a website or page on our mobile, phone, and it takes forever to load. Every time this happens, that website loses a potential reader, as that reader becomes frustrated or impatient, and closes the page or moves on to a different topic or source option. When this happens, the original publisher loses potential ad, subscription, or ecommerce revenue, because the reader leaves the page before it’s even able to load.
The Google AMP project aims to dramatically improve the performance of websites on mobile devices, especially those with rich content like videos and graphics. They want all mobile content to load simulateously — no matter the site content, and no matter the phone, table tor mobile device. The project wil rely upon AMP HTML, which is an open framework that has been built out of pre-existing online and web technology, and will help websites to build newer, light-weight, responsive and quick-loading webpages.
AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:
<!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>Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.
For example, the
amp-img
tag provides fullsrcset
support even in browsers that don’t support it yet. Learn how to create your first AMP HTML page.
Google has stated that a webpage built on this basic HTML can load anywhere from 15 – 85% faster than the non-AMP version of the same page.
So, what does AMP mean for your website? And more importantly, for your rank on the Google SERPs?
AMP is not a direct factor in search engine rankings, and websites that switch to AMP won’t see an immediate spike in search ranking (as, according to Richard Gringas at Google, there are many other search engine signals that need to be optimized as well, in conjunction with it). However, speed is still a determining factor in SEO, so if you and a competitor site were at level playing fields on every other factor, the site with the faster load time would end up ranking higher. Which basically means that even if you mastered the art of SEO in every other aspect, without AMP, you might still rank lower than competitors due to Google punishing slow-loading websites in their SERPs.
What about Ads?
In order to “make the world great by connecting people to content instantly”, advertisements have to also work on the new AMP platform as well. in addition to ensure AMP works well with publisher business models of today, Google also wants to ensure they leave room for “bold innovation” in the future as well.
In the interim, they want to ensure that ad formats, features and reporting still work within the AMP environment. They have set out four key principles to guide the development work on ads in AMP:
- Speed. Ads in AMP need to be as quick as the AMP documents themselves.
- Ads need to be beautiful and innovative
- Ads need to be secure, so HTTPS protocol is mandatory.
- Industry participation is required to ensure broad support
In short, Google thinks adhering to these four principles will help to unlock the advertising industry’s next $50 billion in revenue…and don’t you want a piece of that advertising pie?!
AMP is the Future
Google’s AMP vision is to “make the mobile world great by connecting people to content instantly”. And the amount of time and resources they have put into documenting and promoting the approach will only help marketers and IT divisions view AMP as the “new mobile standard” going forward.