Skip to main content

Headless WordPress: Why Losing Your Head Is The Future

Brian Whelan's avatarBrian Whelan16th Sep 2022
TechnologyWeb Development

Developers are increasingly separating WordPress and utilising its backend as a headless Content Management System (CMS), but what exactly is a headless CMS, and how can it benefit your business?

What is a headless CMS, and why is it different?

Content Management Systems like WordPress comprise of two separate parts that are joined together in one package, the frontend (or head), and the backend (or body). The front end is what a user sees in the browser when they visit your website. The backend is where you create and customise the content, and this is then stored in a database.

In a traditional setup both the frontend and backend are built using the same coding language and framework. Using WordPress normally you can manage your content as well as the front-end visuals using themes or block editors from the dashboard.

With this traditional setup, developers are limited to a theme-based, and plugin structure and customising can be difficult and limited to whats available within the WordPress ecosystem.

In a Headless CMS essentially we separate these two parts essentially removing the head from that body, hence the name headless. In doing so we can turn the backend into a data source that can then be accessed by any frontend framework.

Content can be managed like it always has been through the dashboard, but developers are free to use any frontend technology which allows for greater customisation, and the ability to take advantage of newer frontend technologies.

Advantages of going headless

Fast loading page speed

One of the main benefits of using a headless CMS is better page speeds. Page speed is important for these core reasons:

  • Faster loading web pages provide a better user experience for your users.
    • Faster pages mean that Users can complete their purchase or conduct any other business on your site in a shorter journey with less friction.
  • Google now explicitly considers page speed as part of its ranking algorithms.
    • Having better page speed than your competitor could be the factor that brings you more organic traffic if all else is equal when your page is compared against a competitor’s by a Search Engine.

Why is Headless WordPress faster?

WordPress is built using php and pages are built with php templates. When a user requests the page the server needs to gather the content from the database, load the content and build the page using the template and then display it in the browser.

In total an average of 30 actions are needed to load each webpage and this will run every time a user navigates to a new page. As a result this can cause the website speed to suffer.

Headless websites can be built in whatever coding language a developer chooses as we are no longer limited to php and php templates. This means developers can use modern front end frameworks like React.js or Vue.js.

With these modern frameworks pages are pre build and stored on the server and can be sent to the browser as soon as they are requested leading to much faster loading times.

Greater control and flexibility

While WordPress allows for a great amount of customisation options you are limited to whats available. To extend WordPress you need to use plugins and can be limited to whats available. Plugins can also add more functionality than you actually need leading to a much bigger code base than whats needed.

With headless we are no longer limited to plugins and functionality can be extended in whatever way the developer chooses. This will also cut down on any excess code leading to smaller builds and easier maintainability.

Better Security

With a headless solution, the front end of the site only accesses the content through an API. Therefore the database is completely separate from the front end.

This means an attacker will have a much harder time finding your database adding an extra security layer to your site.

Multi-Channel Content Publishing

With a traditional setup, it can only be used to build a standard mobile and desktop website. However, as a business scales, they may want to use their content on other channels like mobile apps, social media sites etc.

With a headless setup, because we can access the data from any front end we choose we can effectively turn WordPress into a centralised source for multiple publishing sources. This can allow a marketing team to have one dashboard for all their content and when changes occur they will be reflected across all platforms.

Traditional WordPress Vs Headless WordPress

Differences in development

Building a basic WordPress site can be done using themes and plugins and a very simple basic site can be built without any coding ability. Headless WordPress doesn’t use themes and templates so to set up a headless site you will need an experienced developer to do so, or knowledge of frontend javascript frameworks.

Differences in functionality

Because we have separated the front end from the backend Unfortunately we lose some of the default WordPress functionality. Previews will no longer work and an alternative solution will need to be added during development. Some popular plugins have been adapted to be used by headless WordPress websites but not all have so you may not be able to use plugins like you’re used to and the development team will need to create other solutions.

Differences in hosting

Hosting a headless website will be slightly different also. WordPress is traditionally hosted on a server running PHP with the frontend and backend on the same server.

With headless, we can host our WordPress backend on a PHP server and we will then need to host our frontend on a separate server build to host javascript frontend frameworks. This will mean we now have instances on servers to maintain. It also means that if the WordPress backend server was to go down for any reason our frontend will still be live running on cached content until the backend is back up and running.

Which businesses can benefit from Headless WordPress?

Any business that is looking to deliver a more satisfying and frictionless experience for their Users will benefit from using Headless WordPress.

A Headless setup can improve page loading speeds, provide better security, allow for multi-channel and many different types of sites can be built with it.

Including:

  • Blogs
  • Brochure websites
  • Marketing websites
  • eCommerce websites
  • Web app
  • Mobile apps

Headless WordPress is here to stay

With WordPress powering over 40% of the web it is clear that it isn’t going anywhere any time soon. Headless WordPress is very quickly being adapted across the enterprise space with a study from WP Engine finding that 64% of enterprise respondents are currently using headless, and 90% of those who don’t plan to evaluate this in the near future.

With massive performance benefits from updating to headless, Headless WordPress is looking to be the future of WordPress Development.

If you want to experience a Headless WordPress website for yourself, just continue to browse through our site and witness the low friction experience.

If you want to understand more about what Headless WordPress can do for your business, talk to us today.

 

Brian Whelan's avatar

Brian is a UX Developer here at Friday. He is passionate about all things web development, in particular the latest in frontend coding, performance and accessibility standards.

Previous post

Dave Jackson's avatarDave Jackson28th Jul 2022
If you’re not listening to your customers, you will most likely fail.
StrategyUser Experience

Next post

DMA Award on a table
Dave Jackson's avatarDave Jackson19th Oct 2022
Friday shortlisted for Best Agency at the 2022 DMA Awards
AwardsNews & Events