The webpage in question has more than the advisable 1500 elements in the DOM structure.
Why is this important?
Optimal performance in web browsers is usually achieved with DOM trees that have no more than approximately 1500 nodes. An excessively large DOM can negatively affect your site by:
Network efficiency and loading times: A bulky DOM results in additional data for the server to send, potentially leading to prolonged page loading durations, especially for content that doesn't immediately display on screen.
On-the-fly performance: User interactions and scripts cause browsers to recalculate node positions and style applications, which can become sluggish with a heavy DOM coupled with complex CSS rules.
Memory usage: Using broad selectors like document.querySelectorAll('li') could mistakenly hoard references to a plethora of nodes, leading to substantial memory usage on your audience’s devices.
What does the Optimization check?
The Optimization is activated for internal URLs with a DOM containing over 1500 nodes.
Examples that trigger this Optimization:
The Optimization is set off for any URL where the DOM overflows 1500 elements, as demonstrated below:
<!-- Example of a large DOM structure with too many elements -->
How do you resolve this issue?
Characteristics of an efficient DOM tree include:
No more than 1500 nodes.
A maximum depth of 32 nodes.
A single parent node not having over 60 direct children.
Strive to generate DOM nodes when necessary and eliminate them once they're no longer in use.
Inspect your website by loading the page and identifying non-visible nodes. Consider whether these nodes can be removed from the initial document and created in reaction to an action from the user, for instance, a scroll or mouse click.
Contemplate the following inquiries:
Is your layout relying on nested tables?
Are extra div elements being used just to solve layout complications?
Could your markup be improved semantically and structurally?
Further Reading
Minimizing DOM size (Lighthouse documentation)