Headless WordPress: Thoughts and Tests

When you read about headless WordPress, you might conclude that a headless WordPress site will be faster, more secure, more expensive, and more difficult to manage than running a WordPress site on any hosting provider of your choice.

I am always playing and testing stuff so I wanted to see if a headless WordPress was the next step for my sites in the evolutionary process.

These are my thoughts about running a few tests using Simply Static and Cloudflare pages.



Headless WordPress: Security

Headless WordPress security is unbeatable since there is no connection between the static pages visitors and bots see and your database and WordPress installation.

You won’t get hacked, even if your WordPress has outdated plugins with vulnerabilities.

Your login pages won’t be brute-force attacked either.

You probably won’t have to worry about figuring out how to create WordPress rules.

Note: I sleep well at night knowing that my sites are protected by Cloudflare Firewall rules and that my hosting provider isn’t garbage


Headless WordPress: More Expensive

I have been checking some services and it gives me the impression that Headless WordPress hosting providers are not meant for small projects.

This is the pricing of Strattic Headless WordPress hosting:

$40 per month for hosting is out of my league.

If you don’t think that paying $40 to $99 per month for hosting, you can use Cloudflare Pages, Netlify, or Digital Ocean Apps, all of which have free tiers.

If you like what CloudFlare is doing, you should give Cloudflare pages a try.

Netlify has also a very generous free plan

Netlify Free Plan

I keep hearing good things about Netlify’s free plan but I haven’t had the chance to create an account and play with it.

If I added my main site to Netlify, I would probably have to upgrade to the Pro Plan

Paying $19 per month for hosting the static files of one site is way more expensive than my current Cloudways plan.


Headless WordPress: Difficult to Manage

If you read tutorials about how to turn your site into a Headless WordPress site, you will probably feel overwhelmed when you read about a local environment for WordPress, GitHub Desktop, programming languages, frameworks, and libraries as part of the process.

Doing it yourself isn’t that difficult but it requires learning new things.

If you only know how to click buttons, having a Headless WordPress site and managing yourself isn’t for you.

If you are a WordPress user who enjoys learning new things, having a headless WordPress will unlock a new level of expertise


Headless WordPress: Faster Sites

Headless WordPress sites load in under a second, they can be really fast, however, you can have a fast WordPress site if you build sites keeping speed in mind.

My sites with no external scripts load fully in less than 250 ms, sometimes in less than 200 ms, so I am sure that I don’t have much to gain when it comes to embracing new technologies that promise blazing-fast sites.

For these tests, I am using:

  • A site hosted on Digital Ocean and fully cached by CloudFlare using CloudFlare APO.
  • The HTML version of that exact same site uses Simply Static and Cloudflare Pages.

The site loads these 7 requests:

RequestsSize
HTML16.0KB
CSS5.00KB
CSS1.80KB
JS31.6KB
JS2.42KB
JS3.52KB
Favicon1.81KB

I could reduce the second style and second script if I wanted to test a faster version of the site but that was the current state of the site at the moment of running these tests.


WordPress Site with Cloudflare APO

I am subscribed to CloudFlare APO and these are the results of four tests that I ran

These are the results of the first GTMetrix test:

Connect 55ms
Backend26ms
First Contentful Paint162ms
Large Content Paint162ms
Time to Interactive194ms
Onload time210ms
Fully Loaded Time228ms

These are the results of the second GTMetrix test:

Connect 69ms
Backend30ms
First Contentful Paint163ms
Large Content Paint163ms
Time to Interactive200ms
Onload time201ms
Fully Loaded Time220ms

These are the results of the third GTMetrix test:

Connect 17ms
Backend32ms
First Contentful Paint115ms
Large Content Paint115ms
Time to Interactive150ms
Onload time151ms
Fully Loaded Time170ms

These are the results of the fourth GTMetrix test:

Connect 16ms
Backend24ms
First Contentful Paint102ms
Large Content Paint102ms
Time to Interactive137ms
Onload time140ms
Fully Loaded Time166ms

As you can see, the results, tend to get slightly better after we run more and more tests.

166ms for fully loaded time is quite impressive.

Since seeing is believing, this is a screenshot of the fourth test

Now let’s check how the site performs using Cloudflare pages.


Headless WordPress with Cloudflare Pages

Creating a static site to run a few tests isn’t that complicated, just install the Simply Static plugin by Patrick Posner

Simply Static Headless WordPress

I downloaded the copy and uploaded the folder to Cloudflare Pages.

The site loads 7 requests:

RequestsSize
HTML14.7KB
CSS5.01KB
CSS1.78KB
JS31.7KB
JS2.44KB
JS3.53KB
Favicon1.78KB

As you can see the size of the files will be pretty much the same once they are converted to static pages

These are the results of my first test:

Connect 28ms
Backend59ms
First Contentful Paint190ms
Large Content Paint190ms
Time to Interactive221ms
Onload time343ms
Fully Loaded Time536ms

These are the results of my second test:

Connect 57ms
Backend80ms
First Contentful Paint264ms
Large Content Paint264ms
Time to Interactive302ms
Onload time310ms
Fully Loaded Time428ms

These are the results of my third test:

Connect 29ms
Backend67ms
First Contentful Paint196ms
Large Content Paint196ms
Time to Interactive236ms
Onload time363ms
Fully Loaded Time555ms

These are the results of my fourth test:

Connect 26ms
Backend170ms
First Contentful Paint438ms
Large Content Paint438ms
Time to Interactive474ms
Onload time480ms
Fully Loaded Time542ms

This is a screenshot of the fourth test

Cloudflare APO was still superior to Cloudflare Pages.


Headless WordPress Hosting Providers

These are some headless WordPress Hosting Providers that might guarantee better results that the ones I got with Cloudflare pages:

#1Shifter
#2Strattic
#3Netlify

Conclusion

I got kinda excited about turning one of my sites into a Headless WordPress site because the idea of doing it sounds kinda cool.

If you know what you are doing when building and securing sites, you won’t gain much by jumping into the Headless WordPress bandwagon.

I recognize that the speed tests carried out could be different If I would have used this or that headless hosting provider but they are way too pricey to consider.

I don’t really know if people using those headless managed hosting services would get better results than the ones I git, but let me tell you this, a fully loaded site in less than 166ms is kinda hard to beat, and even if you beat it, what taking it to 130 ms gets you?

My sites aren’t Amazon or Walmart, I am not gaining millions of dollars by reducing the fully loaded time by 20ms.

This post was written by God and this is not the Bible, run your own tests and choose wisely.


More about Hosting WordPress

These are other posts related to hosting for WordPress you might want to check out:


Manuel Campos, English Professor

Manuel Campos

I am José Manuel. I am writing about things I know and things that I am learning about WordPress. I hope you find the content of this blog useful.

WP SURFER

home

about

privacy

contact

© 2024 WP SURFER • Made with Love in Costa Rica