Stop everything you are doing and implement Accelerated Mobile Pages

What we learned from implementing AMPs

This week's big development here at Smart Insights is the implementation of Accelerated Mobile Pages for our blog. If you are reading this on the standard HTML version (looks the same as normal) visit this post as an AMP to see what we have done.

Over the last year, we have published updates about how Google is implementing and utilising AMPs to improve everybody's mobile web experience.

A timeline of AMP

Let me recap the main developments of AMP:

December 2015

Google announced that it was seeing 16,000 new Accelerated Mobile Pages (AMPs) every single day. This was an impressive rate of adoption and showed the extent to which publisher wanted to attract audiences of mobile devices.

February 2016

Then in February we saw Google has started rolling out Accelerated mobile pages to certain mobile search results in the form of news snippets.

July 2016

During the DoubleClick Leadership Summit in July, they announced two new features to make ad experiences better on the mobile web:

- AMP for Ads allowing advertisers to build beautifully-designed ads.

- AMP Landing Pages: fast, custom pages, built by advertisers so that when someone clicks on their AMP ad, they continue to have an AMP experience. (Source)

August 2016

Trials that Google has been conducting have gone so well that they are expanding AMPs to the SERPs.  (Source)

What difference have we seen?

Taking a blog (HTML vs AMP) from this morning we ran a series of page load speed tests and the results were, to say the least outstanding.

The standard HTML page loaded in a range of 1.12s to 13.13s and the AMP page loaded significantly quicker with a speed range  of 0.75s-2.26s.

The results:

- Standard page averaged 6.43 seconds

- AMP page averaged 1.54 seconds

To put this in perspective I've visited 83 web pages (it's currently 10:39am). Assuming I visit web pages at that rate for 8 hours a day, if they all loaded 4.89 seconds faster over a year I would have an extra 131.6 hours to do anything I liked...probably wait for more web pages to load, to be honest, but you get the gist. AMP’s could save you five days of your life every year!

Considering how many of your site visitors and social followers are consuming your content on the move connected via frustratingly slow mobile internet (less than half of UK subscriptions are 4G) anything you can do to speed up the load speed of a page can only be a good thing for the user.

How will this affect your Google rankings, it is hard to tell in the long term we will keep you posted on the effects we are seeing over the coming months. Although Google has not said that a page being an AMP will be a ranking factor, Google has said that page load time is a ranking factor. Given how much faster AMPs are, they are likely to give your content a slight ranking boost. In addition, AMPs will appear with the nice little AMP logo at the start of the page description in their SERPs. That should mean more traffic from mobile users, especially if your competitors haven't implemented AMPs. This is because mobile users will quickly learn that the AMP logo will mean a quick loading page, and so will be more likely to click. 

Quick Tip: When implementing AMPs on your site don't forget to add the same canonical tag to both the HTML and AMP pages. We don't want the changes to have a negative effect on you SEO ranking due to duplicate content.

Implementing AMPs

If you are considering implementing AMP now they are appearing in SERPs, you’ll need to know how to go about setting them up for your site. Luckily this won’t be difficult. We asked our resident web designer Aaron to explain how to set up accelerated mobile pages for your own site.

'To make your existing web pages into "Accelerated Mobile Pages" doesn’t require too much work. You just need to include the required AMP script and convert some of your existing HTML markup in to AMP markup which is an extension of HTML and it works in all modern browsers

For example a standard HTML image tag might look like <img src=""> an AMP image tag looks like <amp-img src="”> 

• See an example of this on Github

For a detailed guide to implementing AMPs, see the AMP Project website.