[Support request] Avoid an excessive DOM size 852 elements

[Babak]

Hi;
Using a site from the site library and below is the lighthouse error I am receiving. Any way to address that?

Avoid an excessive DOM size 852 elements

[Ying]

Hi there,

I just did a lighthouse test for your site, it gets 100 on performance:
https://www.screencast.com/t/OCS5Jmbo9P5

May I ask where did you see the error?

[Babak]

Thank I know it is getting 100 but that was not my question.
How did I end up with Avoid an excessive DOM size 852 elements
and how could I eliminate this issue to not having such deep DOM.

[Fernando]

Hi Babak,

It’s basically saying that you have elements nested under numerous parent elements, and that you have relatively numerous elements in one page.

“Every ‘element’ displayed on a page whether that be a paragraph, a menu item, an image or the invisible stuff for things like containers and grids all generate HTML. Each one consisting of 1 or more DOM Nodes.”

For instance, the element being reported having a high DOM depth is this element: https://share.getcloudapp.com/GGulBrBb

Moreover, having more than 800 nodes in a page produces a warning in which case yours exceeds 800.

To put that into perspective – generatepress.com has less then 20.

Here are some recommendations to resolve this: https://www.corewebvitals.io/pagespeed/fix-avoid-excessive-dom-size-lighthouse#:~:text=Workaround%20for%20%27avoid%20excessive%2DDOM%20size%27

Hope this clarifies. 🙂

[Babak]

Thanks for explaining the DOM. If so, please take off sites with one massive DOM from your library so subscribers won’t waste time on them.
Again this is the site I downloaded from the site library.
If you don’t want to remove such a site, the good practice is at least to write how many DOMs the user will end up with.
Just wasted a day…

“body.home.page-template-default.page.page-id-1032.wp-embed-responsive.post-image-aligned-center.slideout-enabled.slideout-mobile.sticky-menu-fade.sticky-enabled.both-sticky-menu.no-sidebar.nav-float-right.separate-containers.header-aligned-left.dropdown-hover.full-width-content.offside-js–init”

[Fernando]

This site does exceed the DOM warning limit by a little but our developers made sure that it still performs extremely well in spite of this. It’s a compromise between design and performance. There’s some designs that are hard to implement without exceeding the limits.

In any case, if it exceeds the DOM limit, deleting a few elements or section/s should remove the warning completely as it only exceeds the limit by a few nodes. The warning limit is 800 DOM elements and the Error limit is 1400 DOM elements.

Thank you for understanding and thank you for the feedback! I’ll let the site developers know regarding this and we’ll definitely try to improve our sites further. 🙂

[Babak]

Thanks and for me back to square one. The unfortunate part is when you don’t know how many Dom elements you have and do the mistake as I did you have to reset the whole thing.
Really hope you will incorporate the DOM quantity in your library.

[Fernando]

Thank you as well Babak! To remove the warning, instead of going back to square one, might I suggest simply deleting or moving a section of the front page to a different page.

[Babak]

Thanks for the suggestion, my friend. I don’t have much to move but the counter which does not have many DOM elements. Again thanks for the suggestion.

[Fernando]

I see. I’ll reach out to our site developers so we can further improve the sites for and from the site library in the future. Thank you once again Babak! Hope you have a nice day!

[Author]

Posts