Static WordPress Frontends – What’s the Fuss About?

We got an interesting question from someone curious about NorthStack Serverless:

“I don’t see why a static WordPress front-end is a benefit. Why not just use a CDN to speed up your site?”

It’s a great question. As “headless WordPress” becomes more popular, more WordPress users are wondering how a static front end could benefit them.

So, why are static frontends for WordPress a thing? Why would someone choose to go that route over simply using WordPress to serve the frontend website the way it was intended to?

In this post I’ll answer these questions in-depth. First, let’s make sure we’re clear on some technical details…

What is headless WordPress?

WordPress could be divided into two major sections:

  • The backend – This is the admin area where posts, pages, comments, plugins, themes, and users are managed. The backend is everything you see after logging into the WordPress Admin area. The backend = the CMS (content management system)
  • The frontend – This is the website that is generated and served to visitors by WordPress. The data you created via the backend is served to website visitors in the form of pages, posts, comments, etc. The frontend = the website that visitors see. 

“Headless WordPress” is using the WordPress backend to create and manage content but not using the frontend to display it as a website. It’s using the WordPress GUI as a means to interact with and edit a database. The “head” is the frontend of WordPress and it is not there. Hence the term, “headless WordPress.” 

Often, the alternative method of delivering the WordPress website content is a static frontend… 

What is a static frontend?

A static frontend (a.k.a “static website”) serves only static HTML files, JavaScript, CSS, and other assets like images. These files aren’t executed by the server in any way.

There are no database calls and no code processing needed to send these files to a browser when they’re requested. There’s a request from a browser and the files are sent.

It’s hands down the fastest way to serve and load a website. 

There are a number of static site generators that are becoming popular like Jekyll and Gatsby.

What is a dynamic frontend?

A dynamic frontend is generating the webpage when a request to load the website comes in. A PHP file is loaded by the server, the code is processed, and data is pulled from the database to be inserted into the webpage. Then that webpage is sent to the website user.

WordPress uses a dynamic frontend. WordPress puts together pages by running PHP code that tells the server where to insert data from the database and various files, like images, to create the webpage. 

Of course, all this happens in computer-time, very rapidly. With a high-quality WordPress host, even large dynamic sites can load in a couple seconds. However, we know that those couple seconds can seem like an eternity. And, the longer it takes the site to load, the more impatient the website visitor becomes. This can lead to many visitors abandoning your “slow site.” The longer it takes to load your website, the worse the user’s experience of using your site.

The benefits of using a static frontend

WordPress is a great CMS. It’s easy-to-learn, it’s well-organized, and it’s incredibly flexible and powerful thanks to thousands of contributors to its codebase and the enormous ecosystem of plugins and themes third-parties have created. It’s truly in a league of its own when it comes to community support.

But, WordPress is not known for its speed. Certainly, using an experienced WordPress host that leverages intelligent caching tools and a CDN helps, but if you use the WordPress frontend it’ll never be quite as fast as a static frontend site because there’s nothing faster than simply sending files. Any processing time or database calls add to the total time it takes to serve a webpage to a visitor.

It’s difficult to overstate how important website speed is:

The faster the website, the better, and there’s nothing faster than a static site. This is the major reason most people would opt to use a static frontend rather than WordPress’s dynamic frontend.

Doesn’t a CDN solve the speed problem?

As the questioner noted, “if speed is what you’re after, won’t using a CDN accomplish the same result? Is a CDN the same thing as a static frontend?”

They both can help with speed but they’re doing it in different ways so they don’t replace each other. To explain how and why, we need to break down exactly what happens when a server receives a request for a WordPress web page from a browser:

  1. The request hits the server to get the page content.
  2. PHP processes that request on the server side.
  3. PHP executes database queries and gets the information that it needs.
  4. Once the data is obtained from the database, PHP finishes building the page and passes it back to the web server (Apache, NGINX, etc.)
  5. The server responds to the user with the page or other information that was requested.

A Content Delivery Network (CDN) loads files from a server that is near the browser to minimize latency. That’s what a CDN does. So, when using a CDN we could add a sixth step to this process:

  1. The images and other files that make up the webpage are loaded from a server near the browser (rather than from the server that created the webpage).

Here’s what happens when a server receives a request for a web page from a static site:

  1. The request hits the server for the page content.
  2. The server responds to the user with the page or other information that was requested.

Basically, serving a static site eliminates steps 2-4 in the process of serving a dynamic site. The time that would be spent on those steps is saved so the web page loads much faster. 

And, if we’re using a CDN with a static site, we could add a third step:

  1. The images and other files that make up the web page are loaded from a server near the browser (rather than from the server that created the webpage).

Hopefully this highlights what a CDN does and doesn’t do in this process. It can help with the speed that specific files load, but it’s not involved at all with the server processing necessary for a webpage to be produced dynamically by PHP. That’s a separate process that happens on a different server. The processing that a PHP server does tells the browser where to load those images from, but at that point the time-consuming steps of creating a dynamic web page have already happened and delayed the load time. 

To put it another way, adding a CDN to that process can help compensate for slowness by loading files as quickly as possible. But, the loading of the files only happens after the page is generated by the code and the database queries. 

Static front ends reduce load time by eliminating the need for server-side processing. CDNs reduce load time minimizing the amount of time it takes images and other files to download.

So, the fastest way to serve a website is from a static site generator and using a CDN. They both help with speed but by dealing with separate factors that contribute to website slowness.

How static site generators work with headless WordPress

A static site generator compiles a website’s files and stores them on the server as static files — ready to be served when a browser asks for them. The dynamic processing that would occur each time a visitor asks for the site, such as when the WordPress frontend is used, is done ahead of time. This means there’s no delay caused by processing. The files are requested and they’re sent.

To put those website files together, a static site generator can use the data stored in a headless WordPress instance. Using WordPress’s REST API, the content’s data is pulled from the database and used by the static site generator to assemble the site.

Rather than styling the content with a WordPress theme like you would with a traditional WordPress site using the WordPress frontend, the styling is handled by CSS generated by the static site generator. 

Conclusion

To summarize, using a static site generator to create webpages from a WordPress instance is the best of all worlds. You get a screaming fast site and still get to use the familiar and powerful WordPress backend to manage your content.

A CDN can also improve your website’s speed, but it doesn’t eliminate the delay caused by server processing. To create the fastest website possible, you should use a static frontend and a CDN because they both help with website performance in different ways.

0 Comments