Google’s AMP: The Fun and User-Friendly Guide to Accelerated Mobile Pages

Watch the video. Ignore the copy.

That’s my advice to you once you land on Google’s site dedicated to the new Accelerated Mobile Pages (AMP) Project:

“The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.”

If you are not a developer and you read the copy, you will be swallowed alive by jargon.

Watch the video, however, and you’ll almost immediately understand what AMP is all about (not to mention a funny Spinal Tap reference, see below).

Or you could just read this guide because it will be the most fun you’ve ever had reading about AMP and how it affects your content marketing.

I promise.

What is Google’s AMP Project?

Since the birth of Google’s Zero Moment of Truth philosophy back in 2011, it’s been no secret that they want to “dramatically improve the performance of the mobile web.”

And I probably don’t need to tell you that there is a small problem with the performance of content on the mobile web.

Chances are, you have a mobile device. And chances are that you’ve clicked a link on that device from a search results page, social media site, or inside your email inbox … eager to consume the content.

But it never comes.

Well, it comes, but in a convulsing patchwork of lurching, jerky images, videos, and ads as the page loads. You look on in horror, eyes dilated, bouncing around in your subway seat like someone who has to go to the bathroom.

“How long is this going to take?” you cry out to no one in particular.

Who knows, but you’ll never find out because, like 40 percent of the population, you’ll bail on the loading page within 3 seconds. Then you will say, like my black cat Apollo Monkeystrap, “Le sigh.”

It’s insufferable mobile moments like these that Google wants to eliminate with AMP.

How fast will AMP make your pages?

On a scale from 1 to 10, with one being “not loading at all” and ten being “loading in one second,” AMP content will load at a page speed of 11. (That’s the Spinal Tap reference I warned you about).

But seriously, how fast?

Jon Parise, software engineer at Pinterest, said, “Accelerated Mobile Pages load four times faster and use eight times less data than traditional mobile-optimized pages.”

Four times faster is good! But what does that mean for you, our friendly subway commuter trying to download a web page on his mobile phone?

According to NiemanLab, an AMP optimized New York Times article fully downloaded on mobile in 2.99 seconds. For a comparison, in a test in Chrome on a fast iMac, the desktop version of that page took 3.82 seconds (the mobile version was faster).

If you weren’t aware, NYTimes.com was notorious for being one of the slowest loading mobile news websites this side of Saturn.

They’ve since fixed that.

Are you sure that’s fast enough?

But wait, you say, 2.99 seconds is still at the upper reaches of the time frame our subway commuter is willing to wait. He, like 40 percent of the population, bailed at 3 seconds. 2.99 seconds is cutting it close! That’s not much of an improvement.

True, but the difference is that in the first, non-AMP scenario on a desktop, the page was still loading after 3 seconds. In the AMP version of the scenario, it was fully downloaded in 2.99.

More importantly, the AMP version reached “domContentLoaded — a key point in a webpage’s load where the HTML is fully downloaded and certain important parsing has been completed” in 0.857 seconds.

A blink of an eye takes around 0.33 seconds.

In other words, blink your eye twice and you, our subway commuter, can start reading the useful part of the content almost instantly, thanks to AMP.

What makes traditional mobile pages load so slowly?

I think I know, but since I’m not a developer, designer, or programmer (and not even sure if those are different disciplines), I rung up one of our developers here at Rainmaker Digital, Mike Hale, to help me translate.

Mike said that when a desktop site gets pulled into a mobile browser, you’ve got several dozens of packets of information getting “called,” often from different hosts, into the mobile browser.

In the old, slow New York Times example above, one article could have “192 requests, some to Times’s hosts, most to a flurry of other servers hosting scores of scripts.”

The most useful part will download in 5 seconds after you click, but the rest of it is still coming in, which is why the screen bounces as the browser sets and then resets.

Still lost, I pressed Mike, “But what kind of things are being requested?! What’s being called?!”

Mike told me that your mobile could be calling the scripts for social plugins, image carousels, SlideShares, and videos. And then there is probably analytics software, ads, and tracking scripts running in the background.

Sensible, everyday things, but they add up. And fast.

The problem is your mobile device simply doesn’t have the processing muscle to pull this off wicked fast.

This illustration explains the problem with mobile content

Imagine if you went to the bank, walked up to the teller and requested $100, but in a peculiar order: fifteen one-dollar bills, three five-dollar bills, five ten-dollar bills, and one twenty-dollar bill.

If the bank operated like the mobile web does now, then the teller would make multiple trips to give you each bill separately.

Each one of those trips is a “call.”

If the bank was optimized with AMP, however, the teller would give you all of your bills at once. Furthermore, he would probably ignore your specific request for certain bills and just deliver a hundred-dollar bill.

AMP aims to simplify the requests a browser has to make.

“The only script you can call is the AMP javascript,” Mike said. “Everything is wrapped in one bundle. I’m handing you everything at once.”

And here is how Yoast described AMP mobile content:

“Let’s compare this to a race car. If you want to make a race car faster, you give it a faster engine and you strip all the weight. In this weight stripping, you also remove things like back seats, air conditioning, etc. AMP is not unlike that. It’s the trimmed-down version of a normal web, because Google cares for speed more than for nifty features.”

Feel that sting of bitterness in the last line? It’s not your imagination. We’ll get to that in a moment. First, let’s look at an AMP experience to help you see what I mean.

What does AMP-optimized mobile content look like?

Fortunately, you can test a demo of AMP news content.

1. Whip out that smartphone of yours.
2. Open up a browser (any browser).
3. Type in g.co/ampdemo.
4. Type in popular keyword phrases like “Justin Bieber Birthday,” “Jennifer Lawrence,” or “Yoko Ono” into the Google search box.
5. Hit “Send.”

 

This is an example of how the results will look:

 

As you can see, AMP content gets top billing. It’s in the carousel that sits above the fold. The standard entries sit below it.

You can scroll through that carousel and when you find an AMP-powered article you like, click on it. This is how it will look:

 

Fun reading, eh!

Why is Google doing this, and should you care? (Sort of)

This is where it gets strange.

As I mentioned above, Google has been obsessed with mobile web performance optimization for the last five years, which is why we’ve been writing about the importance of seriously fast website speed (there are six tools to test your site speed in that article, by the way) for just as long.

It’s why we warned you last year about Google’s Mobile Update, “Mobilegeddon.”

So, at this point, AMP is sort of a culmination of Google’s focus on mobile web optimization, but how does it help publishers?

It sounds simplistic, but Google thinks: Users love content. They love fast content. The faster you can dish out fast content, the more content can be consumed.

There is something else to this move, though: Google is trying to win the news consumption war.

How is AMP different from Instant Articles and Apple News?

Last year, both Apple and Facebook launched applications that allow users to consume news articles: Apple News and Instant Articles.

Both of these applications are stand-alone products.

Christian Cantrell, a Senior Experience Development Engineer on Adobe’s XD team, wrote on Smashing Magazine, “They’re essentially fancy news aggregators with custom renderers built on top of proprietary syndication formats.”

In other words, Instant Articles and Apple News are RSS reborn.

Google, on the other hand, seeks to go straight to the publishers and get them to optimize mobile content for consumption on the open web, which allows for effortless entry and easy distribution, something you can’t get in an app.

So far, some big-name news publishers have taken part:

• Time Inc.
• The Atlantic
• Vox
• BBC
• The Huffington Post

A number of technology companies like WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn, and Pinterest joined, too.

Two common complaints about AMP

The complaints come in at least two varieties:

1. Detractors hate the restrictions on what mobile content can do.
2. Detractors lament that the small publisher will be punished.

Yoast falls into the first category. Joost de Valk wrote, “AMP restricts what you can do in HTML pages. Fancy design is stripped out in favor of speed. AMP is very much a function over form project.”

Be aware that it’s not just looks that are affected — out of the box, AMP doesn’t support forms, which means AMP pages won’t help you grow your email list. There are tech workarounds available, but the situation is still too new to see how those will evolve.

You’ll notice mostly large publishers are using AMP, but does that mean AMP is out to hurt smaller publishers?

Paul Shapiro at Search Engine Land had this to say:

“Although experienced developers can often achieve similar results through intensive performance optimizations, publishers often neglect this due to resource constraints. AMP allows these optimizations to be easily achieved without altering the primary mobile web experience.”

AMP may prove to be a solid tool for optimizing mobile experience. So should you AMP?

Who should worry about AMP?

It depends.

• Are you a giant publisher of news? Then panic, unless you already have a solid strategy for mobile user experience. Which you should have already had in place months ago, but hey.
• Do you get a signifiant source of traffic from mobile? Again, you need to make sure your strategy for mobile experience is rock solid. You probably want to watch and see how AMP develops, but it might be worth some experiments.
• Are you in a new market without much competition? Make it a point to optimize your mobile content in the next 30 days, but don’t panic.
• Don’t fit in any of the categories above? Then sit on your hands and monitor what happens.

“Definitely something to keep on a publisher’s radar,” our Chief Product Officer and StudioPress founder Brian Gardner told me. “But my guess is that it’ll be a fluid deal for some time.”

Who knows? There might be an easier way to do all of this down the road — something Jake Goldman, president and founder of 10up, a WordPress content management consulting agency, also suggested:

“Given time, we suspect that AMP will eventually become as complex as ‘unrestricted’ HTML or be rendered moot by advances in mobile hardware, broadband speeds, and standardized privacy features — a solution for a problem we no longer have.

But let’s say you do want to play around with AMP.

How to create your first AMP page

This is where you get to pull up your big boy/girl developer pants, because it takes some basic markup to get started with AMP.

I recommend you work your way through this basic tutorial. It will teach you how to:

• Create your first AMP page using boilerplate code.
• Stage it.
• Validate that it’s AMP compliant (this is a super important step) using Google’s validator.
• Prepare for publication and distribution.

In your markup, you’ll see some elements have an AMP tag. Thus, the <img> tag becomes <amp-img>. The <anim> tag becomes <amp-anim>. The <video> tag becomes <amp-video>.

And so on.

What should WordPress users do?

If you want to try AMP out, you’re in luck.

On February 24, 2016, Automattic released an official AMP plugin. Therefore, WordPress users are just a downloadable plugin away from AMP-optimized content.

Keep this in mind, however: according to the official AMP plugin page, the plugin does not support pages or archives. Just posts.

But once you activate the plugin — bam — all of your posts are automatically AMPlified!

With the plugin active, all posts on your site will have dynamically generated AMP-compatible versions.

You can see the AMP version of your web posts by putting “/amp” at the end of the url. For instance, the AMP version of yourwebsite.com/amp-wicked-fast becomes yourwebsite.com/amp-wicked-fast/amp.

And if you’re a Rainmaker Platform customer: we’ve got AMP on our radar screens. We’re not going to rush into anything, given Google’s history of dramatic 180 degree turnarounds. But if AMP does prove to be important in the future, we’ll offer an easy AMP solution to our users.

Is AMP a search ranking factor?

No.

Google’s John Mueller stated that AMP is not a ranking factor. He did say that “Converting pages to AMP format will satisfy the mobile-friendly ranking signal, but there’s no ranking signal that’s solely associated with AMP.”

Search Engine Journal staff writer Matt Southern points out:

“My question is, what does it matter if AMP is a ranking signal or not if AMP content already has a one-way ticket to the top of the first page? For the most part AMP content is already ranking above organic results, which is one of the greatest ranking boosts one can ask for.”

So, there is an advantage to getting out there and being ahead of your competitors in the mobile content game — a carrot on a stick the Distilled folks wave in your face in this Whiteboard Friday video.

Another reason I recommend you watch that Whiteboard Friday video is the folks at Distilled belabored another important distinction AMP offers: super fast delivery through a caching server.

Tom Anthony, head of R&D at Distilled, says:

“And then all of this is designed to be really heavily cached so that Google can host these pages, host your actual content right there, and so they don’t even need to fetch it from you anymore.”

Just for grins, this is what the Google Blog had to say about their new approach to caching:

“So, as part of this effort, we’ve designed a new approach to caching that allows the publisher to continue to host their content while allowing for efficient distribution through Google’s high performance global cache. We intend to open our cache servers to be used by anyone free of charge.”

I like free.

Will AMP affect your advertising?

It shouldn’t.

According to Google, “We want to support a comprehensive range of ad formats, ad networks and technologies. Any sites using AMP HTML will retain their choice of ad networks, as well as any formats that don’t detract from the user experience.”

And in case you are wondering, here’s a list of supported ad networks from the official Google AMP Project site:

• A9
• Adform
• AdReactor
• AdSense
• AdTech
• Dot and Media
• Doubleclick
• Flite
• plista
• Smart AdServer
• Yieldmo
• Revcontent

By the way, I think AMP is also meant to soothe publishers’ fears of the growing adoption of ad blockers. But that’s another story for another time. It’s probably time we wrap this up.

Over to you …

Wow. We covered a lot of ground here.

Thank you for sticking with me. Hopefully you found this useful and I answered all of your questions about the Google AMP Project.

If not, feel free to drop me a line in the comments below. Plus, leave a comment if you have anything to add to what I wrote or if I missed something.

Either way, I look forward to hearing from you.