Accelerated Mobile Pages For WordPress (with examples) – The Why & How of Google’s AMP

The Why of Accelerated Mobile Pages

Recently, Google unveiled their Accelerated Mobile Pages project (also dubbed AMP). The project aims to make the mobile web faster by creating a less-flashy, less-cluttered way to view content on your phone, potentially competing with Apple News and Facebook’s Instant Articles.

To see an example of an AMP-Enabled search,  click here to search Google for “mars” (this will only work on your mobile device).

Mobile’s Explosive Growth

In the past few years, many websites have seen a surge in mobile traffic – with many predicting that 2015 would be the year that smartphone usage overtakes desktops. To accommodate this change in usage, many websites and web developers create responsive websites – sites that will display appropriately for any device such as a desktop, tablet, or phone.

Mobile’s Achilles Heel

The issue is that many times full-featured websites can run slowly on phones. Things such as larger graphics, complex scripts, and even ads are meant for a rich user experience on a desktop and can make the same pages feel sluggish on a phone. That’s one of the goals of Accelerated Mobile Pages – to improve the speed and user experience for content.

Why AMP Is Different Than Responsive…

AMP is hoping to achieve this promised speed increase by limiting the tools a developer can use to display content. AMP guidelines include

• no form fields
• no external javascript
• no external stylesheets
• no inline styles
• everything must adhere to limits for file size

…But Not As Different As Apple News Or Facebook’s Instant Articles

Some speculate that this is Google’s entrance into an arena that Apple News and Facebook’s Instant Articles created. Google is hoping that the open-source and community-focused project will gain traction. It’s clear that many publishers and web developers need to keep up with several schemas to publish content, but so far AMP seems straightforward to implement.

AMP For WordPress – Code And Examples

We took a look at many ways to set up AMP, and we’ve found the plugin provided by WordPress is the fastest and easiest way to implement Accelerated Mobile Pages. Your needs may require some customization to make this work.

1. Download the official WordPress plugin

   The official WordPress AMP plugin is hosted on Github. Download the plugin to your computers.

2. Upload And Install Plugin Via The WordPress Admin

   Once inside the admin, locate Plugins from the left side menu and then choose “Add New” from the Plugins header.
   
   Upload The Plugin
   
   Select File and Upload
   

3. Activate Plugin

   

Testing AMP On Your WordPress Site

By taking a peek into the source code you will notice you now have a link in the head directing crawlers to your “amphtml” version of the page.

Now your AMP Version of your site should look similar to this. You can find this by opening your site and add a trailing “/amp/” to any URL. For example, http://redclayinteractive.com/blogging-from-the-bottom/ will become http://redclayinteractive.com/blogging-from-the-bottom/amp/

Customizing AMP For WordPress

Customization of the template is common and likely necessary to match your branding. The template.php file in the AMP plugin folder contains the contents of the new template, and modifications can be made there. Of course, create a backup of your file as future plugin upgrades are likely to overwrite your template modifications.

Summary

Creating a third, competing but open standard for content delivery may cater to publishers. It’s clear that Google is serious about speeding up the mobile web, and protecting its ad revenue base.