Beginner’s Guide to Accelerated Mobile Pages (AMP)

By Anna Monus. in Coding. Updated on August 23, 2022.

Accelerated Mobile Pages is Google’s initiative that intends to solve the biggest problem of the mobile web – speed. The awesome user experiences we’re designing with great care are painfully slow on mobile.

Slowness is not solely a UX problem, but also reduces conversion rates, and harms accessibility by excluding users with slower internet connections. AMP is a team effort launched with the goal to allow publishers to create mobile optimized content once, and have it load instantly everywhere.

Since the launch, many publishers such as the BBC, The Economist, Guardian News, and the Financial Times have implemented the initiative, so by now, we can safely assume AMP is an innovation that’s worth considering for everyone who wants to stay competitive on the mobile web.

Top 10 Essential AMP Components for Mobile Optimization

Accelerated Mobile Pages or AMP is Google's initiative to make the mobile web faster. To achieve this goal,... Read more

AMP in Action

Before diving into the details, here’s the AMP demo, so you can see it in action. The demo can be accessed on this link.

To see AMP in action, you need to do two things:

View the demo either on a mobile device, or on a mobile simulator, e.g. Chrome DevTools’ Mobile Device Simulator.
Run a search query on the search bar. As Google AMP currently works mainly with a news site, the best choice is a fresh news story.

On the screenshot below, you can see what I got when I used the search term rio olympics.

As you can see, AMP pages appear as Google Rich Cards, a mobile-optimized image carousel, that Google released in May 2016.

Notice how Google differentiates AMP pages from other mobile-optimized pages by using 2 different labels: AMP and Mobile-friendly. It’s also worth clicking on some of the results to see how an AMP web page looks like, and how fast it runs on mobile.

Technical Background

AMP is a web standard built on existing web technologies, and focusing on static content. It has 3 different parts:

AMP HTML: modified HTML with (1) the restriction of certain regular HTML/CSS features and (2) the introduction of new custom tags (Components)
AMP JS: enforces best practices in order to decrease page load time
AMP CDN: a cache with a built-in validation system, that further optimizes your site

If you want to know more on the technical background of AMP pages, check out the video below in which Google’s Paul Bakaus gives an introductory talk on AMP.

If you want to dive deeper, it’s also worth understanding what optimization techniques AMP uses to speed up performance on mobile. In the video below, Malte Ubl, the lead of AMP Engineering explains the anatomy of AMP in detail.

AMP HTML

Accelerated Mobile Pages are regular HTML pages that need to follow a set of rules in order to make pages load faster and render with reliable performance.

Let’s have a look at the most important things you need to know about it. You can also take a look at the full AMP HTML specification.

Decide If You Want a Separate AMP Page

For the same static content page, you can have 2 separate versions – one for the AMP and one for the non-AMP version. You can also choose to have only one version – the AMP page, and use it everywhere. Concerning browser support, AMP’s Github page claims:

In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers.

If you’re still worried about browser support, check out the post of Google’s Paul Irish on Stackoverflow.

In case you want to have two pages (AMP and non-AMP), you need to link to each of them in order to inform search engines about the existence of the two versions.

Add the following code to the <head> section of the non-AMP page:

<link rel="amphtml" href="amp-version.html">

Also add the following line to the <head> section of the AMP page:

<link rel="canonical" href="non-amp-version.html">

If you only have one AMP page, you still need to link it from itself in the following way:

<link rel="canonical" href="amp-version.html">

Starting Boilerplate

AMP Project offers different starting boilerplates you can use to get started. Have a look at the simplest AMP HTML boilerplate below:

<!doctype html>
<html amp lang="en">
 <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>

You can see that the boilerplate links the regular HTML page by using the <link rel="canonical"> tag. The <script> tag adds the AMP JS library.

The <style amp-boilerplate> and the <noscript> tags (in the same line as <style>) are used by the AMP validator so don’t forget to include them.

You can also find these two tags separately on Github as the AMP Boilerplate Code – the docs warn users not to change the code inside these two tags as the AMP Validator uses regular expressions (regex).

You can find a more advanced AMP HTML boilerplate on the official AMP site, besides the required elements it also contains schema.org markup in JSON-LD format – adding rich data is necessary if you want your content to appear in Google Rich Cards.

Boost Your Search Results with Schema.org and Rich Snippets

Structured data makes it possible to present your search results in a more visually appealing and informative way.... Read more

Check out the required markup every AMP HTML document must follow on Github. AMP Project also has a great step-by-step guide that helps you create your first AMP Page.

AMP HTML Tags

In order to increase speed, the AMP specification restricts how you can use HTML. HTML tags can be divided into 3 groups:

HTML tags that can be used unchanged, they can be found in the whitelist of the AMP HTML Tag Addendum.
Prohibited HTML tags, such as <embed> and <object>, they can be found on this broader list.
HTML tags that have equivalent AMP-specific tags, such as <amp-img> and <amp-video>, are also called AMP Components – they make it possible to implement common patterns in a resource-savvy way. (We’ll get back to them later, until then check out this list on Github.)

Style Your AMP HTML Pages

On AMP pages, you cannot use external stylesheets, you need to add your custom styles as an inline stylesheet in the <head> section in the following way:

<style amp-custom>
	h1 {
		color: #333;
	}
	// other custom styles
</style>

You can only have one embedded stylesheet, and there are also many disallowed style rules, for instance you cannot use the !important qualifier, the @import rule, and pseudo-classes.

Don’t forget to check the stylesheet restrictions before starting to write CSS for your AMP pages.

There’s another thing that’s important to know about AMP style rules: you cannot use any layout you want – as it’s one of AMP’s principles to allow the browser to calculate the space of each element on the page in advance.

Take a look at the supported and non-supported layouts.

AMP JS

AMP documents can include neither any author-written, nor any third-party JavaScripts, however this doesn’t mean that Accelerated Mobile Pages don’t use JavaScript at all. AMP’s JavaScript library (the AMP runtime) is responsible for loading and rendering AMP pages fast by enforcing best performance practices.

AMP Components

AMP Components are defined by the AMP runtime. They are the aforementioned AMP-specific HTML tags you need to use instead of their regular counterpart, such as <amp-img> instead of the <img> tag.

Each AMP Component contains a particular external resource (an image, a video, an embed, etc.). External resources are prone to slow down websites. The main goal of this solution is to manage the loading of external resources in a reasonable way by running them inside sandboxes.

AMP provides you with 2 kinds of Components:

Built-In Components: they’re always available in every AMP document, they are built right in to the AMP runtime. Currently there are five of them:
1. <amp-ad> for showing ads
2. <amp-img> for images, it’s used instead of the <img> tag
3. <amp-pixel> for tracking pixels (used for counting page views)
4. <amp-video> for direct HTML5 video file embeds, replaces the <video> tag
5. <amp-embed> for embedded elements (can be used instead of <amp-ad> in certain cases)
Extended Components: Additional components, you must explicitly include them into your AMP document. There are many useful ones, such as <amp-accordion> and <amp-lightbox>, see the full list. Many of them can be used to embed content from third party services, such as from Twitter or Instagram.

Note that all externally loaded resources, such as <amp-img> and <amp-video> must have a known <height> and <width> attribute in order to enable the browser to calculate the layout in advance.

AMP CDN

The AMP CDN is basically a cache, called the Google AMP Cache. It fetches valid AMP documents, caches and loads them. AMP CDN also has a built-in validation system.

It’s worth testing your AMP pages before letting them go online in order to safely pass the validator. You can do it in many different ways.

Source: AMP Project

It’s good to know that the AMP CDN uses the HTTP/2 protocol in order to achieve the best possible performance.

AMP Tools

There are some great tools that can help you implement Accelerated Mobile Pages, let’s have a look at some of them.

Google provides webmasters with a handy AMP status report tool that shows a count of successfully indexed AMP pages, and AMP-related errors as well.

Lullabot’s AMP PHP Library allows you to convert your HTML pages to AMP HTML, and also reports the compliance of any HTML document with the AMP standards.

If you want to use AMP on your WordPress site, read Yoast’s tutorial on how to set up WordPress for AMP, and how AMP works with the Yoast SEO plugin.

You can also check out Automattic’s AMP plugin that allows you to enable Accelerated Mobile Pages on your WordPress site.

IMAGE: WordPress.org

Further Considerations

If you are still not convinced, take a look at the video about a quick speed test below.

Jonathan Abrams, the founder of the Nuzzel makes even better claims, as he asserts that even mobile-optimized sites like the New York Times load significantly faster – instead of taking three seconds to load the average page, a page loads in less than half a second when Google’s Accelerated Mobile Pages is enabled.

You can also read an interesting article in Verge about the competition of Google AMP and Facebook’s Instant Articles. If you are still looking for an answer for "what’s the catch?", check out Yoast’s post which mentions fears that AMP is basically bringing us back to an internet time before 2000, and questions whether it is really an open standard.

If you don’t want to ruminate too much, just want to jump into coding at once, the Learn AMP by Example site is a good start.