Builder form field – slow

[martinsnajdr]

Hello,

I would like to ask you if there is a way to prevent a Builder field from being very slow quite quickly? I have approximately 15 different blocks (usually with 2-4 fields). Every page uses about 6-10 blocks. The load time of the form gets from about 0.5s (without any blocks added) to 4s (for 10 blocks added).

Is there any way to lazy load the blocks? I thought enabling collapsed state could help, but it's just hidden using Alpine, so the DOM tree is always loaded completely.

Thanks.

[danharrin]

Have you tried in production? With PHP Opcache? Do you have debugbar installed locally, as that can slow it down? How long does it take to load the form without any form components, as a baseline?

[danharrin]

How do you recommend we solve that though, I'm pretty sure we don't have "useless" html elements lying around

[martinsnajdr]

I would work around the collapsed state. So load the inner HTML only when the block is opened. Most of the time you just open the form, open one block and make changes to it. No need to load the whole thing. Also the collapsible/collapsed state should be default setting for the builder field, because of that. Also there could be an option to store the collapsed state next to the type name in json, so it can be loaded as opened if you want. And there is also a room for some kind of pagination or "load next/load prev" functionality.

The builder field is quite powerful, but needs much more optimizing than other fields and not just be another type of field lying next to text inputs and selects…

[chosten]

I have the same problem.
My document size reached 8Mb, lots of blocks and in a multilingual setup. I use tabs to separate languages and each has a builder.
I also think that lazy loading the block's content and/or the tabs could be a solution. For the loading at least, I believe the save action will still be slow because Livewire will send back the full page again.

Any advice or tips to achieve this or improve the performance ?

[martinsnajdr]

Well, if there are not many solutions, the only one is to split the form into some "sections." Something like adding another layer and loading only the blocks from that layer.

e.g. we have a long page full of blocks. This page can be divided into chapters. Chapters used to be just a block type, but the chapter is now a model that belongs to a certain page model, and the chapter contains the blocks.

This works, but not for every case. I don't know if there are any improvements in the latest Filament version because we didn't upgrade yet...

[InfinityXTech]

@martinsnajdr did you resolve this?