Should your WordPress sites use Google’s Accelerated Mobile Pages (AMP)? It’s a simple question with a complicated answer.
When it was announced in 2015, Google billed the AMP Project as a way to improve the performance of mobile pages, and the experience for users on mobile devices. Automattic announced that it would support AMP in October of the same year. An AMP plugin was soon made available in the WordPress Plugin Repository which allowed you to add AMP support to your WordPress site. The original plugin was a pretty spartan affair, but substantial development has taken place over the intervening years.
In this article, we’ll cover how AMP works, how to use both the official AMP plugin and an alternative, and finally a method to boost your site speed for all users with WP Offload Media and SpinupWP without using AMP at all.
- What is AMP?
- AMP and WordPress
- Installing and Using the AMP Plugin
- Is AMP Faster?
- AMP and WordPress Themes
- An Alternative to the Official AMP Plugin
- Boosting Speed with WP Offload Media and SpinupWP
- Wrapping Up
What is AMP?
An AMP page is a special version of a regular site page, that needs to be built using AMP HTML, a subset of standard HTML with a few tags replaced with AMP-specific counterparts like <amp-img>. Google also requires AMP pages to include the AMP JS library which performs optimizations on your page.
One reason to use AMP pages was the idea that they would load faster for mobile users. While this may still hold, the other primary reason was that Google gave AMP-based pages preferential treatment in their Top News carousel. Google announced that they were discontinuing this practice in June 2021, instead relying on a site’s Core Web Vitals of performance, responsiveness, and visual stability as a sign that the page would load quickly and provide a good user experience.
AMP has been dogged by controversy from the beginning. Criticisms leveled at the Google-developed standard include that “it’s bad for how the web is built”, that it “keeps users within Google’s domain and diverts traffic away from other websites”, and that “Google has forced websites…to create AMP versions of their articles”. Even Google’s move to an open governance model has failed to silence critics.
Most recently, Google has been accused of increasing the load speed of non-AMP pages to give AMP pages a “nice comparative boost”. The allegations come from an antitrust suit leveled against Google by 16 US states and Puerto Rico.
Controversies aside, AMP pages do tend to load quickly. As Daniel Smullen of Mediahuis IRL told SearchEngineLand, “Whether Google artificially inflated the comparison of AMP versus non-AMP, the speed-boosting impact of the AMP Cache is not a hoax.”
AMP and WordPress
Automattic, well-known WordPress agency XWP, and Google have been involved in developing the official AMP plugin since 2017. Version 1.0 of the plugin was officially released at WordCamp US in 2018. One of the most prominent features of that release was an integration with…
the then new block editor (Gutenberg) to ensure AMP-compatibility of all core blocks.
According to the developers, a central focus of Version 2.0 development was improving the UI. The current version, 2.2.0, was released in December of 2021 and includes changes to the settings screen and onboarding wizard.
Many of the current contributors to the AMP WordPress plugin now either work at Google or are sponsored to work on it:
- Alberto Medina – Developer Advocate in the Web Content Ecosystems Team at Google.
- Weston Ruter – led AMP development at XWP, now at Google.
- Pascal Birchler, well-known WordPress contributor, and translator, now at Google.
- Alain Schlesser, a well-known WordPress contributor, lead developer on WP-CLI, works at XWP and with the Google team on the WordPress AMP plugin.
Installing and Using the AMP Plugin
When the plugin was first released, a WordPress AMP page often looked very different from the non-AMP version of the same page. There were a number of reasons for this, including the fact that custom CSS isn’t included in AMP pages. You can see the difference in the image below, from when we first looked at AMP in 2016. The original post is on the left, and the AMP version on the right:
The AMP version looks nothing like the original post! It does, however, look exactly like all the other AMP pages from that era. The plugin at the time had no built-in options to customize how the output looked. Bringing the AMP page into line with the look of the site required diving into code.
This no longer appears to be an issue, as long as you’re using an AMP-compatible theme. I opened up a WordPress site I use for testing, loaded up the default Twenty Twenty-One theme, and activated the official AMP plugin. I’m using version 2.2.0, the latest version at the time of writing. Again, the original post is on the left and the AMP version is on the right:
Wonder of wonders, they look exactly the same! AMP supports the Twenty Twenty-One theme very well. We’ll look at how well AMP supports other popular themes in a later section.
You can install the AMP plugin the same way you would any other plugin available from the WordPress.org repository. Just type “AMP” into your search bar and it should be the first thing you see:
You can also see an alternative to the official AMP plugin, AMP for WP. We’ll discuss that in its own section below.
You install and activate the AMP plugin just like any other plugin. However, the AMP plugin added an onboarding wizard in version 2.0 and I wanted to check it out.
I clicked Open wizard which showed me a brief welcome message. I clicked Next and moved on to the next section. The onboarding wizard gives you options for “Developer or technically savvy” and a simpler setup for “Not technically savvy.” The only difference is in the modes recommended by the plugin. I went ahead and selected Developer or technically savvy.
After clicking Next again, the wizard started to scan my WordPress site to check for incompatible themes and plugins. It didn’t find any issues. In fact, the process was so fast that if I blinked I would have missed it. The test site I’m using is pretty lean, so it might take longer if you have a lot of plugins. You should also bear in mind that the official AMP plugin only scans the active theme and plugins. You’ll need to run it again if you switch themes or add new plugins to your site.
Now the onboarding wizard offers us three basic options:
Standard: This setting means that every post and page will be rendered as AMP. You can still opt-out of AMP for specific parts of the site, but otherwise non-AMP versions of your content will not exist. Make sure your site is using AMP-compatible themes and plugins before selecting this option. The plugin will typically recommend this option if you have an AMP-compatible theme and none of your active plugins cause issues.
Transitional: This gives your site both AMP and non-AMP versions, with both using the same theme. You can use this mode if your WordPress site uses a theme that isn’t fully compatible with AMP, but you’re okay with the differences between the two versions. Users on mobile devices are served the AMP version, while those accessing your site from desktops see the non-AMP version.
Reader: You still have AMP and non-AMP versions of your site with this choice, but each version uses its own theme. This setting is for when you are using a theme that has significant incompatibilities with AMP. The AMP documentation recommends this setting for those who aren’t “technically savvy, or simply do not want to deal with the incompatibilities.”
The test site has a compatible theme and plugins, but I wanted to test how pages would look when served as both AMP and non-AMP versions. I selected Transitional and clicked Next. This takes us to a page where we can review our choices.
Everything looked good, so I went ahead and clicked Finish, bringing us to the settings page. At this point, you can click Browse Site and see how your site looks with the plugin activated.
From here, you can reopen the wizard or switch directly between “Standard,” “Reader,” and “Transitional” modes. Scrolling down will reveal the AMP plugin’s more advanced settings, which you can see below. We’ll discuss these next.
Supported Templates: This allows you to choose which content types are enabled for AMP, including posts, pages, and media. There’s also a toggle switch that allows you to serve all templates as AMP. This is selected by default.
Plugin Suppression: Using this setting, you can see which plugins are causing AMP validation errors, and switch them from Active to Suppressed. Suppressing plugins prevents them from running on your AMP pages, while leaving them active on the rest of your site.
Analytics: This setting controls analytics configurations, allowing you to capture analytics for your AMP pages. Each configuration takes the form of a JSON object and you must have Google Analytics set up on your site for any configuration to work. We recommend reading the amp-analytics documentation and the Analytics documentation before making any changes to this setting.
Paired URL Structure: This setting only applies to Transitional and Reader modes. Standard mode only serves AMP pages, so paired URLs aren’t necessary. In Transitional and Reader modes, canonical URLs remain non-AMP, while the AMP versions have AMP-specific URLs. Changing the paired URL structures can result in 404s until the site is re-indexed. AMP recommends leaving this setting alone unless you’re migrating from another AMP plugin with a different structure. There are four different structures for paired URLs, with examples shown at the preceding link.
Other: This setting consists of three toggle switches, all of which are enabled by default. The first allows you to disable mobile redirection. Leaving it enabled ensures mobile visitors see the AMP version of your pages. The second switch enables AMP developer tools to surface validation errors when editing posts and viewing the site. The third and final toggle switch determines whether plugin data will be deleted if you uninstall the plugin at some point.
Is AMP Faster?
As I noted earlier, the AMP plugin produces pages that appear identical to their non-AMP counterparts, as long as you’re using an AMP for WordPress-enabled theme, like Twenty Twenty-One. We’ll take a look at some other themes a little later. For now, I want to run some speed tests and see if AMP delivers on its promise. Visually they’re identical, but the real test is whether or not the AMP version actually loads faster.
My sample post is pretty light to begin with, just one tiny image file and a bit of text. That’s probably going to load pretty quickly no matter what. To give AMP a bit more of a challenge, I created a new post with a single image block and a gallery block, and grabbed some images to fill it up. It’s a best practice to optimize your images for quick loading, but I didn’t bother. I didn’t see any advantage in making things too easy for the AMP page.
I had already installed the AMP plugin, so the first thing I did was disable it to establish the base load speed for my gallery post. Next, I opened the dev tools in Firefox and looked at the Network tab while I refreshed the page a few times.
Non-AMP Version
Uncompressed Size: 908.54 KB Transferred: 637.80 KB Finish: 1.78 s DOMContentLoaded: 549 ms Load: 668 ms
AMP Version
Uncompressed Size: 1.45 MB Transferred: 1.05 MB Finish: 1.58 s DOMContentLoaded: 423 ms load: 442 ms
The AMP version loads quite a bit faster than the non-AMP page, despite being somewhat bulkier.
AMP and WordPress Themes
We’ve already determined that the official AMP plugin now serves pages identical to non-AMP pages, as long as you’re sticking with the default WordPress Twenty Twenty-One theme or another AMP-enabled theme. I wanted to know if the same would hold true for other themes. I decided to test it with Astra and OceanWP, popular themes that are both listed as compatible with the official AMP plugin. I also wanted to test the plugin with Storefront, a popular theme that is not listed as part of the AMP for WordPress ecosystem. You can see the results below. In all cases, the original version is on the left, with the AMP version of the page on the right.
On Astra:
On OceanWP:
I loaded up the Storefront theme and updated the page. Unlike Astra and OceanWP, Storefront is not listed as part of the AMP ecosystem of compatible themes. However, the posts look pretty much identical.
Unlike with our earlier tests, though, the AMP plugin informed me of a conflict.
I clicked “View technical details” and it showed me the issue. The Storefront theme had loaded in some custom JavaScript. AMP only allows <script> tags if they’re used for loading AMP components, which are added automatically by the plugin.
The plugin gives you a choice to remove the <script> tags loaded by the theme and serve the page as AMP, or to remove them and serve it as a non-AMP page. Removing them requires careful consideration and an awareness of exactly what the theme’s JavaScript is doing. For example, if your theme loads custom JavaScript to power its navigation menus, removing it might cause your front-end navigation to break.
This aspect of AMP isn’t limited to themes. It may also interfere with other components that rely on JavaScript, such as forms.
The plugin advised me to instead use…
AMP components and functionality such as amp-bind and actions and events (as opposed to JS event handler attributes like onclick). Some custom JS can be added if encapsulated in the amp-script.
These components allow you to add custom tags to your AMP-enabled pages. The amp-bind component comes into play as a response to changes in the data or actions taken by the user on your WordPress site. The amp-script component is used to run custom JavaScript in a web worker. Note that some restrictions may still apply to exactly which scripts you can run this way. This ensures AMP maintains its speed.
Alternative to the Official AMP Plugin
As we mentioned earlier, the WordPress.org repository lists an alternative to the official AMP plugin, AMP for WP. One of the more recently added features is CSS Optimization (aka Tree Shaking), which automatically removes all the unused CSS from your AMP pages. It also offers support for custom post types.
There are a lot of extensions available for AMP for WP, including ones that offer support for Google AdSense, contact forms, and WooCommerce and other ecommerce plugins.
I wanted to see how it worked compared to the official plugin, so the first step was to deactivate the AMP plugin I’ve currently got on my site. The next step was to install and activate the plugin. After activation, AMP for WP gives you two options to proceed with setup: Basic and Advance.
After selecting Advance, I was taken to the setup screen. From here, you can access AMP for WP’s options, including switching to Basic setup. The primary difference between the two seems to be that Advance offers more options.
Advance gives you access to Setup, Settings, Design, and Extensions. Basic pares this down to Setup and Extensions. You can switch back and forth between the two at any time.
The Setup tab allows you to change your website type, select which parts of your site need AMP, setup design choices, configure analytics tracking, and toggle privacy settings related to GDPR. This tab also includes setup for advertising, and a list of which 3rd party plugins are compatible with AMP for WP.
The Settings tab offers a wealth of options for how your site serves AMP pages. There are frankly too many to go into detail here, but it seems to cover most situations at a fairly granular level, including ecommerce, translations, analytics, and structured data.
The Design tab is relatively simple in comparison. It shows you AMP-compatible themes, as well as giving you access to the precise look and feel of your AMP pages created through this plugin.
Finally, the Extensions tab shows you the list of premium extensions available for AMP for WP.
Based on the Settings and Design tab alone, AMP for WP gives you more fine-tuned control over your AMP pages than the official plugin does. You can always customize your site and your AMP pages, but those customizations may require you to dip into code if you’re using the official plugin. AMP for WP appears to offer similar functionality through the usual WordPress backend. There is also a PRO version of AMP for WP available that offers discounts on themes and extensions, as well as features that aren’t available in the free version.
I decided to switch back to Basic rather than experiment with all of the settings. I then clicked on Where do you need AMP? and selected Posts.
I wanted to make sure the example posts were being served as AMP pages, so I ran an AMP test. Everything appeared to be working properly, so I popped into the post’s edit screen to see if the plugin had changed anything. The content looked exactly the same, but scrolling down revealed some changes.
AMP for WP gives you both an AMP Page Builder and a Custom AMP Editor. The AMP Page Builder allows you to build AMP pages from scratch or use pre-built layouts. The Custom AMP Editor allows you to use HTML instead of the special AMP-compatible tags that you would typically have to use with an AMP page. I wanted to see how this worked, so I threw down a line of text, enclosed it in some tags, and ticked the checkbox for Use This Content as AMP Content.
Success! The text I added was included in the page and the HTML tags I used were applied to the text.
Next I ran a quick speed test. In terms of load speed, the results were similar to those found with the official plugin.
Non-AMP Version
Uncompress Size: 908.54 KB Transferred: 637.80 KB Finish: 1.78 s DOMContentLoaded: 549 ms Load: 668 ms
AMP for WP Version
Uncompressed Size: 1.29 MB Transferred: 722.90 KB transferred Finish: 1.21 s DOMContentLoaded: 231 ms load: 503 ms
Boosting Speed with WP Offload Media and SpinupWP
Not too long ago, you could answer this question by asking another question: “Do you want to appear in Google’s Top Stories carousel or not?” Today it’s much harder to answer.
Both of the AMP plugins we tested improved load speeds. However, there are other ways to improve your load times. These include offloading your media through a plugin like WP Offload Media and using a content delivery network (CDN). WP Offload Media helps to improve the load times of every page, mobile or not.
We cover how to set up WP Offload Media in our documentation, so we won’t repeat that information here. We also have guides on configuring storage spaces to handle the offloaded media, including guides for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage.
My test site already has WP Offload Media installed and configured, but I deactivated it before I ran the AMP tests to make sure the images were being loaded from the local site paths and not a CDN. I reactivated it and made sure both of the AMP plugins were deactivated, then I ran a basic speed test on the gallery post.
WP Offload Media Load Speed
Uncompressed Size: 1.10 MB Transferred: 907.77 KB Finish: 804 ms DOMContentLoaded: 490 ms load: 659 ms
The page loads faster than the non-AMP version in our earlier tests, but not quite as quickly as the AMPed posts did. On the other hand, using WP Offload Media means you never have to worry about conflicts with your theme or any JavaScript elements you’ve got on your WordPress site.
There are other steps you can take to boost your page speed in addition to serving your media through a CDN, such as [page caching] (https://spinupwp.com/wordpress-caching-all-you-need-to-know/#page-caching).
I decided to see if we can boost the load speed a bit by using SpinupWP’s one-click page caching. I logged into the SpinupWP dashboard and switched on “Page Cache.” SpinupWP gives you the ability to set your cache duration and path exclusions. I left these at their defaults, and ran another speed test on the test site.
WP Offload Media and SpinupWP Caching
Uncompressed Size: 1.10 MB Transferred: 907.81 KB Finish: 605 ms DOMContentLoaded: 376 ms load: 494 ms
These speeds are comparable to the results we got with the AMP plugins, but with the advantage that you don’t need to worry about the compatibility of your themes and plugins.
Wrapping Up
It looks like either AMP plugin will give your users on mobile devices a speed boost. WP Offload Media gives you a similar boost, but the speed increase also applies to your desktop users. Using SpinupWP’s page caching increases the speed even further.
One of the primary drivers for the use of AMP was to get your pages into Google’s Top News carousel. That motivation no longer applies, as Google has switched to evaluating your Core Web Vitals instead. As long as your site offers fast load times, not using AMP shouldn’t hold you back. Improving low Core Web Vitals scores is likely a better use of your time than implementing AMP. Regardless of whether you want to crack that Top News carousel or not, improving your Core Web Vitals provides a better user experience.
On the other hand, one of the main reasons to avoid AMP was that it would serve pages that often looked substantially different from the other pages on your site. While you could dig into customizations to change their appearance, it involved a lot of coding. This reason may also not apply at this point. The official AMP plugin seems to produce pages that are identical in appearance to the non-AMP pages, as long as you’re using an AMP-compatible theme. More to the point, the plugin itself will tell you when something in your theme or plugins isn’t compatible, and gives you the power to decide what to do about it.
The controversy that has dogged AMP won’t disappear soon. At the time of writing, the antitrust suit revolving around AMP is still rolling through the courts. It may be years before it finally comes to a conclusion.
In the meantime, what’s your take on AMP? Do you use AMP pages on your WordPress site, and if so, which plugin do you use? Let us know in the comments!
