Compare Meta Box Plugins Performance

January 25, 2023

Even though Gutenberg (WordPress Block Editor) has become our new reality and FSE themes are also on their way, we still need meta boxes on our projects. The meta boxes aren’t necessarily classic meta boxes for posts, it could be additional settings fields for taxonomies, users, comments and even options pages. It means that we are going to need them for a very long time. Maybe even forever.

Of course the best way to create any of the mentioned above is to code by yourself. But it could be really time consuming especially if you have a lot of fields (and working on lots of projects).

That’s when metabox plugins come into play. The most popular ones are Advanced Custom Fields and Carbon Fields. Also in this article I am going to mention my own metabox plugin I developed for my needs which is Simple Fields.

The idea of this tutorial is to become more conscious to what plugins we are using to achieve our goals, because there are lots of slow WordPress websites out there, not because WordPress is slow but because sites are overloaded with tens and even hundreds heavy plugins.

Let’s look the truth in the face – of course I am going to tell you how cool my Simple Fields plugin is. But I am not going to say “use it”, because I understand clearly that sometimes its functionality is not enough, then you can probably look at Carbon Fields plugin. And even Advanced Custom Fields PRO has its own advantages though I am not a big fan of it.

Let’s Measure Meta Box Plugins Performance!

In order to do that I am going to use free Query Monitor plugin. The performance metrics we are going to measure are the total number of SQL queries on the page, memory usage and the amount of enqueued CSS and JavaScript files.

Here is how I am going to do the measurements:

Activate one specific plugin (ACF PRO for example) while the other ones (Carbon Fields and Simple Fields) are deactivated.
Create a meta box with Text Field and Checkbox Field.
Do the measurements with Query Monitor on specific pages.

Example of creating a meta box with Text Field and Checkbox Field with ACF PRO plugin:

creating and configuring meta boxes using Advanced Custom Fields PRO plugin — ACF PRO is the only meta box plugin among the mentioned here that has an additional admin UI for fields. In my opinion is not a very good idea to do that. Maybe it is handy and allows to save time for some developers, I get it, but why on earth we even try to mix admin interface with what should definitely be inside `functions.php`? And store it in database?

Add new post

Let’s go to Posts > Add New page (it is actually where the meta box should be displayed) and check the stats in Query Monitor.

	ACF PRO	Carbon Fields	Simple Fields
SQL queries	58	56	53
Memory	44MB	39.8MB	38.9MB
Scripts + Styles	28+35	9+29	9+29

We can see here that ACF PRO includes 19 more JavaScript files and 6 more CSS files!

Edit post

For now let’s go to Posts, edit any of them and pre-fill our custom fields with some random data. Then click save, refresh the page and then check the stats.

	ACF PRO	Carbon Fields	Simple Fields
SQL queries	64	62	59
Memory	44MB	39.8MB	38.9MB
Scripts + Styles	28+35	9+29	9+29

Not much has been changed here. We see a slightly increased amount of SQL queries. The total amount of enqueued JS and CSS files by ACF still blows my mind.

I assume these stats could change(increase) depending on the amount of meta boxes and field types inside them.

Dashboard

I also decided to show you what happens in Dashboard > Home page, because it is worth to know how the other admin pages without meta boxes are affected by the plugins.

	ACF PRO	Carbon Fields	Simple Fields
SQL queries	55	54	52
Memory	43.5MB	39.8MB	39.2MB
Scripts + Styles	5+26	9+30	5+25

In these stats we can see that Carbon Fields plugin doesn’t really care much where to include its additional CSS and JavaScript files.

Meta Boxes are Obsolete in WordPress Block Editor

Did you know that?

Let me explain. So, we have created our easy meta box with a text field and a checkbox. For example using ACF. Then we deactivate plugin Classic Editor (if it is activated) and go edit some post.

Below is what we have:

ACF fields in WordPress Block Editor (Gutenberg) — Fields created with ACF in WordPress Block Editor (Gutenberg)

If you create any classic meta box using any plugin or manually, you will always get the same result.

Weird design is not the only disadvantage of using classic meta boxes in Gutenberg, they also create additional asynchronous requests when saving metadata!

But everything changes when you start to use Plugin Sidebars – the functionality which is intended to be used for that purpose:

add custom fields in Gutenberg plugin sidebars — Fields created with Simple Fields.

Why everyone continues to use classic deprecated meta boxes for posts? Because it is much easier! You just have to know how to work with functions.php file and a little bit of PHP knowledge. In order to create a plugin sidebar – PHP, Webpack, JavaScript, React.js!

Good news here is that my Simple Fields plugin is the only one that allows to create plugin sidebars with just simple code snippets in your functions.php.

# WordPress, Metadata