If you've ever run the Google Chrome lighthouse page audit tool you may have encountered the error that looks like this:

A warning about too many DOM nodes means that the HTML structure of your website is too dense.

Why is big DOM bad?

A sizable DOM (Document Object Model) tree can detrimentally affect your webpage's speed in a few ways:

In terms of network efficacy and loading speed

A bulky DOM tree typically contains numerous nodes not immediately visible upon page load. This unnecessarily escalates data consumption for your users, leading to a sluggish load time.

Concerning real-time performance

During the interaction of users and scripts with your webpage, the browser needs to continuously recalculate the positioning and style of nodes. When paired with complex styling rules, an extensive DOM tree can seriously impair rendering speed.

Regarding memory capability

If your JavaScript employs broad query selectors like document.querySelectorAll('li'), you might inadvertently hold references to a vast array of nodes. This could potentially exceed the memory capacity of your users' devices.

How to debug the DOM size

A nice way to visualize and debug your DOM nodes is using Microsoft Edge's 3D inspector:

You can open the 3D inspector by:

  • right clicking on a website in Edge, clicking inspect
  • either running CMD + SHIFT + P to open the command window. Type "3D" and hit enter.
  • or click the plus button in the tab bar and click 3D View

The 3D allows you to quickly ascertain which elements are most deeply nested. This gives you a hint as to which elements should be reduced in depth.

How to reduce the DOM size

The best way to fix the excessive DOM warning and improve SEO is to manually rewrite nested components to use fewer nodes. This means when several elements were used, one can be used instead:

Before

After

This can be a time-consuming task but it is worth it to pass the lighthouse page tests. To debug which nodes should be consolidated inspect the page with Chrome developer tools and find the most nested elements:

Conclusion

Page size and load times are vital for optimum SEO performance and ultimately user conversion. If you encounter the error in Lighthouse then use the 3D viewer in Edge or the Chrome developer tools to hunt down the deeply nested nodes and consolidate them into more shallow trees.