[Resolved] DOM – Maximum Child Elements

[maxime]

Hello,

For one of my post, GTmetrix and Lighthouse say to Avoid an excessive DOM size. I attached the URL of the post involved.

The problem comes from the number of Child Elements which is in <div class="entry-content" itemprop="text"> and a value of 174.

It’s the longest post I have written. So I’m wondering if I can’t do anything and it’s normal because it’s a long post so I let it go. Or if there’s a trick with GeneratePress to maybe lazy load the 174 value or other solution ?

Thank you for your help.

[Elvin]

Hi,

The sheer amount of content is the reason why you get that excessive DOM size issue.

You can either:

Try putting texts in 1 paragraph block if possible. This will reduce the amount of <p> elements on the page.

You can also try splitting the posts into 2 to not get this report from page tester sites but it may cause bad user experience.

While Lazy loading DOM Elements is possible(with JS libraries), this can cause problems like broken eventlisteners or page not displaying properly. As for what’s the best library to do this, I’m afraid we can’t recommend any as this is a pretty advance site customization that is out of our scope.

A wise man once said:
"Have you cleared your cache?"

[maxime]

Okay I understand 🙂
I’ll take care of the amount of elements then, I prefer instead of doing some JS libraries.

Thank you Elvin for your help.

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts