Headless WordPress

Stephen Evans
Thursday 11 November 2021

The term ‘headless WordPress’ has become a common topic for discussion within the WordPress community. What is it and why does it matter?

What is headless WordPress?

Headless WordPress is for situations where WordPress is not used to render the content to make a web page. Instead, content managed by WordPress is delivered via other systems that convert the content into a web page or other digital content.

There are different ways to do this, but a common combination is to use a plugin called GraphQL to convert WordPress content into a format (typically JSON) that can be read by a system such Gatsby or Next.js to create web pages.

Gatsby are and Next.js based on a JavaScript framework called React. Gatsby can only create static pages, but the pages load very quickly. On the other hand, Next.js can generate dynamic and static pages that are good for large sites.

Speed is everything

One of the main advantages of headless WordPress is the reduced time it takes to render a web page. This is particularly important as Google now analyses how web pages are rendered. Google’s ‘Core Web Vitals‘ analyse three specific page speed and user interaction measurements:

  • Largest contentful paint (LCP) – how long it takes for the main content on a page to appear.
  • First input delay (FID) – the shortest time it takes for a user to start interacting with a page.
  • Cumulative layout shift (CLS) – how stable a page is as it loads e.g. a page might move around as different elements are loaded.

Together these are part of Google’s page experience score i.e. the page’s overall usability.Google core web vitals

Headless WordPress solves these problems by optimising any images and pre-rendering the page.

Pros and cons

In addition to fast page rendering, headless WordPress offers the following benefits:

  • Modern developer experience – having a decoupled architecture means that workflow is no longer tied to WordPress.
  • Better security – fewer WordPress plugins to maintain and support.
  • WordPress interface is used to add and edit content, which reduces training and user management.
  • Flexibility – can use different data sources alongside WordPress and combine to make a single output.
  • The same source data can be used for different applications.

Cons

On the other hand, there are some downsides to this approach:

  • Need to keep associated systems (e.g. Gatsby) up to date as well as WordPress.
  • Previewing content is more difficult.
  • Not good for teams who are not comfortable with JavaScript.
  • Not good for teams without developers.
  • Not good fit for teams who build sites via multi-purpose themes like Divi.

Conclusion

Headless WordPress technologies give the University the potential to publish content in creative ways that improve the user experience. At the moment we do not have any specific plans to use headless WordPress, but we will be keeping a close eye on how this technology evolves.

For further information about headless WordPress see the resources from WP Engine.

Related topics

Share this story