Are you looking for ways to provide a better customer experience and improve your website performance?
Chances are you’ve thought about Headless WordPress.
This approach comes backed with benefits around site speed and security that are definitely attractive. But, there are also drawbacks if you don’t set it up correctly.
In this guide, I’m going to talk you through Headless WordPress in-depth and show you why it’s become such a popular enterprise solution. And, help you discover whether it’s the right choice for you. Let’s go!
Who are we to write about Headless WordPress?
Hello! My name is Jonny Allbut and I’m the Head of Experience here at Illustrate Digital.
I’ve spent the last 2 years working on research and development of Headless WordPress CMS setups and progressive technologies. This involves working directly with enterprise clients and real-life WordPress users.
If you’d like to find out more about our R&D, you can read more here: Research & Development at Illustrate Digital.
If you’d like to delve into our headless service offering, you can find out more here: Headless Development for WordPress
Okay, that being said, let’s get into the meat of it…
What actually is Headless WordPress?
Headless WordPress is a way of structuring your site that allows you to utilise the benefits of the WordPress CMS in your back end, while the front end user interface of your site is built in a completely different technology
The content of your site is “fetched” by the front end of your site using an API (Application Programming Interface).
Think of a business that uses the same content displayed on their mobile app’s help section, as it does on the FAQ section of their main website.
The content may be exactly the same, provided by the same CMS, but it uses a different technology to display it to the user.
This headless CMS setup provides a high level of flexibility to the site owner, and makes content management easier, by keeping it all in one place.
Is WordPress a good platform for headless?
Out-of-the-box traditional WordPress sites aren’t set up to operate as headless solutions. But it is a fantastic option as part of a headless setup. In fact, it’s probably the best.
I don’t want you to think that’s an unfounded claim written by WordPress developers like me, so let’s explore why!
WordPress is a platform built for content
WordPress’s focus is helping people to publish and create their own content.
It’s also the platform – and user interface – that so many marketers and site owners have become accustomed to. Our Head of Marketing has never worked with a different CMS in his entire career!
That means headless WordPress implementation has fewer barriers than, say, using Drupal, because there’s no need to migrate to an entirely new way of doing things.
WordPress can easily be decoupled
The process of ‘decoupling’ means removing the front-end and back-end elements of a website to be used independently, something that’s easily achievable in WordPress.
WordPress and its codebase were built like LEGO. You can take it apart, develop as required, and then put it back together again in a working solution. Better still, it’s continually developed by a large and active community of incredible volunteers!
This means it’s ready and raring to be used in a headless context (there are more complex requirements to really make this work, but we’ll cover those shortly).
WordPress has a fantastic API
To be used as a headless CMS, your platform needs to be able to easily pump its content through to a different application or technology.
The REST API in WordPress, along with the many useful coding hooks, allows it to be easily integrated with various front-end options through which to serve its content.
Even though the flexible WordPress API is fantastic, it’s worth considering introducing a powerful API query tool such as GraphQL, especially if you’re looking to really hone the performance of your site.
5 Benefits of Headless WordPress Approach
We’ve already explored why headless WordPress is a great option for those looking to find a content management system. But what are the benefits of using headless for your brand’s main website?
There are several important factors that can provide real gains to enterprise organisations when thinking about headless WordPress.
1. Increased security
Security is one of the most common WordPress concerns we hear about.
Headless WordPress sites have the CMS on a different server to the front end which makes them much more difficult for hackers to target, increasing security.
The front end of a website is typically the most vulnerable part of your website. But, by decoupling the front and back ends with a CMS, it’s trickier for someone to access your data.
Better still:
If the front-end of your site is taken offline, headless WordPress offers the ability to deploy your valuable content quickly to a new location. Restore your backup, change the server settings and you’re back online without losing any of your content or sensitive user data.
2. Better performance
We know how important a fast-performing website is for your business.
One of the key benefits of using a headless CMS is performance. By decoupling the front-end and back-end of a website or application, headless architectures can offer increased performance and speed, as well as enhanced scalability. This does wonders for you marketers looking to boost your core web vitals!
Without having to render everything from a single server, a headless website can load much faster. This is especially beneficial for users on mobile devices or with slow internet connections.
3. Easy management
Taking a headless approach to your online presence can help to simplify content management and deployment across different apps and websites.
By decoupling the content layer (CMS) from the presentation layer (front-end), it becomes easier to make changes in one place and have those changes shared instantly across all of the connected applications.
A headless WordPress site can provide a single source of truth for content, making it easier to ensure consistency and accuracy across all of your digital properties. Ultimately, operating a headless website can help you to save time and effort when it comes to managing your web content.
4. Headless WordPress works at scale
The ability to access greater levels of scalability and flexibility is a great benefit of headless when compared with traditional website architectures.
Headless means you’re not tied down to a single front-end development framework, or a single server setup. This means you can pull the same, valuable content into an entirely different design, app, or even a completely different server setup.
If you’re operating a large-scale site that needs to be able to handle large amounts of traffic or rapidly changing content, a headless website will be ready to scale with your organisation and the needs of its users.
5. Lots of opportunities
Headless provides so many brilliant opportunities for brands to take advantage of, many of them we’ve named above such as speed, security, and overall experience.
According to the technology profiler BuiltWith, headless accounts for only 0.3% of the world’s top 1 million websites. This means there’s a real and immediate opportunity for the brands who are willing and able to make headless work for them.
In years gone by, headless was something little understood by agencies and brands alike, but this is no longer the case.
With heavy research and experience from agencies like Illustrate Digital, there’s a safe and innovative route to a better digital experience for the brands willing to be early adopters of headless.
5 Cons of Headless WordPress Approach
Building a headless site isn’t a decision to be taken lightly. In fact, it’s something that is best left to large and enterprise organisations. Here’s why…
1. Headless is easy to mess up
We’ve spent a lot of time helping companies fix broken headless WordPress projects. These are often caused by 2 things:
- A lack of WordPress knowledge
- A lack of sensible, realistic planning
A headless WordPress installation is very different to the traditional WordPress setup. Even though the content database and management system might look the same, headless WordPress changes the workflow, mindsets, and even the skillsets of a web development team.
And without careful planning, one small piece of the puzzle out of place can make the world of difference. With more potential technologies at play, it’s important to ensure they work in harmony with each other and not against each other.
Be aware… it’s absolutely possible to create a slow, low-performant website when building headless.
2. Overdoing it with plugins
It’s really easy to over-engineer a site with headless WordPress.
You need to be careful with the amount of plugins you’re looking to add. This can easily break any WordPress site, and that impact is amplified when you add headless into the mix.
Too many plugins can have an impact on your website speed and be detrimental to your load times, and negate some of the benefits of having a headless site to begin with!
3. Headless can be costly and time-consuming
There are lots of benefits to having headless WordPress installation: but they do come at a cost.
You need to develop custom code to query and display your content in the front-end application. This adds complexity and often requires additional development resources.
You’ll also need to manage and deploy 2 separate codebases (one for the CMS and one for the front-end application). Again, there are obvious benefits to this like security and scalability, though it can add some decent overhead in terms of coordination and release management.
4. You’ll be missing out on WordPress’ plug-and-play approach
Since your headless front-end is detached from your back-end, the majority of the time installing a WordPress plugin isn’t going to work as you expected.
The plug-and-play approach you might be familiar with on your current WordPress content setup simply isn’t possible when building a headless site as each plugin will need to be customised to work with your choice of setup.
Fear not though, at Illustrate Digital we’ve already created a library of plugins that we’ve made compatible with a headless WordPress setup. If you’re interested, reach out and speak to us about it!
5. Using Headless WordPress is the wrong choice for most websites
Based on my 25 years of experience in development, let me tell you…
The decision to create a headless WordPress website is the wrong one for the majority of site owners.
Some of the time, headless becomes a passion or vanity project for a developer or development team who fancy “having a go” and expanding their horizons. This is an obvious scenario when headless isn’t the right fit.
But…
For brands and website owners that need ultimate security, require brilliant scalability, need to serve content to multiple platforms, or simply have the passion to be using and exploring the latest tech, headless is absolutely the right choice and should be a strong consideration.
What does it look like to build a headless website using WordPress?
Building a website using headless from a developer’s perspective can be costly and time-consuming, but it provides increased performance and scalability.
We know by now that, when done correctly, a headless website can provide a single source of truth for content and make it easier to manage changes across different digital properties.
Let’s explore what it looks like to go about creating a headless WordPress site.
Choosing a frontend framework
This will be the biggest and possibly also the hardest decision for any developer thinking about building a headless website.
With so many options out there including React, Next, Vue, Gatsby, and a heap of others, it’s important to choose the front-end framework that provides the best fit for the organisation and the team of developers working on it.
Without going into really fine detail, here are the main things worth thinking about when choosing a front-end framework for headless:
- What is your team of developers already familiar with?
- What is the knowledge gap between what your developers already know and what they’ll need to know?
- How long will it take to upskill developers for the framework?
- What does the market look like for developers who specialise in your chosen framework, are they readily available, expensive, etc?
- How well supported is the framework in terms of documentation, a global community, and so on?
Above everything else, engage your development team in the decision-making process. There’s nothing worse than being told to work with something you don’t believe in and it’s always more productive to have a highly engaged group of devs!
Choosing your integration method
A headless backend takes care of content management tasks like publishing new posts or pages, moderating comments etc. When it comes to passing this content through to the front-end you’ll need to think about the best way to integrate and publish it.
There are several different ways to integrate and your choice depends on your requirements. Here are a few options to consider:
- GraphQL – this is a query language for your API and makes integrating faster. It’s well supported and has become the most popular option for integrating WordPress with a headless front-end. This is largely because it boasts higher performance than some alternative options.
- Hosted, e.g. WP Engine’s Atlas platform – taking advantage of a platform like Atlas takes away some of the manual work in creating your own integration and is mostly ready out of the box. This will also allow you to use most, if not all, front-end frameworks for your headless site.
- Hosted, e.g. Gatsby Cloud – if you’re considering using Gatsby as your front-end framework, then Gatsby Cloud may be a decent option. Similar to Atlas, Gatsby have created an already-integrated solution for headless using WordPress. The big downside here is that it’s designed to work with a Gatsby front-end only, so no other front-end frameworks can be used with this solution.
- Developing with the WordPress REST API – developing your own solution is certainly the most difficult of these options, however it’s the one that’ll give you the greatest control and flexibility. There’s an element of reinventing the wheel here, but if you’re using a little-known front-end or have some really unique functions then this may be the best option for you.
Choosing the right hosting infrastructure
By now you’ll have gotten to grips with the idea that a headless approach is more complex than a straightforward WordPress setup. This also means it’s going to take more effort and thought around how and where you host the different aspects of your headless infrastructure.
Before we share some of the options available to you, it’s worth pointing out that one of the brilliant things about headless is your ability to choose when it comes to hosting.
Put simply, not everything needs to be in the same place and it may be the case that your back-end and front-end are better optimised in different locations, or indeed all-in-one.
Here are some of the ways you can think about hosting WordPress as part of a headless setup:
- WP Engine’s Atlas platform – this is our favourite and recommended option for one main reason, simplicity. WP Engine has put a lot of effort into building a highly optimised, all-in-one solution for your managed headless infrastructure. With your choice of front-end frameworks, a ready-to-go API, and some other really helpful features it’s a seriously strong contender for your headless hosting with WordPress.
- Managed WordPress and unmanaged front-end – at the very least, when using WordPress, we would advocate using a managed hosting platform for the CMS aspect of your headless site. There are multiple platforms to choose from such as WordPress VIP, WP Engine, Pagely, Kinsta, and so on. With many of these options, you’ll need to think about where to place your front-end(s) but you’ll have a great deal of flexibility here. As a suggestion, think about places such as Amazon Web Services (AWS), Google Cloud Platform (GCP), or DigitalOcean.
- Unmanaged front-end and back-end – this isn’t the approach we’d advocate but it’s certainly an option. Choosing unmanaged for both your front-end and back-end is essentially choosing ‘beast mode’. You’ll get a lot of fine-grained control over all aspects of your platform, but you’re largely on your own when it comes to optimisation, performance and security.
Choosing and reengineering your WordPress plugins
One of the most important things to recognise when using WordPress as part of your headless architecture is that all of your normal plugin choices won’t just work out of the box!
Here’s some advice on what you need to think about when it comes to plugins and headless WordPress:
- Be picky about the plugins you’d like to use – you’re going to need to spend more time developing plugins for compatibility than you’d like to. For this reason, be as picky as possible about the plugins you’d like to use. Keep it to the basics, for example you could use an SEO plugin like Yoast, a form plugin such as Gravity Forms and something to help manage your blocks like Advanced Custom Fields.
- Consider your multiple front-ends (if required) – in a headless setup you’re not just installing a plugin to work with WordPress, it also needs to work with as many front-ends as you’re outputting to. This may require more work, so be sure to think about how the plugin will affect your website, app, web app, and so on.
- Use as few plugins as possible – similar to the first point, always use the lowest number of plugins possible as part of your WordPress setup. Why? Because you’re going to need to keep on top of updating, maintaining, and patching these plugins as part of your headless site. Don’t create more work for yourself than is needed and don’t put too much reliance on a third party, especially for vital functionality.
- Research before developing – what’s great to know is that a bunch of developers have gone before you in creating solutions to headless WordPress challenges. Always Google the plugin you’d like to use, alongside the word ‘headless’ to see if anyone has solved the challenge and open-sourced their code. This could save a heap of time and means you won’t need to reinvent the wheel.
More information about headless WordPress
If you’re hungry to learn more and delve further into the world of headless WordPress and how it can have a positive impact on your brand’s digital experience, you can explore our in-depth whitepaper which is available to download on our website here: Your In-Depth Guide to Headless WordPress.
