Speeding up Advanced Custom Fields

Speeding up Advanced Custom Fields

Advanced Custom Fields is an excellent plugin for WordPress. Using Local JSON will improve the performance of any website using it.

May 2018

Introduction

Advanced Custom Fields is an excellent WordPress plugin. It’s a go-to install for me on pretty much any WordPress website I work on. It allows the creation of highly customised and intuitive systems, and has a great API for extending its capabilities.

When working on large websites with many field sets it can lead to a performance hit however. Every time a page is loaded, the database is queried to get the relevant fields and the data saved to each. This can increase the amount of DB queries significantly.

A feature called Local JSON can help reduce the number of queries massively. I’ve seen great performance improvements with this, and there is really no reason not to use it.

Please note: this feature is only available in the PRO version.

It boils down to ACF saving all field groups in JSON files in the theme folder. This means that any time a page is accessed and fields are loaded, they are being fetched from the files rather than querying the DB.

Another advantage to this approach is that it allows the fields to be managed with a Version Control system. This helps keep local, staging, and production environments synchronised at all times.

Baseline

I would recommend echoing the result of get_num_queries() to the footer and going through the website. This will show you exactly how many queries to the DB are currently being made. This can be checked again after enabling local JSON to see the difference. Ensure get_num_queries() is removed when you are finished.

Lets get going!

Enabling Local JSON is simple. All you have to do is navigate to the theme folder, and create a new folder named ‘acf-json’:

wp-content/themes/theme_name/acf-json

This folder can be changed if needed (See ‘Saving Explained’ and ‘Loading Explained’ here), but I tend to keep it in the default location.

Local JSON will now be enabled. All there is to do now is save each individual field group in WordPress. This will generate uniquely named JSON files in the ‘acf-json’ folder for each field group. This file will contain all the configurations for the field group which would normally be held and accessed in the DB.

Advanced Custom Fields local JSON file

Also, create an ‘index.php’ file in the ‘acf-json’ folder. The contents of the file can stay blank if you want. This helps with security as the folder can’t be browsed publicly:

wp-content/themes/theme_name/acf-json/index.php

When moving between development environments Synchronized JSON will kick in. For example, if field groups are created or updated on a dev branch and merged into staging, the updated JSON files will overwrite the old versions on staging. On the staging website, a ‘Sync available’ tab will be shown in the ACF menu. All you have to do is click the ‘Sync’ button and the custom fields will update to reflect the changes. This process is brilliant for keeping all environments up to date.

Finishing up

That’s really all there is to it. For something so easy to enable (this can be built into a boilerplate theme) with great performance benefits, it really is a no-brainer.

At this point, it’s worth running through the same get_num_queries() function as before to see the improvements that have been made. Hopefully it works as well for you as it has for me!

By the way, if you don’t already have it, the Pro version is an excellent investment which provides additional features such as Local JSON, is inexpensive and helps to support the developer. Go for it!

Want to hire me for a project, or to fix something on your website?

Get in touch 😀