Avoid excessive DOM size

Hello guys

I’ve found already some threads here regarding the topic.

In one of them you pointed out this thread on stackoverflow

There’s an “interesting” suggestion there:

  1. Using a simpler web page builder as many page builders add a lot of code bloat
  2. Changing the theme

Ok, however - on my site I tried to avoid this issue using a simple structure as much as possible - no extra divs and no extra nesting of elements but by design of the theme only. Like section->row->column->element…

pagespeed insights still freaks out with 2,321 elements.

Removing elements from the page is not an option. I guess I’ll ignore it for the moment as pagespeed gives me a rating of 85 on mobile and 99 on desktop. I thought you might want to know though.

Hi Ondrej,

Thank you for reaching out to us. You can take some actions to reduce the DOM size:

  1. Dividing large pages into multiple pages.
  2. Don’t use third party plugins that aren’t well-coded.
  3. Remove any unneeded elements from the page.
  4. Don’t hide elements during breakpoints or with CSS.
  5. Keep everything updated.

For improving the site performance, you can follow https://theme.co/docs/how-to-improve-site-performance

Hope this helps!

Hello nabeel
I’m afraid I did not make myself clear enough. My performance is great actually. It’s just pagespeed insights points the issue with the DOM out. And the numbers are “massive” for just some header divs hidden when on mobile…
And pls. define “unneeded”.
Cheers
Ondrej

Hi Ondrej,

Here, unneeded means the elements may not be in use or you can adjust them with other existing elements. Such as, Gap element to add space, which can be adjusted using padding or **margin. And I would also request that you follow the suggestion given by my colleague to reduce the DOM size.

Thanks

Sadly, with Pro you will always have a ton of divs

Hi Guys,

The number of DIVs can be limited depending on your design and you structure the elements on the page.

Thanks.

OK guys this is not about pointing fingers or any other allegations of wrong doing. I KNOW the DOM size is determined by many more factors than just the theme or the cornerstone. But your suggestions are partially hard to check - like “avoid poorly coded plugins”… hmmm really? How should we know in first place? By the review? ahh… what ever.

  1. suggestion “large pages” - checked
  2. suggestion “plugins” see above
  3. unneeded elements - checked
  4. hide elements during breakpoints - not an option - yes I KNOW
  5. updates - checked

we should still have a proper conversation about this:

pls don’t get me wrong - I think the Idea of a loader and a consumer is awesome. I like it very much. the modern sliders are from my perspective still kinda “DOM hungry”. Again don’t get me wrong: I’ll will use them with pleasure before I utilize any other sliders plugin though!

And I know that it’s not all what google says really correct. those pagespeed insights are to be taken with a little grain of salt anyway. Still - folks who think to know, what they are talking about rub this sh… around my nose all the time. I’m just passing the memo. So, if there would be in the future some way how to simplify the sliders structure - woooohooooo you have my money already.

psst: if you suggest as solution a link to something that states “swap product” - its at least confusing. if you would point this out as BS beforehand - well that would be a whole different story.

Hey @VRANKOVINA,

Apologies for the confusion here. “Divitis”, though bad, might be necessary for styling and animation purposes. I believe the current elements won’t be changed so the possible solution here could be to develop simple elements like you get <h1>Text</h1> using a simple headline element. I’m not sure how much style and animation you can achieve with that, but I’ll list this out as a feature request.

If you want your page to be lean, you need to currently code your own HTML.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.