Case Study

AMP for WordPress Plugin

A partnership with Google

to bring the latest standards and features of AMP to the official WordPress plugin.

Google created the AMP project, now part of the OpenJS Foundation, with the vision of a faster and more user-centric model of website development through a framework of web components. With a streamlined set of building blocks that any site can use, AMP allows for blazing-fast content delivery, top-notch on-page experiences, and better metrics for site owners.

The initial version of the official AMP plugin for WordPress was created early on to bring these benefits to the most widely used CMS on the web. Although it was adopted by quite a few publishers at launch, there were challenges from the start. The plugin routinely lagged behind the continually developed core framework, it lacked monetization features, and debugging of AMP compatibility issues was not straightforward. Some site owners, meanwhile, found the plugin difficult to understand, and technical support was not as readily available as some users expected from a Google-backed project.

As these growing pains became apparent, the AMP team’s desire to see their project succeed motivated them to find a partner in bringing the plugin to its full potential. Stellar performance, great documentation, reliable code and predictability were needed to bring the plugin to the next level, and XWP’s expertise in WordPress development and open-source made us the perfect partner. Since 2017, we’ve focused on how to make AMP for WordPress a stellar plugin for the ecosystem.

Partnering with XWP’s Engineering team has been superb for us, and their contributions to some of our key efforts in the WordPress ecosystem have been very valuable. They have offered us impressive technical depth and an impeccable quality of execution.

Alberto Medina, Google Developer Relations

Plugin Research and Development

As with most of our projects, we began work by developing a thorough understanding of the plugin’s existing features and technical architecture, along with the gaps that needed to be filled to improve plugin UX and bring its features in line with core AMP. As part of this discovery process, the XWP team worked collaboratively with Google to break down the project requirements and align them with the objectives of the broader AMP initiative. We spoke with users of the plugin, extensively reviewed the support forums and GitHub issues, and started roadmapping the future of the plugin collaboratively with the AMP stakeholders. 

Thanks to this initial discovery, the team developed:

Requirements for a scalable technical design, including a structure to support the development of new features, unit testing, and enforcement of WordPress code standards.

A healthy backlog of requested features and improvements drawn from feedback provided by existing plugin users.

A roadmap to bring the plugin’s features in line with the core AMP spec, and to do so in a manner that was maintainable and future-proof.

While this discovery process revealed a clear long-term path, as early as the first week of discovery the team was able to identify several quick wins that could be executed upon immediately. While we set to work on these, all other requirements were collected and prioritized, to be addressed over the following months through XWP’s standard agile processes.

Taken by Alberto Medina: Pictured Derek Herman & Joshua Wold at the Google campus.

The path to Version 1.0

Through early 2018, the plugin team produced multiple versions of the plugin, with each update addressing ongoing support requests while bringing the plugin toward a more usable and feature-complete state. A main area of focus was the compatibility tooling, which allowed site owners to identify the sources of any AMP validity issues on their sites, down to the HTML attribute or line of code. 

Version 1.0 was announced at WordCamp US in December, 2018. In addition to the compatibility tool, the features announced as part of the release included:

  • Integrations with the then new block editor (Gutenberg) to ensure AMP-compatibility of all core blocks.
  • Full AMP validity for the four most recent core themes. 
  • Support for multiple configurations, including Standard (AMP-first) mode, Paired (now known as Transitional) mode, and Reader mode to persist the mobile-only templates provided by earlier versions of the plugin.
  • CSS tree-shaking and minification.

The plugin went from an alternate way to publish HTML content to a full-fledged, user-focused plugin that automatically converts your website to a rich AMP experience.

Just as important as quality engineering was the combined team of experts from XWP and Google who put an increasing amount of energy toward support and documentation. By listening to the community and staying up to date on feedback, the team was able to respond nimbly to user issues while gaining the relevant knowledge needed to develop new features, fix bugs, and improve user experience. 

The AMP plugin presents a huge opportunity to impact 30% of the web. WordPress democratizes publishing and the AMP plugin empowers publishers on the platform to provide a great experience for their readers.

Weston Ruter, Google Developer Relations, XWP Alumnus

Version 2.0 and Beyond

After a couple of years of steady iterations and enhancements that made the plugin even more stable, the team shifted toward a round of major UX and performance improvements. These became the focal points on the roadmap to a version 2.0. 

A major theme from user feedback since 1.0 was that much more could be done to make the plugin accessible to nontechnical users. Responding to this input, the team conceived of what would become an expanded Reader mode—a configuration option allowing sites to serve mobile users AMP-compatible content using any of the WordPress Core themes or any other theme that opts in, while keeping the main theme unchanged for nonmobile users.

With an expanded team we developed a new onboarding wizard to guide newcomers through choosing the ideal configuration for their sites. The settings screen was also redesigned with a more user-friendly interface, with helpful UI guideposts to demystify the plugin’s powerful features.

Beyond these UX improvements, version 2.0 included a variety of equally important updates, including: 

  • Performance measurement tools to help guide the development process for AMP-compatible themes and plugins. 
  • Easy plugin suppression from the settings screen.
  • An option to automatically redirect mobile users to the AMP version of a site, regardless of how the users get there.
  • Improved developer tools and validation to help developers and other tech-savvy users identify and fix AMP-compatibility issues on their site.

With this new release, we wanted to make AMP for WordPress a more welcoming experience for users of all skill levels, not just developers.

Joshua Wold, Product Designer, XWP

Working with Google to improve the AMP for WordPress plugin has been an amazing opportunity for the XWP team to help the community develop better-performing and more user-centric sites. Version 1.0 brought a stable and feature-rich experience for implementing AMP in WordPress, and version 2.0 expanded the plugin’s reach, making it more accessible to users who may not have technical expertise or resources for development.

Since our initial work on the project, the AMP for WordPress plugin has been installed on over 500,000 WordPress sites. Not only that, but the XWP and Google teams have participated in and supported the development of AMP-compatibility in dozens of plugins and themes, from form and media plugins to custom frameworks such as Jetpack, Genesis, Advanced Custom Fields, Gutenberg, and beyond. As the AMP framework grows in flexibility and expands into new platforms, through smart development practices and project processes the AMP plugin team is prepared to continually drive the plugin’s evolution. 

More Case Studies

Want help setting up AMP on your site from the official AMP for WordPress experts? Contact us today to learn more about what we can do to improve performance on your site.