What are the Accelerated Mobile Pages (AMP) and how do they work?

What are the Accelerated Mobile Pages (AMP) and how do they work?

AMP (Accelerated Mobile Pages) is an Open Source project launched by Google that begins at the end of 2015 in response to Facebook Instant Articles. It was born with the will to show pages with a very low loading time on mobile devices. To achieve this, what he proposes is to offer the most simplified version of the page. An adapted html language (amp html) is used and the resource load is limited. For example:

CSS: only those are online and weighing less than 50 kb can be used

Javascript: AMP only allows javascript to be loaded asynchronously and does not block the representation of the page

It is very easy to detect an AMP result in the SERPs; it is enough to detect those results with the lightning symbol when a search is made on a mobile device.

How AMP works

When SERPs detect AMP results, they are loaded quickly, since the execution of the AMP itself is performed directly on Google servers.

When Google detects a URL with a label that indicates that there is an AMP version, it tracks and validates that the standards are met. Below you can see an example of how Google is told that an AMP page exists.

If the standards are met, Google indicates that the URL has an AMP version. On the other hand, it saves a version of the page in its cache. Thus, when a user performs a search, the search engine loads the content from its own CDN server in a pre-render and when the user hits a hit in one of the results, it shows the content almost immediately.

AMP components

AMP pages are composed of three elements:

AMP HTML:

It is an adapted HTML code that, as we advanced, contains some limitations and particularities. These particularities translate into extensions of the code that include components such as AMP own tags. Below we can see an example of basic AMP HTML that includes what is strictly necessary:

The first thing that can get our attention is the html ϟ that is necessary to specify that it is an html amp code. AMP highlights the fact that tags and components are used different from the usual html.

Examples of tags: amp-img, amp-form, amp-video, amp-pixel, etc. We can find them all here.

It is important to note that AMP is not simply a series of labels that are added to your original HTML page, but it implies a new writing and layout.

AMP JS:

Thanks to the AMP JS library, fast loading of AMP HTML pages is achieved.

This library follows the recommended performance practices of AMP. These have certain limitations when it comes to managing the load of resources and offering those components and specific tags of AMP HTML that we have commented on in the first point.

In relation to the limitations we can highlight some points:

– AMP only allows asynchronous Javascript. Thus, the resources are loaded in parallel to the page’s HTML load, so that these resources do not block the representation of the page.

– The use of safe spaces when including the different elements of the page. That is, each element must have a predetermined space, since design re-calculations are not made once the different resources are loaded, so everything that is loaded must already have dimensions (a space) associated.

– Slow CSS selectors are disabled.

– Only one CSS in line with a weight less than 50kb is allowed. On the other hand, statements such as: !mportant are disabled.

AMP cache:

As we progressed, Google saves a version of the AMP pages in the cache and loads the content of the pages from its own server, when the search results are loaded. At this point, the pages are validated to ensure their operation and to ensure that their load does not depend on external resources that may block it.

AMP, just for news?

At the beginning it seems that the pages that have AMP are related to news, news carousel or editorial content. But AMP was created to be implemented in e-commerce. In fact there are early adopters of the project like eBay or Airbnb that show their results in this way:

What should we keep in mind when implementing MPAs?

In the case of Airbnb, the company took into account 4 factors when deciding whether to implement AMP and in which pages of its website. These factors were:

  • The impact of traffic (if AMP brings quality traffic or not)
  • Volatility of the page (constant changes / updates every X minutes)
  • The technical challenges that implementation may involve
  • The ownership of the page (if you have control over it or not)

Implement it throughout the website?

In pages that present technical challenges and are going to be updated very frequently, it may be inadvisable (in Airbnb they decided not to implement AMP in their Home page for that reason). What they decided to do was to test it in the search result pages of its interface, since it had a sufficient traffic source to detect a relevant change in case AMP was effective and the changes would not be as disruptive as in the Home.

It is important to set criteria and guidelines to follow. It is also convenient to test the operation in some pages or sections of the web before implementing it throughout the site (especially if the site is large).

We must create an MVP: Minimum viable product. When creating our MVP we must take into account several factors:

  • How AMP will behave in relation to the design of our website
  • How it will affect the workflow of the company’s developers
  • How AMP will affect the user experience (and the product)

How to detect and validate an AMP page

There are several ways to validate our AMP pages; here I will add the 3 main ones:

Console for developers: the AMP page is opened, “# development = 1” is added to the end of the URL and the console is opened (in mac: command + alt + J) to see the validation errors:

From the validator’s website: https://validator.ampproject.org/

Using the browser extension: during navigation, the page is automatically validated by displaying different colors depending on the state. (Here you will find the extension for Chrome)

We must bear in mind the importance of the performance of our websites on mobile devices. Taking into account that since 2016 more than half of the queries received by the main search engines come from these devices, it is crucial to optimize them to offer the user the best possible experience. For this reason, it is important to keep up to date on the latest news about AMP. Read us and do not miss anything!