In the first implementation of the homepage for Jari Claes I used the headless CMS Strapi. Even though the user experience was great, we decided to change the architecture, because this did come with high hosting cost. Therefore I reimplemented the backend with Wordpress which can be hosted cheaply on traditional hosting providers, because it is based on PHP, but is not traditionally meant to be used as a headless CMS.
Table of Contents
Open Table of Contents
An Introduction to headless CMS
Traditionally, Content Management Systems like WordPress consist of a backend, where the websites data is stored and managed through the admin panel, and a frontend, the website displayed to visitors. In a headless CMS however, the frontend and backend are separated.
Whilst the backend is still implemented with the familiar WordPress interface to create new blogs and pages, the frontend / actual website is no longer dependent on WordPress and can be implemented independently and with complete control by the developer. This is possible thanks to the integration of the REST API into the WordPress framework.
The following illustration (source) visualizes the interaction between WordPress and the frontend via an API interface:
Advantages
Familiar admin panel
According to Statista, 63% of Websites powered by Content Management Systems use WordPress. This means that there are a lot of users familiar with the WordPress admin panel to create content for those sites. With the headless CMS approach we can keep the admin panel but gain flexibility in our technology choice for our frontend.
WordPress admin panel:
More flexible design
The independence of the user interface of the actual website from WordPress leads to the flexibility to choose from a broad range of state of the art web development frameworks for the implementation. As I had already worked with the JavaScript framework React in several other projects, I chose it for the implementation of the frontend.
React frontend of jari-claes.ch:
This leads also to a more future-proof tech stack as the change of technologies is simplified. If a specific frontend framework becomes obsolete of outdated it can be easily replaced by another.
Increased Performance
Most WordPress sites facing performance issues often have resource-intensive themes and plugins, slowing down the website. A cleaner performance optimized frontend can help to improve web performance.
Why web performance matters
- 53% of website visits are
abandonedif a mobile site takes longer than3 seconds to load. Source - A 1 second delay leads to a reduction of 7% in conversions, a 3 second delay to a 20% reduction Source
Web performance result
A common metric to measure web performance is the Lighthouse Score. The following figure shows the test results for jari-claes.ch based on Googles PageSpeed Insights:
A score above 90 is considered to be a good web performance. As you can see, with a score of 96, we manage to achieve an excellent web performance through this architecture.
Multi-Channel Content Publishing
In specific use cases one of the biggest benefits of using Headless WordPress is that it simplifies multi-channel content publishing. Thanks to the REST API, the content can be requested from multiple websites of applications. The content could be displayed on different websites, mobile apps, etc. all created from the same admin panel.
This is not required in this project though, as there is only a single page to display the created content.
Implementation
WordPress Rest API
The REST API is a developer-oriented feature of WordPress. It provides data access to the content of your site, and implements the same authentication restrictions — content that is public on your site is generally publicly accessible via the REST API, while private content, password-protected content, internal users, custom post types, and metadata is only available with authentication or if you specifically set it to be so.
More information: https://developer.wordpress.org/rest-api/
The data from the Rest API can be fetched from the React frontend using JavaScripts fetch API.
Advanced Custom Fields Plugin
With the ACF plugin we can add additional fields to individual post types. The following example shows the fields I added to Social Media Account post types:
The data of those custom fields are transmitted through the RestAPI as well, thanks to the ACF to REST API plugin.
Custom Post Type UI
The Custom Post Type UI plugin can create custom content / post types. For example, for Jaris homepage I created post types for Sponsoren, Social Media Links, Blogs and individual pages. In combination with the ACF plugin, individual custom fields can be added to each post type.
Recommendations
In general, as a developer, I would highly recommend the usage of a headless CMS as I have a high appreciation for the greater flexibility in UI design. An improved web performance should also not be neglected.
Would I recommend WordPress as a headless CMS?
Even though the implementation works as intended and hosting the solution is very affordable, this implementation does also come with its downsides. The main one being the limited functionality of the WordPress backend when used as a headless CMS. The previous implementation with Strapi came with a far better admin experience when it comes to creating new content for the website.
This is something one can get used to and it does not limit the user experience of the actual users/visitors of the website.
Other headless CMS solutions can get very expensive, for example, Strapi cloud is at least $29 a month and cost can go up to $499, depending on your needs. Even though WordPress does not come with the best developer experience in this use case, I consider it to be a viable option for smaller websites.