[Resolved] Avoid an excessive DOM size

[HT]

I see issues with Avoid an excessive DOM size as per Google Page speed

I have seen the comments like “A common culprit if you’ve ‘failed’ this audit in PageSpeed Insights is your WordPress theme. Heavy themes often add large volumes of elements to the DOM, and may also include convoluted styling that slows your site down.”

Is this something we can do to reduce from the perspective of a theme.. I have seen previous threads but not sure it is relevant or not.

[Leo]

Hi there,

The theme itself is already optimized for performance so I’m not sure if the issue is coming from the theme itself:
https://generatepress.com/fastest-wordpress-theme/

The only optimizing tips we adapt for our site is to use Autopimize:
https://docs.generatepress.com/article/configuring-autoptimize/

[HT]

Well, I’m already using Autoptimize with similar configuration ;(

[Leo]

Have you tried disabling all plugins except GP Premium to test?

Perhaps this thread provides some useful info:
https://generatepress.com/forums/topic/how-to-reduce-excessive-dom-size/

[HT]

Can we do reverse engineering to understand or troubleshoot this issue rather than going through the pain of disabling all the plug-ins….

If that make sense?

[Elvin]

Hi there,

Can we do reverse engineering to understand or troubleshoot this issue rather than going through the pain of disabling all the plug-ins….

The issue with this is, it’s possible that it’s not just 1 culprit.

But to be specific, the element being flagged on the page you’ve linked isn’t exactly added by the theme, but by the user. The DOM structure isn’t controlled by the theme as excessive DOM size flags are dependent on content.

The elements being flagged are the tables on the page. It’s added by a WordPress core block (table block). The flag is basically saying “you have contents that have too many nested elements within it”.

[HT]

Sure. I got your point. Can you give some hint how to troubleshoot further apart from disabling all plugins 😀

[David]

Hi there,

You’re actually being flagged for two issues:

1. Total DOM elements: 1848 – anything over 1500 will report this error.
Every single piece of content added to a post eg. paragraph, heading, image, table, adverts, comments etc all count towards the total DOM elements.

2. Maximum Child Elements: 63 – anything over 60 will be flagged. The culprit on your page is the Table titled:

1607 – Windows 10 Build Numbers – it has 63 rows…

The same as #1 applies here for that specific element.

The only way within WordPress to reduce the DOM elements is to remove content from the post, whether that be what you write/add to your post or content being added by plugins or other 3rd party scripts such as adverts.

If its not possible to reduce the amount of content, there there isn’t much you can do about this and you have to accept that it ‘may’ impact the page load performance.

[HT]

Thank you much for the details.

Is there any option for very long posts to load only when the user scrolls down “similar to Lazy Load Comments” could help? or it is not going to help at all?

[David]

There isn’t any out of the box method to ‘lazy load’ HTML.
The simplest method would be to add Page Breaks to the post – so you split the post in to two pages.

But personally i would ignore it – its only a diagnostic report, it has no direct impact on performamce. It only becomes a problem if you the site requires a lot of CSS and/or JS files to calculate its layout – none of which is being flagged under Opportunities in the PSI report.

[HT]

Thank you!

[David]

You’re welcome

[Author]

Posts