Many of you will have interacted with/used a traditional website, you login to an admin area (back end of the website), where you add your pages to the website. This admin area is tied closely to the front end of the website. So the front end is built using the same technology the CMS/system uses.

However, all things eventually evolve. There is now an alternative method growing in popularity for developing websites – headless website applications.

What this does, is have the admin/back end area of the website as a separate entity from the front end. This provides a number of benefits including speeding up the load speed, giving developers more freedom in what they build the site in.

Here we are going to look at how they both work and see what the difference between them are. But before we dive into what a headless website application is, and the benefits it has over a traditional website, we need to understand how a traditional website works.

Here’s a quick reference for a few terms we’ll be using in this article.

• Front end – the part of the website visitors interact with
• Back end – the admin area of the website where the pages are added.
• CMS – Content Management System such as WordPress, Craft, Drupa.
• HTML – The language the web is built in.

Traditional websites

Most people who have a website are familiar with CMS’s such as WordPress, Craft, Drupal, Joomla etc.

These have a front end, where visitors view and interact with the website, and they have a back end or admin panel, where the pages and content are created and updated.

The front end and back end are tied closely together. When building a website like this, you pick a CMS you want your website built-in, the website is then designed and built using the technology of that CMS.

How they work

For this example, we’ll look at how the process works if a new page was created.

1. A page is created, the contents and any assets (e.g. images) are stored in a database.
2. When the page is published, the CMS outputs the content as an HTML page to the front end.

Headless websites

Now a Headless CMS Architecture, has similarities to a a traditional website, it can use a CMS/admin area, such as WordPress, Joomla, Craft, and when pages are created, they are output as HTML. Where it differs though is how the pages created in the back end area, are translated to the front end of the website.

The front end is built separately from the back end, meaning that it is not built using the CMS technology. A template for the design of the website is created, which, when filled with the content and assets (e.g. images), will be the front end of the website.

So the content and pages created in the admin/back end area need to be transformed/translated so that the front end design template can read it.

How it works

For this we’ll take the example of adding a new page to the website:

1. A new page is created, the content and any assets (e.g. images) are stored in a database.
2. The page is converted into a format that the front end can read (such as XML or JSON).
3. An API fetches the page from the back end and connects it to the front end template.
4. The front end design/template renders this into HTML using a modern application framework.

Why use a headless website application

So, from the steps above, you can see there’s more of a process of how the website takes your pages and brings them forward for your visitors to see.

This has a number of benefits, both the website developers as well as the people using your website.

More freedom for developers

First off, the developers get the benefit of not being restricted to building the front end of the website using the CMS technology. They can use the technology of their preference. Because the front end is built outside the confines of the CMS, the developers are restricted or held back on what they can do due to the CMS chosen.

Problems easier to diagnose

It also means that problems with the front end or back end of the system won’t generally be related or cause issues with the other one. If there’s a problem with how something looks or works on the front end, it’s a front end only problem, not something caused via the admin area. This then helps narrow down where the problem stems from.

Better load speeds

As the website back end is separate from the front end helps remove the dragging issues the CMS has. The front end simply reads the file of where the content and assets are to be on the page and renders them. Any plaguing issues such as plugins, the way the CMS is built slowing down the website, are not there.

With studies showing website loads speeds making a tangible difference on bottom lines, a headless website can drastically improve them compared to a traditional website build. Also, Google uses website load speeds as a minor ranking factor, and every little helps.

The drawbacks

However, it’s not all paradise and rainbows, there are some drawbacks to this method of website development.

More difficult to preview

As there are no templates and as it takes a front end template being built, and it translating the pages from the back end into that, it can be difficult to create previews.

Has to be custom built

As the front end needs to be built to render the pages and content from the back end, the front end needs someone to custom code that up. There are no templates for this type of website.

Can take longer to build

As you can imagine, having to develop the front end of the website and get it connected up to the back end generally means that it takes more time to build.

Overall, a headless website application may take a bit more time and work to build, but it does offer numerous benefits in terms of customisation, flexibility and improved load times.

If you’re looking for a headless website or have any questions, please get in touch.