Beginner’s Guide to Accelerated Mobile Pages (AMP)
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.
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.
Google Rich Cards – Enhance Your Search Results for Higher CTR and Conversions
Google Rich cards was launched on 17th of May 2016 through a new markup format which is capable…Read more
Notice how Google differenciates 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.
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.
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 usersnot to change the code inside these two tags as the AMP Validator uses regular expressions (regex).
A regular expression is a set of characters forming a pattern that can be searched in a string.…Read more
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.
Check out the required markup every AMP HTML document must followon 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:
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.
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:
<amp-img> for images, it’s used instead of the <img> tag
<amp-pixel> for tracking pixels (used for counting page views)
<amp-video> for direct HTML5 video file embeds, replaces the <video> tag
<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.
You can also check out Automattic’s AMP plugin that allows you to enable Accelerated Mobile Pages on your WordPress site.
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.