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 post contains a few affiliate links for products I use and recommend. Here’s my full disclosure.
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 the Github.
Once I saw how easy it was to create these beautiful experiences in WordPress, I began to experiment with adding AMP on this website.
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.
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.
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.
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.
Google Analytics with AMP
I decided to add my Google Analytics code inside the AMP plugin settings, versus going with something like MonsterInsights. There are instructions in the AMP plugin.
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.
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 – number of requests dropped in half.
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.
Have you experimented with enabling AMP in WordPress? If so, I’d love to hear about your experience.