#AMPConf Celebrates WP Innovations, Improved UX + Instant Load Times [Recap]

Alberto Medina and Jeanny Haliman share AMP for WordPress developments and how Setka and others are paving the way a faster web

Last week, Google hosted the AMP Conference in Tokyo, Japan, where our CEO and CTO Katya Bazilevskaya and Igor Kuznetsov were lucky enough to take part.

Among informative and thought-provoking talks from a range of Google’s star players – as well as others from Microsoft, Twitter, The Washington Post, Yahoo! JAPAN, and beyond – we were most excited to hear from Google’s Developer Advocate Alberto Medina and South East Asia Web Lead Jeanny Haliman, who delivered an inspiring presentation entitled “Building AMP-First Sites, the WordPress Way,” featuring our very own Setka Editor.

DID YOU KNOW?

AMP is a new Google-powered web component framework that’s improving state of the art technologies, page loading times and user engagement across the web.

Jeanny Haliman

South East Asia Web Lead of Google’s Online Partnership Group

Setka Editor is a WYSIWYG page builder that makes it easy for brands and publishers to build interactive and beautiful content, without having to code at all. The team wanted their users to not only build beautiful content, but also have their content load really fast. That’s why Setka Editor decided to integrate their plugin with the AMP for WordPress plugin.

They tested this solution for one of their clients, Miro [formerly known as Realtime Board]… The AMP version looks identical, but loads so much faster – not only on mobile, but also on desktop.

What’s new in AMP for WordPress?

With 33% of websites running on WordPress, at 60% market share – and nearly half of conference attendees confirming that they, too, use the platform – it’s no surprise that the most developed AMP solution at the moment happens to be for WordPress, where the AMP plugin can be applied in a variety of ways, as Medina goes on to describe.

“This has been an awesome year for the AMP project, and one of the areas where we’ve made a lot of progress has been in building AMP content creation within the WordPress platform,” Medina shared. “AMP-first creation in WordPress falls onto a spectrum. On one hand, we have a fully manual process where we as developers do all the work. And on the other, we have a fully automatic process, where the platform – with a combination of core and extension – does all the work for us.”

The official AMP plugin for WordPress is an extension to the WordPress platform that plays three main roles. According to Medina, it:

Automates large parts of the process of iterating AMP content on the platform

Provides tools and guidance to assist developers in the work they have to do manually

Acts as an enforcer and monitor as sites evolve to maintain AMP compatibility


He went on to carefully explain how automation actually works within the plugin. When installed, the AMP specifications first integrate into the plugin logic, enabling the automatic identification and contextualization of errors. Then, the AMP for WordPress plugin “hooks” its functionality into any standard content creation mechanisms (i.e. widgets, embeds, blocks, etc.), generating AMP-compatible components from then on out.

Where WordPress is concerned, the “look and feel of sites is defined by a collection of templates that, when combined, form what is usually called the theme of the site,” Medina continued, outlining the three ways that the plugin can be configured to interact with a site’s underlying theme:

DID YOU KNOW?

Setka Editor for WordPress is 100% AMP-ready, compatible with any design element in your editorial content layouts for instant load times and seamless scrolling – on any device.

 Native Mode This makes AMP the framework of your WordPress site. It reuses the underlying theme, styles, and templates of your site and renders only AMP responses, ensuring that your site is AMP-first.

  Transitional Mode This also reuses any underlying templates, but renders both an AMP and non-AMP version of the site’s content, which gives developers the option to decide what goes where, and to keep certain as of yet non-AMP compatible elements such as text to audio converters, for instance. “It’s called Transitional Mode because it provides you with a migration path that allows you to progressively expand AMP compatibility within your site,” Medina said, “until you get to a point where everything is AMP-compatible and you can switch to an AMP-first strategy.”

  Reader Mode This generates content in a separate template that’s simple, light, and clean, but may not match the site’s theme. “Reader Mode provides basic AMP benefits, but we don’t recommend it,” concluded Medina, “because it’s restrictive, and moving to Transitional or Native Modes is getting easier and easier.”

How does AMP work in the wild?

Medina then took a deep dive into the technical ways in which AMP works to optimize your site – you can watch the full talk here – before inviting Haliman to the stage to share some real-world examples from the field of online publishing, as well as why publishers and developers alike need to adopt to this new technology if they want to win over audiences and give their content a competitive edge.

“I’ve been with the team for a little over four years now, working with publishers to help them grow their businesses sustainably,” she began, “and I’ve realized how dynamic and competitive the publishing industry is. Publishers are constantly challenged to upgrade their offerings to win their users.”

And when it comes success, research shows that the most important thing to avoid are slow loading times. “The longer you make users wait, the higher your bounce rate will be,” she confirmed. “Speed should be the number one priority of publishers, but that’s not always the case; not everyone has the bandwidth or technical capability to upgrade their website and meet these user needs.”

Which is exactly why Google built the AMP plugin in the first place. “That’s the gap we’re trying to fill,” Haliman said, adding, “Our goal is to democratize speed, and to make sure that speed is accessible to all WordPress users,” before highlighting a few standout early adopter success stories:

  • The Times of India reported 59% loading speed improvement
  • Jawapos reported 10x lighter pages and 38% more ad revenue per impression in Transitional Mode, used in order to have a direct comparison of AMP and non-AMP versions
  • Hello Sehat reported 2.6x more time spent on AMP pages – even in Reader Mode

“Our vision is a WordPress ecosystem, where fast websites are everywhere and AMP is used as the key enabling component, but we can’t do it alone,” she went on. “We need ecosystem players like you to take part and democratize the speed. Today, I’d like to celebrate contributions from three players that are helping make this vision a reality:

 XWP A WordPress development agency working on commercial and ecosystem projects, leveraging AMP to upgrade offerings for all kinds of clients, like when they reduced loading time for heavy.com from by more than 5 seconds (going from 8 to less than 3).

 Setka A WYSIWYG page builder that makes it easy for brands and publishers to build interactive and beautiful content, without having to code at all. They reduced loading time for client Realtime Board by 5 seconds thanks again to their AMP integration.

 WP Engine The hosting provider behind Genesis Framework, a popular theme framework in WordPress that has empowered over 600,000 domains and is set to release an AMP-compatible 3.0 release this summer.

“I’m personally really excited about this news,” Haliman said as she wrapped up, “because all of these efforts will accelerate the creation of AMP-compatible teams and give more options to website owners.

“We’ve seen the importance of speed, and how it correlates with a publisher’s success. Now, publishers can leverage the AMP plugin to achieve this goal and win their users.”

Watch the full talk here: “Building AMP-First Sites, the WordPress Way.”

Learn more about Setka Editor’s integration with the AMP Project and how we’ve contributed to the AMP plugin for WordPress.