AMP: A Powerful New Tool for Search Engine Optimization

In October 2015, an ambitious, open source project was launched: the "Accelerated Mobile Pages" (AMP) project. What is it? Well, a good place to investigate the AMP Project is at ampproject.org, but we'll do our best to sum it up for you here. We'll approach the topic from the point of view of Website Programming and Website Design, but don't worry — we won't get too technical! Our goal is to provide an overview that gets right to the heart of the matter. We'll tell you what AMP is, what you need to know about it, and what it means for the future of SERPs in Google, Bing and the other major search engines that compete for your attention.

Get ready! You won't want to miss this, because AMP is a powerful new tool for search engine optimization.

What is AMP?

The idea behind the AMP Project is pretty simple: to provide fast-loading, non-jackhammered html that's marked up for — and easily parsed by — search engines.

Jackhammery

n. The art of bludgeoning useless, garish and otherwise unintuitive elements into a user interface based on the delusion that the accumulation of visual stimuli outweighs the equilibrium maintained between function and productivity.

Free website design advice: Jackhammery is not cool. Do not jackhammer your website!

Back to the point at hand, AMP is simply an extension of three the key elements in the web design world.

HTML AMP HTML
CSS AMP CSS
JS AMP JS

Each of these are similar to their parent counterpart, but they are slightly different and each is somewhat restricted. The purpose the restrictions is mostly to improve loading performance. What this basically means is that AMP is just a specialized modification of html, css and javascript.

Do We Really Need It?

Do do we really need AMP? That's a fair question!

At first glance, the concept seems like a solution in search of a problem. One of AMP's major claims to fame is its ability to render mobile content with minimizal delay. Okay... but is "pages loading too slow on a mobile device" really an issue in this modern age of fast phones and 4G service? Take any graphic-intensive website and compare loadtime between your desktop computer and mobile device. Chances are, if you have a decent phone and good Internet connection, you won't even notice a difference.

So what are we doing here? Is this just revisiting the digital dark ages of mobile pioneering, where the only way to get content on a phone was to use some totally different markup language like WAP?

It's not quite that bad. AMP does introduce some new markup and styling, but fortunately it's not that new or out of the ordinary. Most traditional elements, like <h1>, <p>, <ul> and <ol> stick around and remain unchanged.  Most of the new AMP html elements behave exactly the same as traditional ones, the only difference being that the string "amp-" is pre-pended to it. For example:

<img> <amp-img>
<video> <amp-video>
<iframe> <amp-iframe>

Anyone who knows a little html should be able to catch on quickly.

What are the Advantages to Using AMP?

There are some pretty good advantages to using AMP.

Clearly, preserving bandwidth is always a good idea. It saves money and memory in the long run.

Now, one can make the claim that graphic-intensive and javascript-riddled pages are inevitably going to experience some lag when requested over a poor connection or rendered on older devices. That's a fair point, and Google has suggested that slow-loading pages decrease ad revenue and encourage bounce rate. That seems like common sense... and Google substantiates that claim with this study on doubleclickbygoogle.com:

The Need for Mobile speed: How Mobile Latency Impacts Publisher Revenue

The gist of the article is that mobile sites that load in 5 seconds earn up to twice the mobile ad revenue than sites that load in 19 seconds. Which leads to a comment and a question:

  • Comment: No $%!†! People aren't going to wait around all day for ads to load. They're going to bounce.
  • Question: What kind of awful jackhammers could you possibly impose on your visitors to make them wait 19 seconds to see your website?

Who knows? In any case, it still begs the question: For normal, non-jackhammered websites, is AMP really worth it?

According to Google, it is. In a slightly more pragmatic article, we find this:

Suffice it to say that 40% of shoppers will wait no more than three seconds before abandoning a retail or travel site.

Speed really does matter — even when we're talking a few seconds or so. To improve load time, Google caches AMP pages. And, Bing does too!

While google has said that AMP pages themselves won't get a boost in SERPs, they've also said that load speed is an important ranking factor.

That's what AMP does best — it loads fast.

What are the Disadvantages to Using AMP?

So clearly, AMP is a great new tool for search engine optimization, but it still has has its drawbacks.

As mentioned earlier, it uses a modified version of HTML, which means you can't simply put an AMP header in your HTML files and expect them to "just work." Depending on the content, conversion could be a huge pain in the ASP (or PHP, Perl, Java, etc – whatever server side language you use to script the conversion). On top of that, you want to be sure the amp html validates. In our experience, this is very important, because if the code is valid, Google will cache it. Not only will that increase performance, it will help you snuggle your way into listings on SERPs. The good news is, there are a ton of tools available to check your work, like https://validator.ampproject.org.

One of the greatest disadvantages is the fact that no 3rd party javascript is supported. You have what they give you, and that's it. As an FYI for all you young-and-up-and-coming front-end whippersnappers: Don't forget, JQuery isn't built in. Yup. Can't use it.

These issues really aren't a big deal. The big deal is just making sure you deal with them: by incorporating the new markup and its new restrictions into your daily routine, by expanding your codebase and your workflow, and by mastering this budding new branch of options in the web design world.

It's worth it. If you use AMP for what it's designed to do, it's a powerful new tool in the world of SEO and web development.

But Wait! Does this mean Responsive Design is Dead?

In the world of website design, we sometimes refer to sites as being "adaptive" or "responsive."

Adaptive Design

Adaptive Design means a website pays close attention to the device that's looking at it. In other words, it "adapts" to the device that trys to render it. If you're on a desktop or a laptop, you'll get one version of the site. If you're on a phone or tablet, you'll get a different version.

A good example of an adaptive website is amazon.com. Check it out your computer, then on your phone. See? You'll get two different versions of the same website.

Responsive Design

Responsive Design runs with the one-size-fits-all idea. If you load a responsive site on a computer, phone or tablet, you'll always get the same version of the website -- but elements on the page with show up or act differently depending on the size of the window you're using to view them.  You can think of it as "responding" to the dimensions of the viewport, and it will fluidly change accordingly.

This website's responsive. Give it a try! Change the width of your browser window. Notice that the elements on the page move around? If you make the window really narrow, the navigation bar will disappear and get replaced with a mobile menu.

Now clearly, AMP is adaptive design. It's exclusively for mobile devices.

So... did AMP just kill responsive design?

Nope. Responsive design is still a great, useful, and sometimes even necessary, technique.

Remember, AMP is only for capable of displaying simple information, with a limited ability to handle interaction. It's great for news, articles and updates that are mostly text and image based, but at least for now, it can't get much more fancy than that.

Plus, some people like to be able resize windows on their screen so they can see multiple sources of information at once. For example, you may want to have two websites loaded side by side to compare prices, services, advice, or whatever. If a site isn't responsive, then you have to spend time scrolling and resizing each window so the information you want is visible. But if the websites are responsive, it's a lot easier than that. You just place the windows where you want them, and the content fluidly conforms to its container. From a user standpoint, that's pretty nice.

The fact is: you need both! This article is a great example why. View it on your desktop, and it's responsive! View it on your phone, and it's adaptive (and exclusively AMP)!

Let's AMP it up!

So there you have it: AMP in a nutshell. It's probably worth mentioning that most of the bigwig PageRank monopolizers like Twitter, Pinterest, Reddit and others, are all about AMP. Perhaps it's time you jumped on the bandwagon! There's a ton of documentation out there, and here we'd like to provide you with a list of very useful links to help you get started:

Read through these — it will be worth your time. If you need any help, however, don't hesitate to ask! We'd be more than happy to introduce you to AMP, lend advice as to incorporating it in your workflow, or just help you get started! Seriously, and with no strings attached. Just give us a call or send us an email, and we'll hook you up!

In the meantime, get to work. It's time to AMP up your SEO!