I'm using ACF to set a series of slots in my page. So the admin screen contains a series of Flexible fields, each of which can be one of the following:
Works great on the front end. I can drag-and-drop, choose posts/categories/tags etc. from the database and generally have a good time.
Unfortunately when trying to add a new slot to the page on the back end, or load it, the time taken to add a new row is killing it. I've only got a few rows there, but it's already taking unacceptably long; I'm fairly sure when I add a few more we'll start getting timeouts.
The only information I can find about this problem is this support thread on the ACF forums (https://support.advancedcustomfields.com/forums/topic/slow-backend-v-2-5-7/), which basically says:
Yeah, if you've got a big database and try and use flexible fields it's gonna do that.
I'm also using ACF-JSON to no noticeable effect.
Has anyone else experienced this problem? What did you do to work around it? Or did you have to abandon?
(Ideally my solution would keep flexible fields, as they're exactly what the client wants in this situation - but if there's another solution that enables them to edit the back end in linear time, I'm interested in that too.)
It's due to the way ACF loads its repeater fields and flexible fields. All layouts in flexible fields are loaded into the dom and hidden, and an absolute ton of javascript logic is applied to all of them. When you click to add a new "slot", it runs a clone of the hidden layout, and attaches all the necessary event handlers to the clone.
If you check the timeline for page DOMContentLoaded vs load (final render event), DOMContentLoaded is actually pretty fast most of the time, but load (everything that happens after the html is loaded) is what eats up most of that time, and memory.
Best I've been able to do is activate the new "Delay Initialization" option for WYSIWYG content fields, and disable "Stylized UI" and "AJAX" options for select, checkbox, and radio fields.
Ultimately, the biggest issues come from having deeply nested repeaters/flexfields inside repeaters/flexifields. Avoid nesting those as much as you can and page load time will decrease significantly.