Editor’s Note: The following post was written by David Vogelpohl, VP of Web Strategy at WP Engine. WP Engine is a digital experience platform for WordPress.
In the web development world we often use tools for automation, read books on project efficiency, and deploy an army of techniques to deliver innovation at a faster and faster rate. While we often ask ourselves, “How can we be better at fishing?” many of us rarely ask ourselves “How can we enable our marketers and content creators with the tools they need to fish for themselves?”.
This article tells the story about how and why WP Engine invested in leveraging AMP to help developers create performant, beautifully designed, and feature-rich experiences that content creators LOVE to use.
Why does WP Engine care about development & design efficiency?
In mid 2018, WP Engine purchased Genesis, a theme framework for WordPress and the Atomic Blocks plugin as part of our strategy to deliver intuitive and powerful design and development solutions. Atomic Blocks is a WordPress plugin that includes a library of pre-designed and configurable website components called “blocks” and arrangements of blocks called “layouts” that make it easy for site creators to design and deploy new experiences.
Atomic Blocks users can now leverage the power of componentized page building while creating 100% AMP validated experiences.
This is often achieved with Genesis and Atomic Blocks by leveraging the new block based editor in WordPress which was code named “Gutenberg” during its release to WordPress #core in late 2018.
Users can style WordPress blocks in any fashion (Genesis helps with this); providing configurable design controls to fit branding, pre-loading blocks with content, and integrating blocks with other extensible systems or software.
Here is an example of the block editor in use with Atomic Blocks.
Here is an example of a StudioPress theme which uses this modular-block approach, is highly configurable by content creators, was updated to use AMP, and has an incredible score of 95 on Google’s Page Speed Insights (up from a score of 54 pre-AMP). Genesis users can also make their own custom themes. Here is an example of an AMP site using a custom built Genesis theme. Regardless of the choice of pre-designed or custom themes, thanks to AMP our customers can build incredibly fast sites faster than ever!
Why did WP Engine decide to add AMP support to Genesis & Atomic Blocks?
Considering the desire for certain brands to adopt AMP and the fact that our agency and developer customers felt they were without product support from us or even other products in the WordPress ecosystem, we felt it was imperative to support them when building with AMP.
Of course, with our stated mission of providing developers with tools that make it easy to create experiences content creators love to use, we had to go about this in a way that not only made it frictionless for the developers to create those experiences, but also to do so in a way that allows content creators to not have to think much about AMP compatibility when creating the landing or web pages they need to create.
The content creators had to LOVE creating AMP compatible experiences for their brand.
Adding new features or support for certain standards such as AMP is a tall ask for design and development tools as popular as Genesis or Atomic Blocks. There are considerations for the >600K sites that use those products and an army of developers around the world who rely on those products as part of their daily workflows.
As with many of you, we take great care every time we consider adding something new to our products. When it came to AMP support, we started by getting a pulse from customers on how often they use AMP, what they like about it, and what they don’t.
The feedback we received was somewhat typical of what you’d expect from a broad audience of web developers relative to AMP. Most had actually never built a site with AMP and claimed that their downline customers rarely asked for AMP sites. That being said, many acknowledged that they did have certain key customers (particularly in publishing) that would request AMP sites and that those asks were often rooted in a desire for performance and improved search/social visibility within various platforms.
We then asked, “For customers pursuing an AMP strategy, what tools or techniques do you use to satisfy those demands?” The answer was a bit shocking. The overwhelming response was “We don’t have any!”
How we approached AMP support within Genesis & Atomic Blocks
Google and other contributors released an AMP plugin for WordPress in 2019. This plugin enables many of the key capabilities of AMP for WordPress sites and is optimized for the WordPress core themes. Core themes are themes which are included with WordPress itself; however, most WordPress sites are powered by custom themes created by developers or premium themes created by companies like WP Engine.
Custom themes and premium themes (created with Genesis or otherwise) require the developers of those themes to optimize their code to help ensure AMP compatibility even when using the AMP plugin for WordPress. For example, some of WP Engine’s premium themes included elements which weren’t AMP compatible, so any users of those themes would experience failures in AMP validation.
Additionally, plugins which power front end experiences such as our Atomic Blocks plugin also must make sure their code is optimized to ensure 100% AMP validation.
The AMP plugin for WordPress does take care of a ton of the work in making a WordPress site support AMP; however, certain aspects of your site may require additional work as illustrated above.
Because of these requirements, we embarked on a mission to add capabilities to Genesis for developers to create custom themes with 100% AMP validation, update key premium themes for AMP compatibility, and to replace elements of Atomic Blocks which failed AMP validation.
Building custom AMP themes with Genesis
In our Genesis 3.0 release we added capabilities that allow developers to more easily create 100% AMP validated custom themes.
Creating a 100% AMP validated theme with Genesis starts with installing the AMP plugin for WordPress. The contributor team on the AMP plugin did an outstanding job, so Genesis theme developers get a lot of free wins just by running this plugin.
Here’s a screenshot of what WordPress users see when using the AMP plugin.
Two of the key benefits in the Genesis world related to the AMP plugin is the fact that it automatically converts markup to AMP HTML and handles CSS tree shaking to help theme developers stay within the 50KB CSS limit.
That being said, Genesis itself and certainly many themes made with Genesis have or had Javascript dependencies which of course would cause the site or certain pages to fail validation. In relation to Genesis itself (vs. “child themes” built with Genesis), some of the key areas of JavaScript dependency were the Genesis menu style system (specifically with “Superfish”), JavaScript related to threaded comments, and scripts related to skip links.
In Genesis 3.0 we replaced these dependencies or made them optional / disabled when running with AMP.
Some of the benefit to Genesis developers is that child themes no longer need to include their own responsive-menus.js script or do any of the work to enqueue it. Genesis now includes this script and handles all the work of enqueueing it, if you utilize the new responsive menus API.
The end result is that it’s easier to build 100% AMP validated themes with the Genesis framework than ever before. Using these capabilities we have been able to easily update two of our premium child themes to be AMP compatible and countless other custom child themes in the Genesis ecosystem have also been updated or created with AMP compatibility.
Since the launch of Genesis 3.0, the community response has been largely positive with many examples of developers not only adopting AMP as part of the sites they build, but also sharing their knowledge and experiences with others as seen here in this great post titled “Building a Native AMP WordPress Site”.
AMPing up the WordPress block editor with Atomic Blocks
Just as custom themes require developers to optimize their code for AMP, plugins which control front end experiences must do the same. In our case, the Atomic Blocks plugin provides a rich experience for site creators to use website components called “blocks” to create new experiences regardless of the theme they use.
Making Atomic Blocks AMP compatible was actually a somewhat easy undertaking as only a few elements of those blocks were failing AMP validation. To me, this is a great example of how many design and development tools are largely AMP compatible as is without the need for a complete refactor.
In the case of Atomic Blocks, we were able to refactor the parts of the blocks and layouts the plugin enables to be AMP compatible. The work was so light, we were able to accomplish this in just one sprint!
In the example below, you can see how easy it is for content creators to create beautiful, performant, and functional AMP experiences without even realizing that those experiences are 100% AMP validated.
These are the types of frictionless experiences that deliver great value to marketing teams and help keep roadmap-zapping, soul-crushing landing page tickets out of dev teams’ backlogs. In this way, brands can leverage the power of AMP while creating new experiences in hours vs. days or weeks.
The future of AMP for WP Engine’s design and development products
For the Genesis theme framework, our engineering teams are keeping up with the evolution of AMP to ensure that our customers are armed with the latest capabilities within the themes they build with Genesis. We are also looking at expanding AMP support across our inventory of premium Genesis themes so customers have more choices when leveraging premium themes and AMP.
For the Atomic Blocks plugin (which is also used in our premium AMP themes), we are continuing a 100% AMP validation approach so users of Atomic Blocks can enjoy the full feature set of Atomic Blocks in an AMP context.
While we realize that some customers or the downline brands they serve may not choose to deploy an AMP focused strategy, it’s important to us that when they do, we arm them with tools that allow developer teams to be able to create beautiful, performant, and functional experiences that content creators LOVE to use.
Written by David Vogelpohl, VP of Web Strategy at WP Engine