Enabling AMP in WordPress

What is AMP?

If you are not familiar with AMP, it is a web component framework to easily create user-first websites, stories, ads, and emails. Originally AMP was an acronym for Accelerated Mobile Pages, but in 2018 they dropped the acronym. AMP improves the user experience not just on mobile, but everywhere it is used. This past week, I explored enabling AMP in my own WordPress site.

In short, AMP speeds up the delivery of content and prioritizes user experience first.

Think about how many publication sites don’t do that.

How many magazine and news publishing sites have you visited with content that continues to shift while the page waits… to load disruptive ads, even video, in a cluttered layout? All before you even have a chance to start reading the content that brought you there… thus creating an awful user experience.

This site currently runs on the Genesis Framework and is hosted on WPEngine.com. My child theme is four years old. It is a modified version of the StudioPress Agency Pro theme.

Background: AMP Stories

Over the past few months, I’ve been working with a colleague Cathi Bosco on enabling AMP Stories on her site CathiBosco.com, using the AMP plugin. AMP Stories is a beautiful, visually immersive storytelling experience for the open web. Cathi has created a few example stories on her site. I’ll be sharing in a future post how we created the archive page for the stories. We actively test the latest beta versions of the plugin when released. You can find the AMP plugin on Github.

Once I saw how easy it was to create these beautiful experiences in WordPress, I began to experiment with adding AMP to this website.

Enabling AMP

Bill Erickson wrote an in-depth post on using Native AMP in WordPress, and that inspired me to give this a try. I was concerned that my theme might be too old to utilize AMP and initially put this off because I did not have the time to update my theme.

The official AMP plugin does all the heavy lifting. One of the requirements is no external javascript on your AMP site. I wanted to see if it was possible to adapt this old theme. It had a javascript mobile menu – that most Genesis child themes share, along with some custom javascript I added to the theme. That would all need to change.

With that in mind, I pulled everything down to my local development environment (Local by Flywheel) and started experimenting with enabling AMP.

Installing the AMP plugin

I installed the AMP plugin. Note you’ll see other AMP plugins in the repo, but I’ve chosen to use the official version.

I selected both options on Experiences and the Website Mode as Standard (formerly Native mode) from the plugin settings page. AMP Stories (optional) is in beta. More on that in a future post.

Mobile Menu without Javascript

Using Genesis 3.0, I could easily swap out my mobile menu for the AMP version.

Following the suggestions from Bill’s post, I got the mobile menu working. What I ended up doing was using the menu styles and configuration from the latest Genesis Sample theme which now supports AMP.

I then reviewed my custom javascript and decided to simply remove it. Nothing was necessary for site functionality or performance.

Gravity Forms with AMP

Finally, I reviewed the contact page where I was using Gravity Forms. Out of the box, I was receiving validation errors with the form and did a bit of searching on the web for a solution. I found an issue in the AMP Plugin repo and a snippet of code written by Pascal Birchler from the Google AMP team as a suggested solution. I created a simple plugin for that code, activated it, and validated my form. It worked. I’ve only tested this on my site and on CathiBosco.com so far, so your mileage may vary. Pascal did mention to me that he may be updating that code and writing a post about it – so I’ll continue to monitor and share any updates.

I also plan to try WPForms.

Validating AMP pages

While the plugin does validate pages from within the WordPress dashboard, I’ve found that using the AMP Validator Chrome extension is very helpful when you are not logged in. You can also check specific URLs online using the AMP validator.

Issues with AMP plugin

All in all, this was a fairly easy migration to complete. I did find that the validation process a bit confusing. Specifically, in the area of validating URLs, Clearing Empties, and the Errors Index panel. I’m going to read more about that.

Results

All the pages are now valid AMP pages, not just on mobile but everywhere. Enabling AMP did not take as long as I thought it would. That was the primary goal. I’ll still need to add an opt-in form for newsletter signup.

I ran a few page speed tests before and after implementing AMP on this WordPress site.

To be fair, the mobile site no longer has a background hero on smaller viewports, so that may have improved the results a bit more. Clearly though, adding AMP has made a big difference. I also ran a before and after using GTMetrics.com. Scores improved and the load time dropped, even though the page size increased slightly. One nice thing – the number of requests dropped in half.

Next steps…

Over the coming weeks, I’ll continue experimenting and will be writing several posts on using AMP and AMP Stories with Genesis.

Note: This was my very first post composed using the new Gutenberg editor. I found it easy to use.

For me, enabling AMP on this site is an experiment and there are lots of moving parts that change frequently. I definitely think this will benefit some websites, especially for publishers. Other WordPress sites that depend on a lot of plugins that require javascript… that will take careful consideration and effort.

Have you experimented with enabling AMP in WordPress? If so, I’d love to hear about your experience.