TL;DR
Approximately three years ago we set out to solve the challenge of enabling full AMP content publishing in WordPress with the goal of making it easy for WordPress site owners to traverse frictionless paths towards successful content publishing on the WordPress platform. Fast forward to today, and here we are, very excited to announce the v2.0 release of the official AMP Plugin for WordPress! In this blog post, we’ll provide an overview of the AMP for WordPress Plugin as well as delve into some of the highlights of this major release. Read on to learn more!
AMP and Core Web Vitals
Google recently launched an initiative called Web Vitals with the goal of providing unified guidance for quality signals that are essential to delivering a great user experience on the web.
In a nutshell, if we ensure the pages we deliver to our users meet certain threshold values for these metrics, we have a fair shot at success as content creators.
From its inception, AMP has been all about a simple axiom: take care of the user experience and everything else will follow. This means that AMP was envisioned, designed, and implemented explicitly with the purpose of making it easier to build user-first sites; these are sites that are fast, beautiful, engaging, secure, and accessible. Therefore, optimizing web vitals is very well aligned with AMP’s vision and design principles.
In short, AMP is a powerful and cost-effective tool to make it way easier to build great-performing sites, reducing the level of technical expertise, as well as the time and resources required to succeed at that goal.
Success, powered by AMP
The missions of the WordPress and AMP open source projects are very well aligned. The AMP project seeks to democratize performance and the building of great page experiences, which is at the core of WordPress’ mission of democratizing web publishing.
In an ecosystem such as WordPress, AMP brings a notion of “performance-as-a-service” by providing, out-of-the-box, a wide range of coding and performance best practices; staying always up to date when it comes to taking advantage of what the capable web has to offer; and imposing effective control mechanisms (e.g. guard rails) enabling consistently good performance. AMP helps WordPress creators to take advantage of the openness and flexibility of WordPress while minimizing the amount of resources needed to be invested in developing and maintaining sites that perform consistently well.
The official AMP plugin for WordPress is the core technology making it easier to publish AMP-powered content in WordPress; and it does so by:
- Automating as much as possible the process of generating AMP-valid markup, letting users follow workflows that are as close as possible to the standard workflows on WordPress they are used to.
- Providing effective validation tools to help dealing with AMP incompatibilities when they happen, including the aspects of identifying errors, contextualizing them, and reporting them accurately.
- Providing support for AMP development to make it easier for WordPress developers to build AMP compatible ecosystem components, and build websites and solutions with AMP-compatibility built in.
- Supporting the serving of AMP pages on Origin, making it easier for site owners to take advantage of mobile redirection, AMP-to-AMP linking, minimization of AMP validation issues to surfaced in Search Console, and generation of optimized AMP pages by default.
- Providing turnkey solutions for segments of WordPress creators and publishers to be able to go from zero to AMP content generation in no time, regardless of technical expertise or availability of resources.
Version 2.0 of the AMP Plugin represents an inflection point in AMP content generation in WordPress. Read on to learn who can benefit from the AMP plugin and get an overview of the capabilities available in the latest version.
Who is the official AMP WordPress plugin for?
The AMP plugin can be beneficial to anyone regardless of technical expertise. For developers, the plugin brings powerful and effective developer tools, which help in building AMP Compatible ecosystem components (e.g. plugins, themes), as well as full sites and ecosystem solutions. For non-developer or less tech savvy users, or those who simply don’t want to deal with validation issues and tackling development tasks, the AMP plugin allows the assembling of sites that can publish AMP content, providing automation and integration of AMP-compatible ecosystem components, and minimizing the complexity of the process.
AMP Plugin Overview
In this section we provide an overview of the AMP plugin for WordPress, highlighting the main functional areas and capabilities of the latest version 2.0.
Templates Modes
The AMP plugin provides three different options for you to bring the power of AMP to your WordPress site. These options are called Template modes. Read on to learn which mode is right for you:
| Mode | Role |
| Standard | A good and easy choice for sites where all components used in the site (themes and plugins) are fully AMP compatible, or you have resources to do custom AMP development and/or fix validation issues. |
| Transitional | A good choice if the site uses a theme that is not fully AMP compatible, but the functional differences between the AMP and non-AMP are acceptable. |
| Reader | May be selected if your site is using a highly AMP-incompatible theme. It is also a good choice if you are not technically savvy, or simply do not want to deal with incompatibilities and prefer a simplified workflow to get AMP experiences to your users. |
In v2.0 the capabilities of the Reader mode have been expanded significantly, providing much more flexibility and less functional limitations to users.
AMP-first themes for Reader Mode
Any AMP-compatible theme to be used to serve AMP pages, and all template modes and content types can be served as AMP. There is out-of-the box support for all essential features including nav menus, logos, commenting, and template design variations. And the old Reader mode’s scope and AMP post templates (i.e. Legacy theme) are kept available for backwards compatibility.
AMP Customizer for Reader Mode
When Reader mode is selected, two themes are used and therefore there will be two versions of the Customizer available: the default Customizer for the active theme, and the AMP Customizer for the AMP Reader theme.
Brand Affinity
The AMP plugin provides the capability of synchronizing general site settings, which can be shared between the main active theme and the selected Reader theme (e.g. the logo, background color, header, and others). This makes it easier for users to attain better brand affinity between their AMP and non-AMP sites.
Tooling
Many of the capabilities of the AMP plugin involve providing site owners and developers with tools to help their websites be successful. These tools seek to automate as much as possible the AMP content publishing process, and make it easier for WordPress developers to build AMP compatible themes, plugins, and ecosystem solutions.
Selective AMP Opt-in/Out
The AMP plugin allows you to incorporate AMP into your content strategy progressively. It provides you with the flexibility to select which parts of your site should be served as AMP and which should not. And this capability decouples post types from template types, making it possible to enable all templates to be served as AMP, and yet let specific post types be excluded from AMP.
CSS Tree Shaking
Scenarios where pages load huge amounts of CSS, much of which is likely not used at all, are unfortunately fairly common, and they can hamper the page experiences perceived by users. To prevent such scenarios, AMP constrains the use of CSS to no more than 75 KB of CSS on any given page.
Keeping CSS under these constraints may sometimes be challenging. The AMP plugin provides support to make it easier to keep the total amount of CSS on pages under the 75KB limit. This is done by “shaking the CSS tree” for a page, removing as much unused CSS as possible. Furthermore, when the total CSS left after tree shaking is still excessive, the plugin prioritizes the CSS styles, so that the all-important theme stylesheet is retained, and excluding less important ones (e.g. print styles).
Embedded Validation Tools
One of the main strengths of AMP is not only that it makes it easier to build user-first sites, but that it does so in a way that is verifiable. AMP provides a validator specification, which can be implemented in different ways. AMP pages can be passed through such a validator to determine if they are indeed valid AMP pages. When a page is determined to be fully AMP compatible, we can be confident that AMP’s design principles will be present on the delivery of that page.
The AMP plugin provides a full integration of the AMP Validator Specification. It uses it at the core of its capabilities for identifying validation issues. Furthermore, the AMP plugin contextualizes issues precisely indicating the component of the site responsible for the occurrence of the offending markup. And it exposes validation information in different ways so that users (both developers and non-developers) have the mechanisms they need to understand the surfaced issues and deal with them.
Editor
When editing an AMP page in the Gutenberg editor, if a block which includes invalid AMP elements is added, the plugin detects it and reports it contextually to the user.
Validated URLs
The Validated URLs screen surfaces a list of all the URLs which have gone through the validation process, together with a detailed summary of the validation status for each one, including the overall status, the number and type of errors found, and other key pieces of validation data. And the Validated URL screen exposes detailed validation information for a single URL.
Error Index
The Error Index screen surfaces all the validation issues that have been identified in the site, together with summary information about each issue. Clicking on a specific issue displays detailed information about the issue including a list of the URLs affected by it.
Admin bar
The AMP plugin provides information about validation status and percentage of CSS budget used, as well as entry points to the validation screens described above, directly from the admin bar. The user can gain in a glance an understanding of the validation status of the given content being edited, as well as summary information about CSS budget usage, number of issues, links to the non-AMP version of the page, and to the Settings screen.
| Reviewed, Removed Markup | Unreviewed, Removed Markup | Invalid Markup Kept |
 |  |  |
Hiding Dev Tools
Prior to v2.0, the AMP plugin’s developer tools were enabled for all users with permissions to edit posts. Such users would get validation issues shown in the editor and validation information would be shown in the admin bar. Surfacing validation status and errors in this way is great for technically savvy users that want and can do something about the information presented. But, that information can be disconcerting (and annoying) to users who can’t do anything about the issues, or cannot even understand what they mean.
Developer Tools can now be turned off for users who don’t want to (or can’t) deal with any validation issues, but for users who do, the validation workflow is improved. Developer Tools are only accessible to administrators, and they have the option to turn them on and off at will. Furthermore, as the user follows the onboarding flow, if they declare themselves as non-technical, the plugin configures developer tools to be disabled by default.
Plugin suppression
The AMP Plugin allows users to install plugins that are not AMP-compatible yet, and let them run only on the non-AMP (desktop) version of the site. Admin users have the flexibility of suppressing the execution of specific plugins when rendering AMP pages. This is especially useful to avoid validation issues introduced by non-AMP compatible plugins, while still maintaining the corresponding functionality on non-AMP pages.
The Plugin Suppression table indicates when a plugin was suppressed, who did the suppression, and whether the plugin has been updated since the time it was suppressed.
Mobile Redirection
AMP is a fully responsive Web framework and therefore AMP-powered sites can bring a user-first experience to users on both desktop and mobile. This ideal scenario is enabled by configuring the AMP plugin in Standard mode, and it corresponds to the ideal scenario.
However, as the WordPress ecosystem evolves towards ubiquitous AMP compatibility, scenarios where the plugin is configured with the Transitional or Reader modes are still frequently demanded and chosen by users. And since it is on mobile devices where AMP-powered page experiences are most important, site owners want to direct mobile visitors to the AMP version of their site, as they progressively traverse the path towards full AMP compatibility and having their site all in AMP. The AMP plugin provides the capability of automatic redirection of mobile visitors to the AMP version on the site.
AMP-to-AMP linking
When mobile redirection is set, the plugin automatically enables AMP-to-AMP (A2A) linking. With A2A site visitors that land on an AMP page are able to stay on an AMP experience once and they continue their journey through our site. With A2A linking, any intra-site navigation will take the user to the AMP version of the page, if it is available. And complementing this capability, the AMP plugin adds a link in the footer on AMP pages to go to the non-AMP version if needed/desired, and also a link on the footer of non-AMP pages to go back to the AMP version if desired.
AMP Optimizer
The AMP plugin provides a PHP-port of the AMP Optimizer as a library providing automated server-side optimizations of AMP pages, including a variety of performance best practices for AMP. These optimizations improve key performance metrics such as the very important Last Contentful Paint (LCP) performance metric when AMP pages are served from origin. Currently the optimizer library is part of the AMP plugin, but it will be available as a standalone library for other CMSes and PHP-based solutions to take advantage of it.
In essence, the AMP optimizer implementation corresponds to a Transformation Engine (TE), which receives a regular (i.e. unoptimized) AMP page, and applies a serial pipeline of Transformers (i.e. optimizations). The TE then outputs an optimized AMP page, ready to be served to users and meet the desired CWV thresholds.
Workflows
All the capabilities of the AMP plugin described in the previous sections work together to enable a variety of workflows that are useful and applicable for different purposes and for different circumstances.
Plugin Configuration
Onboarding
v2.0 of the AMP plugin provides an Onboarding Wizard that makes configuring of the plugin clearer and more intuitive, indicating which of the three template modes (Standard, Transitional, Reader) may work best for your site and technical ability. When you install and activate the plugin for the first time, you can access the Onboarding wizard from the activation notice on the plugins screen. After that, you can always access it via a link on the AMP settings screen.
Settings Screen
The settings screen has been completely redesigned in v2.0 and provides a greatly improved presentation of the settings for a better user experience when making configuration changes.
Adding flexibility to access the configuration settings of the plugin, it is also possible to reopen the configuration wizard from the Settings screen at any time, and there is now a link to the Settings screen available on the AMP admin bar component at all times.
AMP Development
The AMP plugin leverages its validation capabilities to make it easier to do AMP development in WordPress. In addition to identifying and contextualizing validation issues on your site, the plugin assists in keeping the site AMP compatible by automatically removing offending markup. Since the removal of invalid markup can have an adverse effect on the functionality or appearance of the site, the user has the ability to revert the automatic removal and instruct the plugin to keep the offending markup.
When any invalid markup is kept, the corresponding pages will become not valid AMP, and the plugin will either perform an automatic redirection to the non-AMP version of the pages (in Transitional and Reader modes), or remove the `amp` attribute from the `html` tag, so that no invalid AMP is served to users, or to Search crawlers (e.g. Google bot).
Using the `Remove`(invalid markup)and `Keep`(invalid markup) actions, you can control the state of your site and safely work towards fixing validation errors if you have the ability and/or resources to do so. If you don’t have the capacity or the desire to do AMP development, you can let the plugin remove the invalid markup and use plugin suppression to prevent the offending plugin from running on AMP pages.
AMP Maintenance
One of the main roles of the AMP plugin is to be an “watchdog” for AMP compatibility of WordPress sites. The validation tools of the plugin provide the functionality to assist site owners on the task of maintaining their sites AMP compatible. The plugin continuously checks for validation issues that may be introduced as the site evolves, and site owners/administrators can rely on the plugin ability to automatically generate AMP markup when possible, remove invalid markup (with their approval), or apply the plugin suppression capability to prevent plugins from breaking the AMP compatibility of the site.
Turnkey AMP-powered Sites
The AMP plugin makes it possible to assemble full AMP-powered WordPress sites without having to write a single line of code. The plugin orchestrates the bundling of AMP compatible components which together make a site. The plugin acts as an enabler by automating a great part of the generation of AMP content, and as an enforcer, ensuring that no AMP incompatibilities are introduced as the site evolves.
What’s Next
The AMP plugin enables full AMP content publishing in WordPress on different scenarios, ranging from effective AMP development to full turnkey AMP solutions. We are very excited about the v2.0 release! Lots of work went into this release, and it is loaded with many improvements and new capabilities in the areas of usability, performance, and flexibility.
To learn more about the AMP in WordPress, please visit the AMP plugin site, and if you haven’t done it already, download the plugin and get started on the path of consistently great page experiences for your WordPress site! If you are interested in being part of the AMP project contributors building the AMP plugin, you can engage with us in the AMP plugin github repository.
Posted by Alberto Medina and Weston Ruter, AMP Developer Relations, Google