AMP

Powerful impact: Why we AMPized the Australian pop culture site – GOAT

WordPress

Editor’s Note: The following post was written by Leo Postovoit, Strategist at XWP.

NOVA Entertainment is one of Australia’s most recognized media brands with a history of radio, media, and local content stretching back 19 years; and GOAT is NOVA’s pop culture, news and entertainment platform built for a mobile-first audience. 

GOAT is the first of NOVA’s sites to benefit from development of a progressive-focused WordPress build. As GOAT’s editorial goals include bringing their content to people in a format they find accessible, convenient, and speedy—performance and usability are top priorities. This study reviews how AMP and PWA brought impact to Goat’s recent technical relaunch.

Challenge

The GOAT website experienced issues with performance and usability. To improve user experience and  compatibility with many devices, priority one was to improve the performance of the site. The site’s delays in rendering content and assets were barriers to users and their onsite and sharing behavior. This is not surprising, given that research studies consistently demonstrate how critical performance is for the level of engagement a site receives.

At a tech conference in Tokyo this year, Googler Jeany Halliman opened her speech about a study that Google conducted on site visitors of Media sites about “the one thing they disliked the most when browsing a site”.

“Coming from the ad business, I always thought it would be ads (visitors disliked). But the majority of users said it was a slow website.” – Jeany Halliman

This response correlates clearly with the well observed impact on bounce rates that page speed has, yet its precedence over on-page ads is a surprise to many due to recent attention and “backlash” many Media sites have received about overbearing Ad strategies.

Opportunity

NOVA reached out to XWP, an ecosystem leader in WordPress engineering, and maintainer of the official AMP Plugin for WordPress in partnership with Google. Well known for producing elegant and complex solutions for major publishers such as Rolling Stone, News Corp Australia, and Rogers, and technology partners — such as Cloudinary, Google, BigCommerce, and Automattic, XWP work focuses on building a better web.

Since performance, scalability, and usability were key goals outlined by stakeholders at NOVA, it was clear to XWP that a progressive AMP approach was the way to go.

While the primary objective of the migration to an AMP-first strategy was clear: to create a fast experience that users love to return to and share, it was important to also ensure scale and stability through best development practices including CI/CD, automated testing and high-availability hosting. Combined with high code quality and modern WordPress practices in mind, the GOAT site was made not only to be quick, but also built to last.

Solution

With XWP’s experience with AMP and other ways to impact performance, they considered various implementations to achieve NOVA’s goals for the GOAT website. An AMP-first strategy was the best fit because it allows for streamlined development around a single code base.

Going one step further, GOAT seemed to be a great use case for the PWA feature plugin (another collaboration between XWP and Google). This added the ability to provide capabilities such as offline mode, notifications and the like, powered by service workers. And the solution defined leverages the amp-install-serviceworker component, which makes it easier than ever before to combine the benefits of AMP and PWA.

While the PWA features included today are limited in scope, the long-term goals are to add installability on desktop and mobile devices, richer offline mode and pre-fetched pages, native push notifications and the like—just like other powerful PWAs across the web.

Incorporating Ads 

When ad loading is not configured properly it contributes towards poor page performance, especially on media-rich sites like GOAT. Working with AMP means the approach XWP took to implementing GOAT’s ad stack had to adhere to AMP standards.  Whilst some concessions had to be made to accommodate ad providers which were not fully AMP compatible the overall effect was a highly performant ad-reliant media site. The best of both worlds: a good user experience that isn’t degraded through sub-optimally loaded ads.

The Results 

As discussed, Goat is the first of Nova’s sites to go live with a unified editorial workflow and performance-focused theme build—as a PWA site, with all templates built as Native AMP. The performance results are noticeable:  

  • The unification of the editorial experience across multiple properties
  • Google Pagespeed Insights score went up from 7 (yes 7) to 77 on mobile
  • WebPageTest 3G test: before / after . Key things: start render time decreased by 1.5s. The time to interactive went down from 43s to just 10
  • Lighthouse test: before / after . First contentful paint went down from 5.8s down to 2.5s (a 3.3s reduction). The performance score went up from 7 to 65. First CPU idle time went down from 16.2s to 5.9s
  • GTmetrix: before / after . The PageSpeed Score went up from a D (63%) up to B (82%)

Start Utilizing AMP

Based on results as the ones obtained by Goat’s site AMP-first strategy, we recommend learning more about how AMP can be the solution to your current business challenges.

  • To find out more about AMP, visit the project homepage at amp.dev.  
  • To evaluate your site’s compatibility and see if you can also gain the performance and user experience benefits of AMP, check out AMPized.com, XWP’s service to bring the benefits of AMP to your WordPress sites.

Written by Leo Postovoit, Strategist at XWP

How Developers are Creating WordPress AMP Experiences Content Creators LOVE to Use

WordPress

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

AMP on the Times of India

WordPress

Editor’s Note: The below post was originally posted on the AMP WordPress Plugin site by the Times of India.

Site performance and user experience matter to the Times of India, and therefore we keep tabs on new solutions and advanced technologies that allow us to make our website faster, more engaging, and more user-friendly. This is why we decided to evaluate the official AMP plugin for WordPress to leverage the performance and usability advantages that AMP enables. Our goal was to evaluate the plugin on some sections of our web presence, and then scaling it across other Times of India sites.

We started this project with Timesofindia.indiatimes.com/blogs.  At the beginning of the evaluation we faced some expected challenges having to do with the need to make changes to the site to align it with AMP principles, such as CSS size constraints and the removal of 3P JS.  Some of the aspects that were tackled included the refactoring of certain components and widgets, such as the Social Share widget to implement them using AMP components,  replacing pop-ups with the AMP-lightbox component, implement tab panels using the amp-selector component, and other similar changes required to make the site compatible with AMP.  One important change was the replacement of all the Google Ad Manager/CTN ads on the site with AMP ads.

During the implementation process we took advantage of the available documentation on both AMP in general, and the AMP plugin in particular, and we interacted with AMP team to get their support in answering our questions and guiding us towards fixing all of the issues we encountered. Although the entire evaluation process took about two months, the actual implementation effort took us only about two weeks. And we are happy to report that the results were fantastic!

We are currently using version 1.0.2 of the official AMP plugin 1.0.2, since this and later versions allow us to make our entire site fully AMP compatible (i.e. AMP First). The impact on key metrics we are seeing after rolling out the new implementation was quite amazing:  a 59% improvement in page load time (11.40 secs before vs. 4.35 secs after), and early measurement data indicates the number of page views  increased by 4% . We expect this to go substantially higher as we continue to improve the experience.

The technical investment we made for evaluating a fine-tuned AMP implementation of our site setup was well worth it as it has made our pages much more user-friendly and faster. Furthermore, we are planning to scale it up across other websites in Times Internet wherever it is applicable.

Although making our site AMP compatible was a learning experience for us, the end results are rewarding and impressive, enabling a reduction in load time from 11.4 secs to 4.35 secs.

Puneet Walia: Technology head – TOI, GadgetsNow, eTimes & Mirror

Quick, Easy & Fast: 
Launching our first fully AMP WordPress site has yielded excellent results not only in terms of performance but also on ranking and revenue; we observed a spike in revenue traffic of about 4% during the first week.

Rudra Kasturi: Vice President, Organic Growth Head for Times Group Sites