In October 2015, Google announced the introduction of the Accelerated Mobile Pages (AMP) project, an open-source project aiming to “dramatically improve the performance of the mobile web”. The project has now finally launched, taking a big stride towards Google’s goal to provide users with a “better, faster mobile internet”.

But what exactly is AMP and how will it alter the experience of the mobile web? We’ll explain what AMP is, how it works and how you can implement it to speed up your website and get to the top of the search results.

What are Accelerated Mobile Pages?

Accelerated Mobile Pages, or AMP for short, is a Google-backed project that aims to deliver content on the mobile web four times faster and using less data than traditional pages. With an increasing number of users browsing the web using mobile devices, the need for a speedier mobile web has increased as well. So AMP is intended as an open standard for any site owner that wants to have speedy, lightweight pages that load in a second or two.

So what exactly is AMP? Simply put, it’s a stripped-down version of the mobile web that runs on a reinvented version of HTML. This open-source framework, dubbed AMP HTML, strips out the elements that cause web pages to load slower on mobile, such as JavaScript and third-party scripts.

“AMP HTML is a new way to make Web pages that are optimized to load instantly on users’ mobile devices,” reads the AMP project page. “It is designed to support smart caching, predictable performance and modern, beautiful mobile content.”

Google boasts that a page created with AMP HTML can load anywhere from 15 to 85% faster than the non-AMP version of that page. How is that possible? AMP are served via Google’s CDN (Content Delivery Network), which means that users are connecting to a server that is close to their geographical location, which eliminates the possibility of network delays. Also, when users are on the search results page, the AMP are pre-fetched, which means that when users tap on them, the pages load faster than other links.

Here is how a Google Accelerated Mobile Pages result looks (left) versus the regular mobile version (right):

Source

AMP is primarily aimed at publishers and sites with lots of content like news, articles, blog posts. With this project, Google wants to help publishers deliver “lightning-speed” content to mobile users.

Why you should also use AMP even if you have a responsive website

Google’s search algorithm is designed to favour websites that provide a good user experience. But what does that mean exactly? It means a site that is mobile-friendly and loads fast.

Responsive sites are designed to help deliver content and display pages properly on any device, from a desktop computer to a mobile phone. So the focus here is on flexibility. However, responsive design often fails miserably on speed. AMP, on the other hand, focuses on speed and on delivering content instantly to the mobile user.

Another difference between AMP and responsive web design is that while AMP can work with an existing site, without having to do a complete site redesign, with responsive design the site owner needs to replace their existing site.

Now, another thing to consider is that AMP currently only works with static content so it’s best used for sites with news articles, blog posts and informational content while responsive design is better equipped for things like custom applications and web forms.

So while responsive design is the go-to method for web developers, speed is a limitation. And while AMP improves speed, it’s not the ideal solution for sites that rely on the functionality of web forms and custom JavaScript. So if you want to optimise the experience of mobile browsing for all users, it’s best to standardise a mobile version of your site with AMP as this will very likely provide a better user experience faster than anything else out there.

How will AMP impact organic and paid search?

AMP results appear as a carousel of swipeable images at the top of the search results, pushing organic results down, and even replacing paid ads. This shows the importance Google is putting on the AMP project. Also, since page speed is already a factor in Google results, faster pages will obviously get preference.

So the immediate impact for publishers that don’t opt into AMP will be a decrease in visibility in the search results, which will result in fewer impressions and clicks. Since organic results are pushed below the fold, and if you throw paid search ads into the mix, users will need to scroll way down to get to the traditional organic listings. This means that sites that want to stay competitive will need to opt into AMP.

When it comes to paid search, things aren’t quite clear. Since AMP focuses on content like news articles, blog posts and any other type of informational content, it’s likely that AMP will appear on general terms that will have fewer paid search advertisers on them. Google will need to work to weigh user intent and relevancy when its algorithms determine how and when the AMP module is displayed.

How does AMP work?

HTML includes elements that load quickly and others that load slowly. AMP aims to kill the slow parts, most notably JavaScript. Certain HTML tags are also banned: iframe, embed, object. Also, the main HTML5 multimedia tags, img, video, and audio, are replaced with custom elements amp-img, amp-video, and amp-audio. This guide on GitHub includes custom AMP tags and other tags that are prohibited.

CSS is also strictly limited in AMP HTML. Among the banned are the most common CSS properties used for animation. Also, while custom fonts are allowed, there are some constraints here as well.

You can embed things in an AMP page, but you’ll need to use pre-approved extensions like amp-youtube and amp-twitter. You also won’t be able to build interactive maps or data visualizations in AMP. So AMP makes sense for sites with articles, blog posts or journalistic content.

For more technical details on how AMP work, check out these two resources:

• What is AMP?
• How AMP speeds up performance

How to implement AMP on your website

Since this is an open source project, Google has made all the code available on GitHub. They’ve also provided a step-by-step tutorial that explains how to create a basic AMP HTML page, how to stage it and validate its AMP compliance.

For those using WordPress, there’s also an easy to install plugin that helps enable AMP on a WordPress website.

No matter your type of website or the CMS you’re using, make sure to go through Google’s guidelines for AMP pages to ensure they display properly in Google Search. Here are some key things that you need to do:

Follow the AMP specification

Reference the AMP version of a page by using this tag on the normal page:

<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />

Reference the normal page on your AMP page by using a canonical tag:

<'link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

Note: If your site doesn’t have any normal pages (Non-Amp) then on the AMP page you should use a self-referencing canonical tag:

<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />

Validate your AMP pages

There is an AMP validator that comes with the JS library. Read the AMP guide for more details.

Correctly implement structured data so your AMP pages can be shown within a carousel

This post from SEO Skeptic includes useful information on how to markup your articles for AMP pages. The Google Structured Data Testing Tool also includes a filter for “AMP Articles” that returns warnings and errors for non-compliant markup.

Here is an example of a markup provided on the AMP official website that you can use as a starting point:


<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="https://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<h1>Welcome to the mobile web</h1>
</body>
</html>


How to check if AMP is correctly implemented

Google has added a new report error within the Google Search Console for publishers deploying AMP. Google says “AMP error report gives an overview of the overall situation on your site, and then lets you drill down to specific error types and URLs… This process helps you quickly find the most common issues, so that you can systematically address them in your site’s AMP implementation (potentially just requiring tweaks in the templates or plugin used for these pages).”

You can access this report in the Google Search Console for webmasters.

In conclusion

AMP will not only improve site speed but it also has the potential to change content consumption behaviours for mobile users. There aren’t any major reasons why publishers shouldn’t opt into AMP. On the other side, if they choose not to, they’ll be missing out on a significant amount of traffic.

Implementation is simple and Google has already provided lots of useful tutorials and resources to make it easy for publisher to adopt and implement it.

What do you think about Google’s AMP project? Will you be adding it to your website?