Ultimate Guide To AMP: Accelerated Mobile Pages

The mobile web grows larger and quicker with each new smartphone purchase. Now that users can browse on a number of devices the importance of speed has never been greater.

The Accelerated Mobile Pages(AMP) project was introduced to both improve website performance and reduce bounce rates. This is a win-win for publishers and visitors who just want a speedier performance without the hurdles of major restructuring on the backend.

It’s an open source initiative with a detailed focus on responsive web design coupled with the value of HTML schema markup. AMP is a daring initiative to help developers build more people-friendly websites.

I’ll be covering the fundamentals of AMP and how these new techniques can apply to modern web development. If you’re a content publisher with high bounce rates it might be worth considering AMP as a forward-looking solution.

Introduction To AMP

In recent years developers have solved speed issues with native applications. AMP is a quicker solution that hopefully lends credence to the bipartisan debate of websites vs native apps.

Accelerated Mobile Pages are still written in HTML but they use special elements to prioritize speed. Technical requirements are set by the AMP standards which are controlled by the AMP Project in conjunction with major tech players like Google.

AMP page elements include images, videos, and headers which are organized in a boilerplate fashion. Custom branding is part of AMP’s core message, but the user experience is meant to feel similar across all websites.

This is ultimately about making the mobile web a better and faster place. This will lead to better user experiences, more reader engagement, and a new paradigm for mobile web browsing.

Check out Google’s brief intro video to learn more about AMP’s history and future goals.

RevAMPing Your Mobile Experience

Major AMP improvements only require a few HTML tags and code snippets. Everything is outlined in the AMP GitHub repo with sample codes and step-by-step setup tips.

The first step is to add the AMP JavaScript file into your page header. There’s a live CDN version hosted on the AMP website, but it can also be hosted locally.

This is crucial for rendering page elements with a specific AMP-approved view style.

From there it’s about configuring the AMP boilerplate CSS and other required stats. Check out this formatting page on GitHub to learn more.

Most AMP pages still use the plaintext/HTML MIME type so there’s not much of a distinction. Instead content is loaded using a link tag in the header like so:

<link rel="amphtml" href="__MY_AMP_URL__">

I highly recommend skimming this guide to get introduced to the basics of core AMP setup. It’s a step-by-step approach written by the people who actually work on the AMP project.

AMP Components

Every accelerated page is built on components which are vital to the rendering and speed provided by Google. The list of major components can be found on GitHub. Here’s a brief rundown:

All of these components are accessible to every AMP page across the board. These fundamental components will be updated and appended with more features over time.

The real interesting stuff is found in AMP extensions which are both internally created and shared by 3rd party developers.

Custom extensions support features like carousels and lightboxes. This makes dynamic content a lot easier to access regardless of existing technology.

Keep in mind that AMP pages are built on top of HTML5 content. So you can(and should) use content markup tags for headers, blockquotes, and hyperlinks.

These AMP components are primarily used for dynamic content where the functionality is improved based on AMP’s underlying component library.

Custom Page Styling

CSS is still editable on AMP pages, although most publishers stick with a simple and relatively homogenous design.

On GitHub you’ll find a guide for HTML components which includes some default CSS code. This makes use of the <style amp-custom> tag to append CSS that may include a site’s logo or navigation bar.

All digital resources including images and videos need a width and height attribute to apply the proper aspect ratio. Content loads automatically once the user taps an AMP-powered link, so these specified dimensions prevent page jumps.

If you’re looking for more detailed customization please skim the styling pages documentation in the AMP GitHub repo.

Most designers add a custom logo to the header bar to differentiate their site from the rest. This is designed using some type of header bar or masthead with a custom amp-img tag.

Have a look at this Washington Post AMP page to see how it works in a real browser. You won’t get the full experience on a desktop, but you can examine the code and see how it functions in real-time.

washington post homepage

Page Validation

Once you’ve optimized a page(or entire website) to run AMP you’ll want to do a quick verification. This will confirm that all elements on the page are organized with proper syntax.

There’s a surprisingly easy way to debug AMP syntax right in your browser with Chrome DevTools. AMP’s JavaScript library includes validation so you can open the DevTools console and get live feedback right away.

amp chrome devtools validator

Note that it’s very important to have AMP pages that validate properly. The same goes for HTML5 and CSS too, except Google relies on proper AMP markup to load page content accurately.

The technology is still new so it’s a good idea to follow along accordingly.

If you encounter a peculiar error please check the AMP validation errors page for a complete list.

User Experience Improvements

Anyone browsing on a smartphone should immediately recognize the benefits of AMP. It’s still possible to visit live AMP pages on desktops, but you won’t get the full effect.

Every publication that supports AMP content can be found in Google. So if you’re on a smartphone and search Google for “nytimes” you’ll be presented with AMP-powered content.

nytimes amp search google links

Users can swipe left-to-right to move between pages. This replicates behavior found in native applications and gives the user a lightning-fast experience right in their mobile browser.

AMP was built to only load content above the fold at first. Once the user scrolls down, more content will load as it comes into view. This saves on bandwidth and creates a natural snappy experience.

Video content and other digital media is also optimized with AMP. The technology behind how this works is still evolving—especially in regards to HTML5 video. But even in this early stage it’s still clear that AMP-powered websites have an advantage over classic mobile layouts.

Publisher Monetization

Website publishers may find themselves questioning how ads will display on AMP. Since content is restyled in a roundabout way, ads may have trouble loading as well.

The AMP FAQ page has a monetization section that covers some basic information.

At its core AMP is made to support all formats. These are meant to be regular HTML5 pages that rely on JavaScript components to load faster. Ads are often the tortoise of latency and they can prove meticulously annoying.

While AMP can’t guarantee that all ad services will function properly, that is their ideal goal. Publishers should feel free to run whatever ads they choose and sell ad space however they wish.

Search Engine Watch has a brief post on this covering the top ideas that publishers need to consider for accelerated pages with advertising.

Either way it’s clear that AMP is a brilliant idea. Whether it flourishes or is ultimately replaced with a different spec is yet to be seen.

But for now it’s truly the best option for developers that want to improve time on page for their growing mobile traffic.

Free AMP Plugins

Aside from hard-coding your own AMP layouts, some developers have the option of implementing AMP-enhanced plugins. The largest free CMS WordPress already has a couple options to choose from.

First is the official AMP plugin made by WordPress’ parent company Automattic. This has 20,000+ installs and continues to grow rapidly with frequent updates.

wordpress amp plugin by automattic

An alternative plugin made by 3rd party developers also has fairly high ratings but only counts about 600 users. Either way WordPress as a system is moving towards AMP with arms wide open. For 25% of the web this is a very good thing.

Drupal users will also be happy with a D8-compatible AMP module produced by the Drupal team. So far it only supports node pages but it’s still in active development, much like the AMP project itself.

Other than these two CMS’ I’m unable to find any other extensions or plugins(for now). At the time of this writing I can find forum threads discussing a Joomla! extension and a Shopify extension, but nothing has been confirmed either way.

eCommerce is tricky because it makes more sense to list AMP-powered products individually rather than entire shopping categories. For now it seems AMP is most beneficial to blogs and publishers with multiple pages of relevant content.

But developers are constantly adding new components, and I assume over time the goal is to power a large portion of the mobile web through this technology.

Further Reading

The AMP project is still new and it’s difficult to find real depth. However it’s catching on quickly and if you have the time to setup a plugin you’ll quickly notice the benefits.

Others may want to write custom AMP code into their HTML, but it’s worth reading a few guides to see what options are at your disposal. These related posts should keep you moving down the winding road of AMP web development.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.