Moving to WP Headless

In the rapidly evolving world of web development, WordPress (WP) remains a reliable and widely used platform. However, as technology advances, improvements are necessary to keep up with the demand for faster, more efficient, and user-friendly websites. Transitioning from a traditional WordPress setup to a headless WordPress configuration is an effective solution. This allows you to leverage the power and flexibility of modern front-end technologies, such as Astro, without abandoning your existing WordPress site or incurring significant costs. The result is a dramatic improvement in website performance, user experience, and overall efficiency.

Target:

• Convert your current WP to WP Headless and detach front end with Astro
  • This implementation only covers homepage content blocks (NavBar & Footer discarded and hardcoded)

Source:

• Site: lunaphore.com
• Use a custom template that use
  • Custom templates for pages
  • ACF Layouts Flexible Content Block

Step 1

Starting with the homepage.

First of all, create the layout.

• The head is on V0, I'm copying and pasting from the template.
• Hero is hardcoded for the time being
• Remember menu & footer will be hardcoded

Step 2

First attempt to get all ACF layouts into Flexible Content Block, not bad.

Now the first Standard block across pages, the Hero!

Step 3

KO 🥊 to the Page Builder

GIF

Summary & Analysis

I must say that refactoring a custom template isn't straightforward, at least when each block has some magic.
E.G:

• Latest Activities get posts from 2 different PostTypes and order them using a custom field. To solve this I created a custom endpoint to get this info ready to use.

To complete this task (implement Astro, create custom endpoints on WP, deploy the solution) I spent more or less 3 working days.
If I have to estimate how much you could spend to migrate a whole WP to WP Headless & some FrontEnd Framework, you should do it in a working week or less, depending on the complexity of the site.

I have gathered some metrics, check this out but remember the objective of this project:

• Convert your current WP to WP Headless and detach front end with Astro
  • This implementation only covers homepage content blocks (NavBar & Footer discarded and hardcoded)

lunaphore.com

lunaphore (WP Headless + Astro)

As a summary of these metrics using Static pages the site get all the info from building time (when you deploy it) this method reduce Loading Time, Page Size and the amount of Requests.

So, is it worth it?

Absolutely, if you weigh up the effort/gain, only considering the improvement in loading speed it is worth it.

However, on common tasks like Re-styling or Re-designing you can use this approach to solve it. Most websites have non-complex estructures and migrations to static or semi-static front ends is quite easy.