Implementing Accelerated Mobile Pages for WordPress

Check out my take on the Accelerated Mobile Pages (AMP) project.

---

Having decided that AMP was a positive development, I looked into implementing it on this website. WordPress is one of the partners involved in AMP, and Automattic have already released a plugin that implements AMP on your WordPress site.

I was bracing myself for it to be a difficult experience. Instead, I found myself amazed at how easy it was. It took me just around an hour from start to finish — implementing AMP and customising the template to match my standard HTML design.

To see the results, you can simply append /amp/ to the end of a post’s URL. Try it with this post.

Getting started

The AMP website says: “For those used to the current process, we don’t expect a significant learning curve.”

That certainly proved to be the case for me. It certainly helps that the WordPress plugin does most of the heavy lifting. Its documentation is also very easy to follow.

You could activate the plugin and leave it be. Out of the box, the AMP page displays with a basic, clean-looking theme. For many bloggers, that will do.

The functionality of the default template is fine. After all, AMP is primarily designed for reading articles, and you shouldn’t really be able to go wrong with that.

But I wanted a wee bit more from it. So I took a dive in.

CSS changes

My first priority was to tweak the default CSS to change the colours and fonts. The plugin gives you the option to append some rules to the default CSS. But you can completely overwrite it by creating a folder in your theme called amp and placing your CSS in a file called style.php.

Because I wanted to do more than just add a few lines, I chose the latter option. But I used the original CSS as the basis for the new file. By quickly scanning the CSS line by line, I was able to tweak any rules that didn’t fit my design.

Site icon replacement

By default, the AMP template displays your site icon (used for favicons and the like) taken from your theme’s settings. This was not suitable for me because while my site icon is predominantly teal, the logo I display in the header of my website inverts the colours so that it works on the teal background of the header.

Thankfully, replacing the image is as easy as uploading a 32 × 32 icon and adding a short snippet of code to your theme’s functions.php file.

Displaying the featured image

The default template does not include your post’s featured image anywhere. In a way this is understandable, because removing the image will increase the page speed and allow the user to focus on the content.

However, I decided I would prefer my template to include the featured image. Placing another snippet of code in your functions.php file solves that problem.

Tweaking the post meta

I wasn’t keen on the default display of meta information. It uses a “human readable” date (wording such as “4 days ago” rather than the actual date). I personally dislike that, so wanted to replace it with the actual date.

Each meta part (author, time, comments, tags) has its own file in the template. So to override it, you can create a new version of that file in your amp folder.

Another issue I had with the meta section was the fact that each item is truncated after 300px wide. It is not clear to me what the advantage of this is. Truncating text is normally a bad idea for the unintended meanings that can come about as a result. I also can’t see that it has much of a performance advantage when the full set of tags is still there in the AMP HTML anyway.

The default template uses CSS to truncate it. So to undo that it was just a matter of removing the offending lines of CSS from the new style.php file.

Adding web fonts

This is the change I feel the most guilty about. It’s no secret that adding multiple web fonts to your page reduces performance. Because I am a cheapskate, I use free Google Fonts. Thankfully, Google Fonts is one of just two web fonts providers that AMP has whitelisted for use.

I added the fonts by using the amp_post_template_head action in the functions.php file.

Unfortunately, this only gives you the ability to add code to the header rather than replace it. The default template already pulled in two different web fonts. So my template now pulls in four web fonts — two of which aren’t even used.

Ouch. That’s not in the spirit of things at all.

The only way around this that I can see is to re-write the entire template, which is possible. I might do this next.

Analytics tracking

The last thing to add was analytics. Again, only certain types of analytics are permissible in AMP. Even Google Analytics can only be used with some simplified code. But adding this to the footer via amp_post_template_footer got me going.

What’s missing

Even after all that, what is still left is a rather more basic page than the standard responsive webpage.

For instance, navigation menus are missing. There are no links to related posts. Comments are nowhere to be seen.

Pages and archive sections are also not yet supported. So you cannot yet create a whole WordPress website for AMP.

But perhaps this is all in the spirit of AMP. While I’d like to imagine people really want to get hooked into reading more and more of my posts, the reality is that almost everyone wants to read just the one. (In fact, even that is a very generous assessment.)

Time to be less selfish, and stop trying to keep people in our own walled gardens. After all, that’s the spirit of the web.