Back in October, Google introduced Accelerated Mobile Pages. It is an open-source project that relies on its AMP HTML, a framework built on existing web technology designed to regulate and serve faster mobile web pages. The project is headed up by Google in collaboration with a few other big internet companies like Twitter, Linkedin and Wordpress, and is designed to be an open standard. The idea is that by introducing some basic constraints, Google and others can cache webpages and serve them instantly, in a similar but more open veign to Facebook’s Instant Articles, which will be available to all developers on April 12th at Facebook’s F8 conference.
Google AMP search results
The cynical developer in your or I may look at this sort of thing as yet another standard we need to get caught up on with no guarantee that Google, or anyone else, will make long-term use of it. But Google has already gotten the major news publications on board and I have already seen it show up when I search news-related queries. Because there are certainly many technically unsavvy news organizations, this could be a nice opportunity for smaller shops to leapfrog them for more search exposure.
To use AMP, you need to create a second source of the content, similar to an RSS feed and reference it from within the main article.
<link rel="amphtml" href="http://thepracticaldev.com/amp/accelerated-mobile-pages">
The AMP page is basically a paired down version of the first one with some boilerplate like such:
<!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>Yes, there is an emoji in the code. If you don't like hipster programming, steer clear 😜.
Implementing Accelerated Mobile Pages is not a difficult task if you already had a straightforward design, have a good handle over your implementation and serve pages via the server and progressive enhancement. Since this is designed for content-based web pages nd not complex apps, I am hoping that is what you do. I am certain that a lot of news organizations do not have a well organized codebase, but AMP will reward those that do in the long run.
Since The Practical Developer makes great use of Twitter for content distribution via @ThePracticalDev, I would be excited to see Twitter serve cached versions of AMP pages instantly, but it is unclear what Twitter’s long term plans are. Their involvement to date has been in the form of providing support for tweets to be displayed swiftly via the AMP protocol.
Top comments (0)