WordPress & AMP

The Power of WordPress + the Performance of AMP

WordPress and AMP Logos

AMPing Up the Web

The open source AMP project, originally launched by Google in 2015,  provides web developers with a set of frontend standards optimized for performance and better user experience.

These standards reduce both the time to retrieve content and render it on devices. By preparing content in a packageable way, it also means that AMP Caches by Google, Bing, Cloudflare, and the like can deliver the fastest possible experiences. This makes both on-site performance and search engine results blazing fast.

With a project vision of a strong, user-first open web, integration with WordPress made a lot of sense. Since 2017 we’ve been working closely with Google on this intersection between AMP and WordPress.This page is a resource for ourselves, partners, and friends in the community for key AMP details and resources, and shares our perspective on how AMP can be leveraged for the improvement of the Open Web.

Want to implement AMP on your website?

The AMP User Experience

Before we cover some more of the technical components, we should understand the impact on the end user as, after all, the performance gains and improved experience offered by AMP are designed for the end user.

Let’s use an example.

Your brother is catching up on news on Brexit. He first goes to Google on his mobile device and searches for “Brexit” Google presents a search result page of articles about Brexit.

The Search Experience

You may notice when doing a Google search of your own, that Google now includes “Top” results at the top of the results page. It shows a carousel of content that is related to your search. These are usually AMP pages from reliable content sources that Google has evaluated for authority and performance. On mobile devices, this is even clearer by the additional AMP icon displayed against AMP pages.

AMP Search Results

Search results in Google for the term “Brexit”

By clicking one of the results in the carousel (let’s say it’s the ABC News Article) the website loads almost instantaneously. This is because Google has loaded the cached version of the AMP page in the background while your brother was reviewing the search results and deciding what to do next. This meant as soon as he was ready to click a link it was able to “load” that next page instantly as the page assets were already available.

The Page Experience

Assuming the site is running Native AMP (more on this later), your brother clicks through to other related articles and is delivered the additional pages quickly. Not instantaneous as the initial page was, but above the average speed usually experienced on the web.

This quick load time is a result of the optimized page assets (HTML, JS, and CSS) and the cached and preloaded page files on Google’s servers that adhering to the AMP standards means.

We don’t need to go into all the benefits of better page performance for your site visitors other than to say they are many and are often worth the effort.

The AMP for WordPress Plugin

The AMP for WordPress plugin is a plugin that has been contributed to by ourselves (XWP), Google, Automattic, and a number of community members. The plugin brings the features of AMP to WordPress site owners through the familiar and user-friendly WordPress Admin interface. The objective of the plugin is to lower the barrier of entry for using AMP for all WordPress site owners, making it as simple as possible to take existing HTML content rendered by WordPress and convert it to AMP.

The plugin also works to prevent rendering errors, instead catching them in the Compatibility Tool, which allows you to work through AMP standards and errors on your site.

The AMP for WordPress Plugin

Native AMP, Paired Mode, Caching, and all those other terms

With this section we’d like to cover the various terms you’ll encounter when implementing AMP.

The Components of AMP

AMP is a set of frontend development standards and a component library. The benefits of adherence to these standards is two-fold:

  1. Frontend performance gains (typically significant)
  2. Access to AMP caching

Outcome #1 is the true objective of the project: highly optimized frontend performance that improves the user experience which also, through compounding effects, leads to a better performing web for everyone. Outcome #2 is optional for the web developer: it’s a service facilitated by search engines to further improve the perceived performance of users on your site by serving primarily AMP-compliant web content.

The AMP project’s code is Open Source and is maintained by a community of contributors and led by Google and has an Open Governance model.

AMP HTML is HTML with some restrictions for reliable performance. It is basically HTML extended with custom AMP components.

AMP JS is an allow-listed and concise JavaScript library.

The AMP JS library supports AMP’s best performance practices, manages resource loading, and gives you custom components, all to ensure a fast rendering of your page.

Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on a page before resources are loaded and the disabling of slow CSS selectors.

To learn more about not just the optimizations but the limitations, read the AMP HTML specification.

The AMP Cache is a cache of validated AMP documents published to the web. Google products, including Google Search, serve valid AMP documents and their resources from the cache to provide a fast user experience across the mobile web.

The cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files, and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

The cache also comes with a built-in validation system which confirms that the page is guaranteed to work and that it doesn’t depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification.

Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

Learn more about testing your AMP HTML pages.

The most widely recognized AMP Cache is Google’s own, but other organizations have their own including Bing and Cloudflare.

AMP Modes & the WordPress Plugin

There are 3 different modes available to site owners when implementing AMP on their WordPress website. These are Paired Mode, Classic Mode, and Native AMP.

AMP Modes in the WordPress Plugin

Configuring Template Mode in the WordPress admin settings

Paired Mode is where a website delivers two (paired) versions of a page. One AMP version of the page and the other standard. The AMP version of the page is delivered to site visitors when they arrive on-page from an AMP referral source, like Google Search Results. The other version of the page is delivered otherwise. Until v1.0 of the WordPress AMP Plugin, without some heavy-lifting development, this was the only option available to WordPress site owners. Recent work on the plugin has improved the implementation of paired mode alongside the introduction of Native AMP.

Paired mode uses your existing theme and through clever sanitization and post CSS processing, the plugin does it’s best to create an AMP valid version of it. Your AMP theme and WordPress theme often look extremely similar except they’re just accessed from different URLs.

In paired mode, there is usually additional development work needed to be done to your theme to make it AMP valid. The plugin does a really good job of reducing the size of the CSS and loading only what is needed on the page, but because of 3rd party plugins and custom theme development, you may need to conditionally remove parts of your site when AMP is valid for it to pass validation. The plugin helps you do this and in version 1.0 it has an interface to let you know of any failing AMP validations that need to be fixed.

To preview Paired Mode, you can just use the ?amp query parameter to show the AMP version in a browser. E.g yourdomain.com/post-slug/?amp

Native AMP is where an entire website is delivered as AMP. There is no standard version provided to site visitors and the only experience they have is the AMP powered one. Native AMP delivers a highly performant website to all site visitors, no matter how they arrive on or navigate through the site. With v1.0 of the WordPress AMP Plugin, Native AMP is now possible for WordPress site owners and is made far more accessible to site developers through a “tree shaking” post-processor in the plugin that auto-magically renders AMP compatible templates.

Classic Mode is the original mode for rendering AMP pages in the WordPress AMP plugin and it renders an AMP theme that is separate and different from your WordPress theme. Think of it as a whole new WordPress template that is only displayed when the site is being viewed as AMP. The AMP template is customizable and can be styled to align with your brand.

Generally, this mode works out of the box and not much customization is needed for your website to be AMP valid as it uses a specific AMP valid theme. The drawback is that your website theme is different from the AMP template.

If you’re running with classic, you can preview the mode in two ways:

  • yourdomain.com/post-slug/amp
  • yourdomain.com/post-slug/?amp

By visiting any of these two URL’s the AMP version will be shown in a browser.

For more technical details on how the 3 modes are differentiated, please check out the Theme docs for the Official AMP Plugin for WordPress.

AMP Tools

There are a number of tools that you can use to help with AMP development, testing, and maintenance.

AMP Test

To test if a webpage is AMP valid, you can use the AMP Test tool provided by Google:

https://search.google.com/test/amp

AMP Test

AMP Validator

The official AMP project provides an AMP validator tool for validating and debugging AMP pages:

https://validator.ampproject.org/
AMP Validator

AMP Validator for Chrome

If you’re using Chrome, there is an AMP Validator extension that allows you to test AMP pages directly while browsing your website:

https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en
AMP Validator Chrome Extension

AMP & Open Source

AMP Governance Model

The AMP project has always been an Open Source initiative. Just recently, project leaders have kicked off a new governance model that reinforces this commitment to community focus and leadership. The model is designed to more explicitly give voice to all constituents of the community and includes an Advisory Committee and a Technical Guidance Committee.

AMP, the WordPress Plugin, and SEO

Just by enabling the Official AMP Plugin, your AMP pages will automatically get indexed and cached by Google without having to submit or request this from Google. This is because the plugin adds a reference to the AMP page on each canonical web page that has an AMP version.

There is nothing additional that you need to do to get the added SEO benefit from AMP, it’s all handled for you by the plugin and the Google crawler.

It’s been noted by the AMP team that it’s the performance gains in general that boost the SEO of the pages, not the fact that they are using AMP. A non-AMP page of similar performance will rank (all other factors being equal) as well as an AMP page.

AMP by the numbers

AMP Use Statistics

AMP in XWP

Here are some examples of our client work that has included AMP implementation.

AMP Stories & WordPress

AMP stories is an interactive format for delivering web content to end users. Particularly geared for articles and storytelling, the mobile-optimized format is one popularised by social media apps in recent years. AMP Stories brings this interactive and immersive experience to the Open Web.

We’re involved in an ongoing project with Google for bringing this functionality to the WordPress plugin.

AMP Stories in WordPress

For more on AMP Stories, visit https://www.ampproject.org/stories

Test your WordPress site’s AMP compatibility

It’s easier than you think.

Recognizing the benefits of AMP for your website may come easily, but the technical journey can feel a little more daunting. The first step you can take is by assessing the current compatibility of your site. As all sites are different, no assessment outcome will be the same. For the purpose of this process, it will be assumed your site is running on WordPress and that you are able to use the AMP WordPress Plugin to take care of the compatibility automation feature it offers. After following these steps you’ll have a clear idea of what work you need to to do bring your site to full compliance.

Steps

As we are checking for full site compatibility, we will be activating Native AMP mode with the plugin.

  1. Duplicate your site on to a staging server. This should be a standard step for any exploratory development like this.
  2. Install and activate the official AMP Plugin
  3. Configure the plugin
  4. Visit the homepage of your site and check the WordPress admin bar for AMP validation errors. This will tell you if there were any unaccepted validation errors that were sanitized.
  5. Click the Re-validate link in the admin bar and you can get a list of the validation errors.
  6. With this list of validation errors you can:
    1. decide that you can live with them being sanitized (accept), or
    2. you can’t live with them being sanitized (reject) which means you’re going to have to fix your site by either changing the theme templates/styles or which plugins are active.
  7. Visit key pages (templates) of your site and repeat steps 4 to 6.
  8. With this information, you can also make decisions about which templates you want to offer AMP on.
    1. So you can have either paired/native AMP only on the `singular` template, for example.

{Video walkthrough}

More Than Just Articles – AMP and eCommerce?

Recent improvements with the AMP project have included support for ecommerce.

A project by BigCommerce and XWP has been their WordPress plugin that supports AMP compatibility. A showcase project for Kelly Slater’s Firewire Surfboards was launched using the BigCommerce and AMP plugins.

Our work on AMP and our partnership with Google

We’ve been working with Google since October 2017 on AMP and have been contributing to the plugin and the parent project in some significant ways. The following links tell the stories and capture some key moments of our work with Google and our clients around AMP.

Links

What’s next with AMP?

AMP Stories & WordPress

AMP Stories are an active feature of the AMP project. Bringing an AMP Story building experience into WordPress is on the roadmap for the WordPress AMP plugin.

AMPHTML roadmap

The AMP project roadmap can be found here.

Some Case Studies

Want to implement AMP on your website?