Go Beyond With Headless WordPress

It’s time to get serious about headless solutions. Real businesses and agencies are creating headless web experiences that give developers the flexibility to use any front-end stack and enable content creators to use their preferred publishing interface.

In this session, WP Engine Director of Product Jason Konen recaps the advancements we’ve made with Headless WordPress, WP Engine’s headless WordPress solution, and provides a sneak peek into advancements we’ll pursue in 2023.

Session Slides:

Transcript: 

JASON KONEN: Hi, I’m Jason Konen. I’m the director of product for Headless WordPress here at WP Engine, and I’d like to talk to you today about going beyond with Headless powered by Headless WordPress. So what we’re really seeing right now is a huge shift in the market. It’s probably the biggest shift since smartphones came out, with 64% of enterprises currently using a Headless approach and 90% looking to do it in the next 12 months. That’s a huge number. And we know that the WordPress community has been growing in Headless over the last couple of years. We’ve been working very closely with some of our partners and deploying many, many Headless WordPress sites to meet this need.

One of the things that we see is Headless really empowers the developers. So modern CMSs have some really awesome things that it does. But what we’re finding is it really disempowers the publisher. So these Headless CMSs that have been purpose built for headless from the start, they’re really interesting, they’re really helpful for the developers, but the publishers lose some things. They lose themes and page layouts and SEO tools and things like that. But WordPress really empowers the publisher and always has. From core, to all of the plug-ins in the ecosystem, all of the themes and the community.

So really allowing the publisher to control their message, their text, the formatting, A/B testing, SEO tools, changing themes and doing all of that work without needing heavy development. But we just said that Headless takes that away, it takes that power away. But we believe that Headless WordPress brings that back for everybody, not only powering the developers and what they want to do, but the publishers and what they are trying to do. So if you look at it as “what are the best tools for the job,” your developers are going to want to work with a modern tech stack that allows them to scale, over use code, use modern techniques and grow with the industry. Whereas, the publishers want to be able to use the CMS tools that they’ve known and loved for 20 years without having to do a lot of changes.

This is where Headless WordPress comes in. The Headless WordPress platform has been designed to delight both publishers and developers. Best in class WordPress hosting is the base for this, but then we layered on auto scaling and healing node hosting so that you can build modern web applications on top of WordPress. We have pre-configured edge caching, CI/CD tools and unparalleled performance and security, all built on top of an ecosystem that is growing in a community that is growing. WP GraphQL, along with its new feature, Smart Cache, our upcoming product, Headless WordPress Search. Faust.JS, a Headless framework for building Headless WordPress sites, Advanced Custom Fields, which we brought into the WP Engine family last year and we’ve been working hard at bringing our Headless WordPress Content Modeler capabilities right into ACF.

Blueprints and beyond, and let’s not forget the world class support that you already know and love. Now I want to talk a little bit about performance. Recently, we had a customer that ran a couple of ads during the Super Bowl. And you can’t even test for the type of traffic you’re going to get at an event like this. If you see here on this chart, you have three small spikes on the sixth, the eighth, and the ninth. Those were their load tests so they were testing to see, “hey, is this site going to hold up” to all the traffic they were expecting during the Super Bowl. And then you see there later in the chart, two giant spikes, and that corresponds to the two ads that ran through the Super Bowl. 10 times the traffic they were expecting. And this was incredibly successful.

They had consistent performance before, during, and after, even with the sudden 10x spike with 10 million requests in mere minutes. DDoS attacks were mitigated at the edge, preventing any sort of application performance issues. 99% of the entire front end was cached with 151 milliseconds, to first byte and 700 milliseconds to render, all while handling 27 million requests during the Super Bowl. So if you went to the site during peak traffic, you would have had no idea that it was under such a load. That’s the sort of performance that a Headless WordPress site can bring to you. And we’ve built that into the Headless WordPress platform.

We work very hard with the customer and the agency behind this ad to ensure that their site was performant and optimized. And that’s something that we do with our customers is make sure that we’re using all the best practices in order to ensure that your sites are performant, fast and secure. So one of the big things that we do in the Headless WordPress team is listening and partnering with our customers and agency partners. We listen, we learn, and we release. And here’s just a whole bunch of things that we’ve launched in 2022 for Headless WordPress.

What I want to get across is how much investment we have in this area. We really believe that headless WordPress really brings the best of a world class CMS to the performance and developer experience modern sites need in order to be successful. And so as we continue to work with you on what do we really need to build, what do we really need to have in order to help you become successful, you’re going to see more and more investment here. You’re going to see us continuing to release things, if not every two weeks, at least once a month because we move pretty fast. And your feedback is very important to us.

Some of the things that I’d like to call out and talk about a little bit more deeply from this list are: Faust.js. So this is the Headless framework for WordPress. We built this in 2021 and released it out there. And we got a lot of feedback from you guys and it was great. And we took that feedback and we rebuilt it because it just wasn’t scaling the way that developers needed it to scale. We used a query language provided by G-qty and found that just– it did some magical things, but it didn’t scale the way we wanted it to scale. So we swapped that out for Apollo, which is an industry standard. And that’s allowed a lot more flexibility with the framework.

We also released full template hierarchy support. So if you’re a true WordPress dev and you’ve been dealing with the WordPress hierarchy for years, this is going to be very familiar to you. You’re going to understand exactly what’s going on. We’ve also added a plug-in architecture so that you can extend this as you need to. Authentication, content previews right from WordPress, things that marketers expect as they’re building their site. So that was a really big release, really inspired by all of the feedback that the community gave us. And we’re continuing to do that. Our next big feature, which you can use today, is the Gutenberg Block support.

So this is new. And essentially, what we’re trying to do is make it so that developers can ensure that the blocks that a publisher is used to using in WordPress are accessible for the front end, for your node application without a ton of extra work, so that you can give the publisher the experience that they expect, along with a development experience that’s easy and manageable. And we have a session later in DE{CODE} on this. I encourage you all to attend and learn from this. We would love your feedback here as we continue to iterate on this key feature.

Another thing that went missing when you take WordPress to Headless is the toolbar. Many publishers are used to going to a web page, clicking “Edit content” and dropping right into the editor and being able to change content on the fly. Well, that disappeared when you went Headless. So we’re adding that back in with Faust. So you can edit content, debug connections, and more, just like you would with the existing WordPress toolbar. I also think that there’s some really interesting things that we can bring to the toolbar that don’t exist in traditional WordPress. Things like, server performance, deploy status, and others, just a bunch of the ideas that we have for this particular feature.

So another thing I want to talk about with Faust is Faust is built on top of Apollo and React and Next.js. It extends that and makes working with WordPress much easier for the modern JavaScript developer. You don’t have to use it. We are framework agnostic on Headless WordPress. But if you’re looking for a recommendation on how the best way to do it, our recommendation is Faust. Another key feature that’s launching today here at DE{CODE} that I would like to call out is Headless WordPress Search. You may remember Headless WordPress Search from last year’s DE{CODE} where we had an open Beta for many of you to try. And many of you did, and a lot of the feedback that you provided us over the course of the year has really made this a complete feature that we can launch today.

It is a GraphQL first with no proprietary API and is fully extensible. We have a full feature set with ACF and custom post-type support, faceted browsing, weighted and custom results, stemming, fuzziness, and exclusions, and best of all, we have no limits on Search actions or bandwidth. We want to make this simple and easy for you to use. So if you’re interested in that, please check out our further information on Headless WordPress Search.

And some other key releases that you might not be aware of that we’ve launched in the last couple of quarters: Preview environments. So if you would like to preview a poll request, we can set up an environment automatically for you. And this makes testing and QA very easy. You don’t have to do all the work of figuring out who is looking at what branch and where and what environment they’re looking at. You can just automatically create one of these ephemeral environments based on your poll request.

We also have rebuild webhooks. So you can use these to trigger builds based on whatever business logic you need. That is also something that is live today. With that, we also have instant rollbacks. So if something’s not working, you can redeploy to a previous version of your site. And we also have real-time build logs and the ability to cancel a build. So if something is going wrong, go ahead and cancel it and we can look at the errors, make changes and rebuild that site. And then another one many of you are asking for was password protection, just like in traditional WordPress. You might have preview environments that you want your customer looking at and approving. Put a password on that so you can make that live and allow them to use it.

And now I’d like to tell you a little bit more about the future. We have a number of great things on the horizon for Headless WordPress in the next year. But there are a few of them that I would like to talk about that are closer to reality and you should be seeing in the next few months. The first of which is advanced monitoring and analytics. We’ve heard from you very often that you would like more information, more analytics, what is going on with my site? What does my traffic look like? What do the access logs look like? So we want to surface that to you so that you can see that without having to ask for it.

You can use that to optimize your campaigns, your code, your site. We’re also going to be adding in GraphQL monitoring and alerting. What is exactly going on with your GraphQL queries in real time? So that you can optimize for performance. I mentioned the Super Bowl ad earlier, that required a lot of tuning of various queries in order to have the most optimal experience. So what if we can give you all of that information at your fingertips so that you can optimize that yourself as you’re doing your build? That’s the goal here.

We also want to improve the CI/CD experience. So we do automated deploys and things like that for you today, but there are deploy pipelines that don’t exist. For instance, if you’re making a change to both the backend and WordPress and your front end in Node, how do you deploy both of those at the same time so that you get the right experience? So we’re going to be working on ways to allow for built pipelines to be built and managed for your projects with deployments being managed across WordPress and Node. Another big item that we hear a lot is Headless personalization and localization. As these websites become more and more targeted, we want to ensure that you have all the tools you need in order to personalize and localize your sites. So we are working on ideas of how that might come to fruition.

We would really love your help because when I say Headless personalization or localization, that can mean a lot of things to many different people. So I’d love to hear from you to understand what are the things that you’re doing in this area so that we can ensure that we build the right capabilities for you. We’re also building a Headless Block library. This is an extension of our React Gutenberg Bridge project that I talked about earlier, and I hope you go and attend the session on that later in our DE{CODE} event. But we want to provide a library of the most commonly used blocks in WordPress so that they’re all set up and wired for you to use out of the box so that you don’t have to go and do that work.

And you’ll also be able to use those as a pattern to wire in your own custom blocks as you need. The long-term hope that I have for this is that developers will start to be able to build libraries of reusable components and perhaps share them with the community so that we can all get a head start on our projects. And speaking of Faust, I want to call out the continued investment that we have here. As I said earlier, Faust uses Apollo, React and Next.js. And we are going to be adding more features to our platform to support those components so that they run faster, more securely and make it really easy for you to develop on Headless WordPress.

So now I want to talk about a really interesting topic. This question was asked in a roundtable session we had a few weeks ago. The question, I think, exactly was, why is everybody pushing Headless so much? And so I want to talk about, is Headless the right thing for every project? I think at a high level, it’s not. You need to pick the right tool for the job. And Headless really excels when you’re looking to build something that is very fast and performant on a modern web stack that you want to be very, very secure. It excels when you have complicated projects. It excels when performance is paramount.

Would I recommend you build a small brochure site on Headless? Not necessarily, unless it was a heavily trafficked site that had a history of poor performance and you needed to improve its performance, or if you were looking to experiment. They are the perfect site to go experiment with because they’re generally small. But if you’re doing a large media site or an e-commerce site, I do recommend Headless because it’s going to allow you to build these sites in a very composable way, bring data in from other systems, build out omnichannel experiences, and be fast and performant.

And I recommend Headless WordPress because we know publishers love WordPress. It’s the best CMS out there for managing and developing content. So why wouldn’t you want to do that in a way that makes the publishers happy and the developers happy, all while having an incredibly performance site that is very flexible.

I wanted to thank you for your time today and your continued feedback and partnership as we continue our mission to make WordPress a great Headless CMS. We have a number of other Headless sessions today at the DE{CODE} event. I encourage you to watch those, ask questions, as we’re always really excited to work with you and hear the things that you think are important to developing your sites. Thank you.