What are Accelerated Mobile Pages (AMP) and Why Should You Care?

Reading Time: 5 minutes

What-is-Google-AMP-Facebook

Over the last few months, a number of our clients have been asking us ‘What is AMP?’ The Accelerated Mobile Pages (AMP) Project is an open source project that attempts to make mobile pages load more quickly by boiling a web page down to its most essential elements.

It uses a form of stripped down code called AMP HTML that allows static content (content on a page that does not require user input) to load blazingly-fast on mobile devices.

google amp project exampleThe whole platform is built for pure speed.

AMP is a Google-led project, which means that Google is has been pushing for this quite aggressively over the last few months. You need to pay attention if you or your company is involved in search engine optimisation because, as you probably know by know, Google will either give bonuses to you for following its initiatives or punish you for not.

We believe that Google is doing this in response to Facebook’s Instant Articles. While Facebook’s Instant Articles is a closed platform – it can only be used on Facebook – Google uses an open-sourced platform which means that other developers can build on it.

We also believe that this is one of the ways Google is trying to discourage people from using ad blockers. With Adobe claiming that US$21.8 billion in global ad revenue will be blocked in 2016, this is a serious problem for ad platforms such as Google.

Ads tend to slow down the loading of mobile pages, sometimes to the extent that they are unusable on mobile devices. Users react to this by installing ad blockers. By ensuring that mobile pages load quickly, even with ads, Google mitigates a major incentive for installing ad blockers.

Importance of the Mobile Web

In 2015, Google announced that there were more searches on mobile than there were on desktop.

According to Google Malaysia’s managing director, Sajith Siyanandan, 49% more Malaysians access the Internet more on their smartphones than on desktops or laptops. Additionally, 35% of Malaysians access the Internet almost exclusively on their smartphones.

This trend is more pronounced in Singapore. Singapore has a smartphone penetration rate of 85%, which is the highest in the world. 60% of Singaporeans also prefer to conduct searches via their smartphones than by desktops.

If you’re executing SEO campaigns in either Singapore or Malaysia, then ensuring that you comply with the latest Google’s recommendations or initiatives will only help your case in that perpetual search for higher SERP rankings.

On the ground level, we have also been quite impressed by the growth of the mobile web. Some industries, such as events, would do well to adopt a mobile-first perspective as we see conversions on mobile to be up to 90% compared to those on desktop.

Technical Elements of AMP

There are three different parts to AMP:

  1. AMP HTML
  2. AMP JS
  3. Google AMP Cache

AMP HTML

AMP HTML is the name of the stripped down HTML code that serves AMP pages. There are some restrictions to what you can do with AMP HTML compared to regular HTML. It replaces several HTML tags with AMP-specific tags.

AMP JS

The AMP Project has also released the AMP JS Library. This helps with the implementation of all of AMP’s best performance practices, manages how resources are loaded and allows you to use the custom AMP HTML tags.

A major feature is that it forces all JavaScript (JS) to load asynchronously. Usually, a browser will load JS one after another depending on their placement on a page (code that appears higher on the page will be loaded first). The browser will only load the next piece of code once the previous one has finished rendering. This may make your page load much more slowly because if one script takes longer to load, then it will prevent the others from loading.

By loading them asynchronously, all JS is rendered at the same time, ensuring that there are no bottlenecks.

It also has other performance improvements, such as removing slow-loading CSS selectors and sandboxing all iframes. All these is to ensure that your pages load in an instant. You can read more about the performance advantages of AMP here.

Google AMP Cache

Google’s AMP cache is a content delivery network that will cache and serve all AMP-optimised pages.

A web cache operates between your browser and web server. Caching makes websites load faster by saving and serving common elements (such as photos) without having to request it from your web server.

Examples of AMP in Use

AMP pages are implemented in addition to your regular web pages which means that you still have to publish articles as how you do now. You let Google know about your AMP pages by implementing canonical code in the HEAD section of your website.

A recent Whiteboard Friday episode highlighted the relationship between regular HTML pages and AMP pages below:

how amp works

CloudRock has implemented AMP for our library articles and you can see the difference below:

pages with and without AMP

You can view the live versions of the non-AMP post and AMP post by clicking on those links.

Limitations of AMP

There are several trade-offs to implementing Accelerated Mobile Pages to make your mobile pages load faster. Below is a non-exhaustive list:

  • You can only use the JavaScript within the AMP library
  • It uses lazy load functionality to load images, which means that they will only load when you scroll to them
  • Your CSS will have to be pared down, affecting how your website looks
  • There isn’t any input elements of any kind, including the standard INPUT and TEXTAREA used for forms

Why Should I Care About Accelerated Mobile Pages?

Since February 2016, AMP articles have been promoted near the very top of mobile search results, increasing its visibility and thus pageviews. You can see an example below:

amp articles in search results

When you perform a search query and a site has an AMP version of its page available, it will be shown in a carousel above regular organic search results with a small lightning bolt next to it.

This preferred placement is especially important for online publishers.

While this is an interesting move by Google to ensure a smoother experience for the mobile web, it does make an online publisher’s life more complicated. You now have a additional pages that you need to optimise for.

The promise used to be that you create one website that is viewable on all devices. The reality is now quite different. You now have to create a responsive page, another for Google’s AMP and yet another for Facebook’s Instant Articles.