Accelerated Mobile Pages (AMP) is an Open Source project started by Google in 2015 with the purpose of improving website load speeds. Its central idea is that content should take priority when serving a web page to mobile.
The speed boosts it brings are often dramatic and its usage is rapidly expanding, especially amongst news and e-commerce sites.
Notable examples are eBay, Wired and The Washington Post, amongst many others. The Chinese e-commerce site AliExpress, for example, has reported a 40% improvement in content load speed in comparison to their traditional mobile website.
How it works
AMP is a Javascript library that provides a special set of HTML components, extension JS scripts and cache. JSON can also be used for dynamic content and Structured Data.
There are a few rules you must keep in mind:
- The AMP page must be explicitly declared and its canonical specified, regardless of whether this is itself or a traditional webpage.
- Javascript is not allowed, other than the scripts bundled with the AMP library.
- No external stylesheets are allowed. All CSS must be typed directly inside <head> and be of no more than 50Kb in size.
- Images, embeds and iframes must explicitly declare their dimensions.
- It is highly encouraged that you validate all AMP pages before publishing them.
The structure of an AMP page
Let's see how that would translate on a basic website example (we will assume the URL of this example file is https://your-domain-name.com/amp/index.html):
<!doctype html>
<html amp lang="en">
<head>
<link rel="canonical" href="https://your-domain-name.com/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta charset="UTF-8">
<style amp-boilerplate>
//Please refer to https://www.ampproject.org/docs/reference/spec/amp-boilerplate for full version.
</style>
<script async src="https://cdn.ampproject.or/v0.js"></script>
<style amp-custom>
//the minified CSS stylesheet for this page goes here.
</style>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js></script>
</head>
<body>
<a class="screen-reader-text" href="#content">Skip to content</a>
<button on="tap:main-navigation.open" class="menu-toggle pull-right" aria-controls="main-navigation" aria-expanded="false">MENU</button>
<amp-sidebar id="main-navigation" layout="nodisplay" side="left">
<ul id="main-menu" class="menu" aria-expanded="false">
<li class="menu-item active"><a href="https://your-domain-name.com/amp/index.html">Home</a></li>
<li class="menu-item"><a href="https://your-domain-name.com/amp/about-us.html">About Us</a></li>
</ul>
</amp-sidebar>
<header>
<h1>My AMP example page</h1>
</header>
<main id="content" role="main">
<p>We can have here the usual mix of text and graphic elements that you normally find in webspages. Some, like images, will need special HTML tags as seen below:</p>
<amp-img src="assets/img/image1.jpg" alt="image alt description" width="185" height="164" layout="fixed"></amp-img>
<p>Please note that we use tag attributes to explicitly indicate the image's width, height and coverage. this space will be allocated to the image before the image is loaded.</p>
</main>
</body>
</html>First of all,
<html amp>
<html ⚡>
What goes in the head tag
Then, the first line in
<head>
https://your-domain-name.com/index.html is the canonical of the current page.
Inside the
index.html we would have the corresponding link connecting it to its amp version: <link rel="amphtml" href="https://your-domain-name.com/amp/index.html">
Further along, still
<head>
<style amp-boilerplate>...</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
After that, the CSS styling of our page goes inside
<style amp-custom>
!important
Finally, we end the <head> tag by loading the sidebar extension component as it is not part of the core file and the example needs it for its navigation menu.
What goes in the body tag
You will notice a mixture of traditional HTML and AMPHTML in the <body> tag. If a tag exists in both, the latter must be used.
In the example file, we have two AMPHTML tags: amp-sidebar and amp-img. Notice that both components have opening and closing tags, even when their HTML equivalent doesn't.
<amp-img src="assets/img/image1.jpg" alt="Image ALT description" height="185" width="164" layout="fixed"></amp-img>Images must specify their height and width.
In this example, we also include
layout
fixed
fixed-height
responsive
fill
Progressive enhancement best practices can also be used.
Remember to always validate your code before publishing it.
To validate your code, just open the page in Google Chrome,
#development=1
Pros and Cons of AMP
Because of the restrictions over adding external JS scripts or CSS stylesheets, you may find you need a feature that is not yet available in AMP. So, in practice, you will most likely need to have two versions of the same webpage, one written in
A lot of what you have read will initially sound counter-intuitive and even look like a backward step, especially given the Do not Repeat Yourself (DRY) programming best practices and the separation of concerns we have all grown used to.
At least for the moment… Malte Ubl, from Google, announced at the AMP Conference 2018 that they have started investigating the option of allowing JavaScript in the future.
-
AMP Conf 2018 announcement – JS with AMP experiment… -
… and aiming to make it framework agnostic.
In any case, the improvements for large sites are there for all to see and new AMP components come out all the time. In fact, you could even write your own and submit them to the AMP project. It is Open Source afterall!
So if you need something that is not there yet, all you need to do is open an issue on the project's Github to have it considered.
If the predictions are right, it won't be long until we start seeing a growing number of AMP-only sites.
Find out more
You can find out more here: AMP Project, AMP by example and the AMP YouTube channel.
In the next few weeks, I will publish more articles about this topic, specifically about making the site even faster with Cache and on how to use AMP
Stay tuned!