Improving DOM depth

Improving DOM depth

After analyzing our pages on gtm metrix we see that there’s a problem with the DOM depth.

We build our pages with different blocks, items and so on. But we don’t really have 10 layers deep nested in a block for example. However I see that builder renders a lot of html tag around a block itself before it hit’s the actual content you created.

Now we have this recommendation to have less deep nested structure. But how can this be changed? I don’t see an option in the improvements on the way we build it. Is there a way we can remove / have less builder blocks around our content?

Builder content link

Builder public api key
d0689e89408f48c29d9edda8d29a6894

Screenshots or video link

Code stack you are integrating Builder with
React

Hi @Geert,

Nested DOM elements are an integral part of the builder workflow for different components that it offers, and they can’t be changed. Ideally, that should have very little or no impact on performance. At a high level, Builder will not cause a performance hit and any content within Builder will be optimized. We will recommend you check out our blog High performance no-code .

If you still looking to improve DOM depth then a possible option could be using the Custom components.

Custom components are ideal when you want to accomplish goals such as:

  • Adding unique functionality to your site for special use cases
  • Systematizing design and content patterns
  • Standardizing your design system with custom components-only mode, which makes only your custom components available for use in the Visual Editor
  • Customizing blocks
  • Overriding built-in blocks