Everything You Need To Know About Google’s Accelerated Mobile Pages in 5 Minutes

Browsing is about to get a lot faster.

The average website today is about the same size as the original version of the classic computer game Doom, weighing in at over 2.3MB. With all the images, pictures, videos, trackers and advertisements crammed into each page of the internet load times are becoming more onerous. As a result, publishers are losing their audience as their audience loses their patience.

As those visitors continue to move towards more mobile platforms distributors are scrambling to speed up those load times and improve the mobile content experience. To help combat the problem Google announced an open source solution in October 2015 called Accelerated Mobile Pages, or AMP, which became available to all publishers in February of 2016. Here’s how to get AMPed up.

The High Level Overview

The goal of the project, according to Google, is to improve load times while making content available anytime, anywhere on any device or platform. The company claims that webpages built with AMP load four times faster while using 10 times less data.

In order to do so, however, Google has had to reinvent HTML, or at least build its own, watered down version. AMP HTML severely limits the use of JavaScript, and images, graphics and videos often don’t load until they are in the users’ view.

Increased speed is also achieved by caching content in the cloud instead of on the publisher’s website. Content that is loaded via Google Search will be served directly through Google’s servers, however when users share AMP content they found via Google search it will appear with a Google domain, not the publishers’.

Advantages

First and foremost, publishing AMP articles means faster load times, and faster load times means less users becoming frustrated and abandoning pages before they load. In fact, sites that take five or more seconds to load see 10 per cent higher bounce rates than those that load faster. Quicker loading time also means better conversation rates, as each second of load time can drop conversion rates by 3.5 per cent.

A recent article published in Entrepreneur Magazine even speculates that advertisers will pay more to publish on platforms using AMP because of the faster load times, but that remains to be seen.

Ads and Analytics on AMP

While JavaScript is barely existent on AMP there are some loopholes designed to allow for ads, analytics and other forms of basic JavaScript.

Google has partnered with a number of pre-screened analytics providers and created a special analytics tag. The company has provided a detailed explanation on how to implement Adobe analytics in AMP pages, and what limitations exist. Other analytics partners include Chartbeat and Parse.ly. Instead of creating a separate script for each provider, however, analytics are handled by a single JavaScript file loaded directly from Google’s servers.

Ad networks are similarly vetted for speed, performance and security. Those who are yet to make the cut can use the <amp-iframeiframe> tag much in the same way they would have previously used <iframe>. This allows publishers to give the page some small pieces of JavaScript (hosted on the publisher’s website) but those elements will only load after the page’s core content.

IMAGE_FOR_AMP

Twitter is just one of the industry leaders supporting AMP

What You’ll Need to Get Started

In order to begin with Accelerated Mobile Pages publishers can copy the AMP HTML script and embed it into every page, or download the AMP app from your CMS. WordPress has also developed and released a plugin that supports AMP compatibility.

Publishing AMP Articles

There are still a few quirks that publishers will have to get used to in order to take advantage of AMP. For example, there are a variety of new, AMP-friendly HTML tags that publishers will need to use instead of more familiar ones, such as <amp-img> for images. Style elements have similarly been altered and limited in AMP articles. For example, AMP pages can only have a single embedded style sheet, and certain selectors are not permitted. AMP also requires all elements to have explicit size sets from the start.

To validate your AMP page, open the page in your browser, add #development=1 to the end of the URL and open the Chrome DevTools Console to check for validation errors.

Where Do AMPs Live?

Once your AMP content is live it will appear in the “Top Stories” section of Google’s mobile search results page (when relevant to the search term). Users can also easily swipe between AMP stories.

But creating AMP content doesn’t guarantee that all mobile users get to enjoy the new format. Only those that are opened via Google’s mobile search results, or via social media links that were lifted from Google’s mobile search results, will appear as AMP.

google-amp-project

The Broader Significance

On the mobile web speed is a necessity, not a luxury. Slow load times are a major user complaint and are one of the many reasons that people install ad blocking software. Fast loading, light webpages and apps become even more important when you consider that the next 1 Billion people coming online will start with the mobile web and have very limited network access. The movement towards lighter and faster loading pages is already underway, driven by Facebook’s Instant Articles, Apple News and even the Interactive Advertising Bureau’s LEAN (Light, Encrypted, AD choice supported, Non-invasive ads) initiative. AMP is simply a way for the world’s dominant search engine to help people get to the information they need, faster.

Get your Weekly Content Marketing Fix

Sign up to receive tips on storytelling and much more.
We promise to respect your inbox.