Getting Started With Accelerated Mobile Pages (AMP)

Google is in the process of launching accelerated mobile pages site wide for their mobile search results, let’s take a look at how accelerated mobile pages can benefit your business and create a better user experience for mobile devices.

 

What is an Accelerated Mobile Page?

Google announced Accelerated Mobile Pages (AMP) in late 2015, an open-source project intended to enable publishers to easily improve website load times ultimately leading to a more positive user experience for mobile users without compromising any ad revenue.

Even though an experienced web developer can typically achieve similar performance results through in testing and optimizing, this process is commonly neglected due to time or other constraints. AMP enables these optimizations to be easily implemented without any significant alteration to the mobile web experience.

AMP is in essence a blueprint for creating mobile webpages which consists of three main parts:

 

AMP HTML:

A markup language with some additional customs tags & properties along with some tighter restrictions. If you’re already fluent in regular html, picking up AMP HTML you should have no trouble configuring existing pages using it.

 

AMP JS:

A framework for the JavaScript of mobile pages. It’s primarily used for resource management and does not allow the use of 3rd party JavaScript.

 

AMP CDN:

A Content Delivery Network which is optional, it allows you to take an AMP enabled page, cache the page and automatically apply some performance adjustments.

 

How To Implement AMP On Your Site

To start, you will need to have a copy of two versions for every article page, the original article page that the average user will see along with an AMP version.

AMP does not allow things like 3rd party JavaScript or form elements so you will likely have issues using on page comments, lead forms, and some other common elements that your standard page version might feature.

It’s also a possibility that you will need to rewrite the template of your site to compensate for the new restrictions. In AMP all CSS be less then 50kb and “in-line”. Also because custom fonts can be very load intensive, they are required to be loaded using amp-font extensions so that there is more control over how they load.

Rich media must be handled differently. Images are required to utilize the custom amp-img element and have to include a height & width. Videos must use a custom tag to embed locally hosted videos through HTML5 (amp-video). There are also extended components for image lightboxes, slideshows and embedding social media feeds.

The new tag components aren’t hard to get used to but they do require a bit of foresight when planning the creation of your website.

 

How Can I Start Using AMP In WordPress?

The simplest way to start playing with AMP is to implement it on a WordPress site. WordPress is developing an official AMP plugin with Automaticc and it’s constantly being updated on Github.

1) Install The Official WordPress AMP Plugin

Simply visit the amp-wp page on Github and download the .zip file. Install the amp plugin like you would with any WordPress plugin and after it’s been installed you just need to append “/amp/” to a page or article (If you don’t have a good permalink structure you can also append “?amp=1”).

2) Validate & Adjust

The Google Search Console will eventually notice the AMP version of your articles from the “rel=”amphtml” tag the plugin appends which allows easy bulk article validation. The problem with this however is that Google does not currently detect the changes very quickly, a correction may take multiple days to be reflected in Google Search Console.

If installing the AMP WordPress plugin is not enough, you may need to go through and manually validate pages that you want to benefit from Accelerated Mobile Pages. Some common issues are forgetting to specify the height & width attribute for images and updating old embed code that is using http instead of https.

3) Use Schema Markup For Validation

It’s important to use valid schema markup for your AMP pages. You can test your pages for valid markup using the Structured Data Testing Tool provided by Google.

4) Configuring Google Analytics With The AMP WordPress Plugin

The current version of the AMP WordPress Plugin does not automatically enable amp-analytics but the process of enabling it is fairly simple

If you want to enable Google Analytics to work with the AMP WordPress Plugin, simply edit amp-post-template-actions.php either through your wordpress dashboard via Plugins > Editor > “AMP” or by using FTP and add the following code at the bottom of the file.

 

Make sure to replace UA-YOURID-Y with your website’s unique Google Analytics property ID.

After adding the code and saving the file, you should now have a basic AMP setup on your WordPress website with tracking enabled.

 

Final Thoughts

Accelerated Mobile Pages are a simple yet effective way to boost the performance of your mobile website(s) and ultimately improve the mobile experience for your users.