Almost a year after Google’s mobile friendly update which highlighted websites with ‘Mobile Friendly’ tags, Google has taken its next step in its goal of speeding up the mobile web with their Accelerated Mobile Pages (“AMP”) project.
The project is an open source, Google-led initiative which came from discussions between major digital publishers and technology companies about the need to improve the mobile web experience for the masses. With 40% of visitors abandoning a webpage if it hasn’t loaded within three seconds, AMP pages have been introduced to tackle the high abandonment rate and slow load times on mobile devices. The pages can load instantaneously, offering “a lightning-fast reading experience for top stories”. AMP pages boast a load speed of four times faster than an equivalent non-accelerated mobile page and use 10 times less data over 3G & 4G networks. That all sounds pretty impressive, but is there a catch?
So how does the AMP framework help pages load so fast?
Accelerated Mobile Pages are built just like any other HTML pages, but with a pre-determined set of technical functionality which is managed by the open source AMP specification. This enables the pages to take full advantage of the AMP JavaScript Library, which will ultimately control the entire load chain and prioritise certain elements and requests over others. Most third-party content (such as adverts) and elements below the fold are loaded after the main content arrives, allowing visitors to read content as soon as possible.
In addition, AMP pages can be cached in the cloud to further reduce the time it takes to load the content for a visitor. By utilising the AMP JavaScript Library, publishers allow their content to be cached by third parties, which allows publishers to control their content, but platforms can use the cache to deliver the page as quickly as possible to the visitor. Google has confirmed that they will provide a cache which can be used by anyone at no cost.
| Regular Page | AMP Page | Difference | |
| Load Time (First View) | 3.8s | 1.4s | -2.4s |
| Load Time (Repeat View) | 1.7s | 0.2s | -1.5s |
| Requests | 76 | 11 | -65 |
| Page Size | 1.4mb | 243kb | -1.15mb |
| Google Page Speed Score | 35/100 | 88/100 | +53 |
| User Experience | 95/100 | 100/100 | +5 |
(Pages Compared http://www.bbc.co.uk/news/technology-35841571 vs http://www.bbc.co.uk/news/amp/35841571)
AMP HTML
AMP HTML is basically a subset of HTML, extending regular HTML with AMP properties. However there are strict requirements as to what AMP HTML pages must contain. The below example shows the code of a very simplified AMP page. There are some key differences to note within the code, such as the html-amp, style amp-boilerplate, and amp-img tags.
<html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img> </body> </html>
AMP within Google Search
Over the last 4 weeks you may have noticed while searching for a story or topic on Google from your mobile device, within the ‘Top Stories’ carousel a AMP logo with a lightning bolt appearing under the headlines. This indicates to the visitor that the page is an accelerated mobile page and should load lightning-fast. Once a visitor clicks on a news story they are then able to quickly swipe between the various publishers to read related stories. Many of the top news publications are utilising AMP pages such as The Guardian, BBC and The Independent.
However there is one downside to publishers appearing within the ‘Top Stories’ carousel, if visitors choose to share an AMP link that they have clicked on through the carousel, the link points to Google.co.uk not your own website.
This effectively means that Google is gathering large amounts of content on its own servers and by doing so, keeping the visitors on Google rather than the publishers’ website. Google has confirmed that there is no way to have your accelerated mobile page appear within the top stories carousel unless the content has been hosted on Google’s AMP cache servers. This results in publisher’s content appearing across multiple URLs. To mitigate any duplication issues it is essential that a canonical tag is used. The AMP page must canonicalise to the desktop URL, which will also be reflective on Googles Cache URL.
AMP beyond the publishers
Google are clearly putting an increased emphasis on mobile friendly websites, particularly over the last 12 months, with updates such as Mobilegeddon, Mobile Friendly Tag and the most recent announcement of increasing the ranking signal for mobile-friendly pages in May this year. Our Roadmap tool, which analyses over 200 ranking signals, also shows a large correlation of page speed and ranking position, which evidences Google preferring fast, mobile friendly websites.
Currently AMP pages are only listed within the ‘Top Stories’ carousel, however it will only be a matter of time before we see AMP pages rolled out within the ordinary organic SERPS as Google continues their drive to speed up mobile search for the masses. The challenge for brands is to ensure that they are in position to capitalise on this change when it ultimately does arrive in their SERP market.
