Archived topic
DOM - Maximum Child Elements
3 replies · Started by maxime on November 10, 2020
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.
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.
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.
No problem. :)
