Brian Whelan

61 Merrion Square South, <br />
Dublin 2, D02 EW25, Ireland

Main Nav

<p><em>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?</em></p>
<h2><span data-preserver-spaces="true">What is a headless CMS, and why is it different?</span></h2>
<p><span data-preserver-spaces="true">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. </span></p>
<p>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.</p>
<p><span data-preserver-spaces="true">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. </span></p>
<p><span data-preserver-spaces="true">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. </span></p>
<p><span data-preserver-spaces="true">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.</span></p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-14181 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-700x522.jpg" alt="" width="700" height="522" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-700x522.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-250x187.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-768x573.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-1536x1146.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-2048x1528.jpg 2048w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/andrii-leonov-P5nZwlbTngI-unsplash-1-120x90.jpg 120w" sizes="(max-width: 700px) 100vw, 700px" />
<h2><span data-preserver-spaces="true">Advantages of going headless</span></h2>
<h3>Fast loading page speed</h3>
<p>One of the main benefits of using a headless CMS is better page speeds. Page speed is important for these core reasons:</p>
<ul>
<li>Faster loading web pages provide a better user experience for your users.
<ul>
<li>Faster pages mean that Users can complete their purchase or conduct any other business on your site in a shorter journey with less friction.</li>
</ul>
</li>
<li>Google now explicitly considers page speed as part of its ranking algorithms.
<ul>
<li>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&#8217;s by a Search Engine.</li>
</ul>
</li>
</ul>
<h3>Why is Headless WordPress faster?</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-14180 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-700x466.jpg" alt="" width="700" height="466" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-700x466.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-250x166.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-768x511.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-1536x1022.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash-120x80.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/kirklai-_RM0idp0M2c-unsplash.jpg 1920w" sizes="(max-width: 700px) 100vw, 700px" />
<h3><span data-preserver-spaces="true">Greater control and flexibility</span></h3>
<p><span data-preserver-spaces="true">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. </span></p>
<p>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.</p>
<h3>Better Security</h3>
<p><span data-preserver-spaces="true">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. </span></p>
<p><span data-preserver-spaces="true">This means an attacker will have a much harder time finding your database adding an extra security layer to your site.</span></p>
<h3>Multi-Channel Content Publishing</h3>
<p>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.</p>
<p>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.</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-14183 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-700x466.jpg" alt="" width="700" height="466" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-700x466.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-250x166.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-768x511.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-1536x1021.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-2048x1362.jpg 2048w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/venti-views-g-5tSFQSb7w-unsplash-120x80.jpg 120w" sizes="(max-width: 700px) 100vw, 700px" />
<h2>Traditional WordPress Vs Headless WordPress</h2>
<h3>Differences in development</h3>
<p>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&#8217;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.</p>
<h3>Differences in functionality</h3>
<p>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&#8217;re used to and the development team will need to create other solutions.</p>
<h3>Differences in hosting</h3>
<p>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.</p>
<p>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.</p>
<img decoding="async" loading="lazy" class="aligncenter wp-image-14182 size-large" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-700x393.jpg" alt="" width="700" height="393" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-700x393.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-250x140.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-768x431.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-1536x862.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash-120x67.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2022/09/taylor-vick-M5tzZtFCOfs-unsplash.jpg 1920w" sizes="(max-width: 700px) 100vw, 700px" />
<h3><span data-preserver-spaces="true">Which businesses can benefit from Headless WordPress?</span></h3>
<p><span data-preserver-spaces="true">Any business that is looking to deliver a more satisfying and frictionless experience for their Users will benefit from using Headless WordPress.</span></p>
<p><span data-preserver-spaces="true">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. </span></p>
<p><span data-preserver-spaces="true">Including:</span></p>
<ul>
<li><span data-preserver-spaces="true">Blogs</span></li>
<li><span data-preserver-spaces="true">Brochure websites</span></li>
<li><span data-preserver-spaces="true">Marketing websites</span></li>
<li><span data-preserver-spaces="true">eCommerce websites</span></li>
<li><span data-preserver-spaces="true">Web app</span></li>
<li><span data-preserver-spaces="true">Mobile apps</span></li>
</ul>
<h2><span data-preserver-spaces="true">Headless WordPress is here to stay</span></h2>
<p><span data-preserver-spaces="true">With WordPress powering over </span><a class="editor-rtfLink" href="https://w3techs.com/technologies/overview/content_management" target="_blank" rel="noopener"><span data-preserver-spaces="true">40% of the web</span></a><span data-preserver-spaces="true"> it is clear that it isn&#8217;t going anywhere any time soon. Headless WordPress is very quickly being adapted across the enterprise space with a study from </span><a class="editor-rtfLink" href="https://wpengine.co.uk/blog/state-of-headless-study-finds-adoption-surging-in-the-enterprise/" target="_blank" rel="noopener"><span data-preserver-spaces="true">WP Engine finding that 64% of enterprise respondents are currently using headless,</span></a><span data-preserver-spaces="true"> and 90% of those who don&#8217;t plan to evaluate this in the near future. </span></p>
<p><span data-preserver-spaces="true">With massive performance benefits from updating to headless, Headless WordPress is looking to be the future of WordPress Development.</span></p>
<p>If you want to experience a Headless WordPress website for yourself, just continue to browse through our site and witness the low friction experience.</p>
<p>If you want to understand more about what Headless WordPress can do for your business, <a href="https://www.friday.ie/contact/">talk to us today</a>.</p>
<p>&nbsp;</p>


Author: Brian Whelan

Headless WordPress: Why Losing Your Head Is The Future