Get AMP-ed: Accelerated Mobile Pages and why you need them

You may have seen the term 'AMP' floating around the web over the last year but, being an open-source project, it needs a bit of explaining before it's applicable. AMP stands for Accelerated Mobile Pages, Google's framework for improving the performance of the mobile web. It's designed to allow sites to increase the speed at which a mobile page loads without sacrificing ads. These open technical standards ultimately lead to a better user experience for your audience and higher traffic for your mobile site.

AMPs load four times faster and use a tenth of the data of traditional mobile pages, just by added some specific code. AMP is a modification for mostly content pages, where sites see the most reduced traffic due to optimization problems. It doesn't support parts of your site like landing pages or e-commerce pages but Google looks to develop AMP into a full platform in the future. Best for blogs and articles, AMP will keep those sites loading faster, prevent ad-blocking, and boost their ranking in search results.

Backstory

Mobile web usage has been lagging behind mobile apps for quite some time because they tend to be less cluttered and perform faster. Web page ads, like AdSense, have previously had a habit of not translating well to mobile, especially when the web page is responsive (one site that can be optimized to display at different sizes). It makes for a clunky experience for mobile users, drastically driving down ad traffic and engagement.

Before AMP, it would have taken an experienced web developer to improve these kinds of problems. The resources were few and far between and complicated to put into practice. AMP has streamlined optimization without altering the site drastically. At a year old, AMP is currently utilized by big-name tech companies and Google, of course. It has been driven by support from prominent web companies, who encourage its use across multiple platforms.

AMP is also an answer to widespread ad-blocking. While fairly common on the web, mobile ad-blocking is just ramping up and doesn't look like it will slow down. Some mobile networks are even proposing network-wide ad-blocking. On AMPs, there are no bad ad experiences because the ads can't 'jump off the page.' AMP ads stay in place, are optimized for mobile, and help publishers monetize their site even with prominent ad-blockers. Mobile users are looking for ways to improve browsing speeds and ad-blockers have been one of the only answers to that problem. Until AMP.

The most popular ad networks are already compatible with AMP, including Amazon A9, Google AdSense, AOL AdTech, Taboola, Adform, AdReactor, Smart AdServer, and more. There's even AMP documentation supporting more complex site monetization, like paywalls and subscriptions.

Implementation

The AMP framework has three basic components: AMP HTML, AMP JavaScript, and an AMP Content Delivery Network. The AMP HTML markup language has custom tags that anyone with a rudimentary knowledge of HTML can implement. The markup boilerplate is available here. It includes a basic HTML page that you can use to alter your existing HTML and a list of the required markup tags. The official AMP Project site has a straightforward step-by-step guide you can use to integrate AMP markup into your site, as well as some other great AMP resources from Google.

The AMP JavaScript (JS) framework isn't necessary unless you currently use third party JS, which isn't permitted with AMP. Third party JS elements can include lead forms or on-page comments, which isn't supported by AMP JS. If these elements are essential to your site, not to worry, there's a slightly complex hack for including capture forms here.

AMP does have some restrictions, such as requiring you to essentially back-up each page of your site to include an AMP version. It also has limitations in the form of reduced element options, tag restrictions, and capped CSS size (less than 50KB). But since AMP is in its infancy and you're potentially becoming an early adopter, look for constant updates that will improve and simplify the process. Lastly, in addition to the AMP versions of your site pages, the original pages must include a single line of code that tells Google you have an AMP version of that page.

If it all seems a bit overwhelming, don't worry, plugins are being developed for a number of platforms and when they emerge, you'll already have the information you need to use them.

Why You Need It

In addition to creating a better mobile experience for your audience and keeping ads on your content pages, Google boosts AMPs on their Top Stories mobile search results. Faster load time and page speed also factor into rankings, so while AMPs aren't boosted in Google's main web search results (yet), AMPs see higher rankings than their non-AMP counterparts. If you want to take it for a spin, check out g.co/ampdemo on your mobile phone (or an emulator) and do a simple search. You'll see a carousel of Top Stories at the top of the results—those are all AMP articles.

If your site publishes content, Accelerated Mobile Pages are the way to go. A bit of work upfront can drastically increase page loading speeds, user experience, ad revenue, and site rankings. Check out www.ampproject.org to learn more, get started, or stay on top of the latest AMP news.