What Is It?

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.

The more elements (headings, links, sections, paragraphs...) you have on your page, the slower the page can get. 

A large DOM tree can slow down your page performance in multiple ways:

Network efficiency and load performance

• A large DOM tree often includes many nodes that aren't visible when the user first loads the page, which unnecessarily increases data costs for your users and slows down load time.

Runtime performance

• As users and scripts interact with your page, the browser must constantly recompute the position and styling of nodes. A large DOM tree in combination with complicated style rules can severely slow down rendering.

Memory performance

• If your JavaScript uses general query selectors such as document.querySelectorAll('li'), you may be unknowingly storing references to a very large number of nodes, which can overwhelm the memory capabilities of your users' devices.

Why Does It Display?

Lighthouse flags pages with DOM trees that:

• Have more than 1,500 nodes total.
• Have a depth greater than 32 nodes.
• Have a parent node with more than 60 child nodes.

Like mentioned above, large DOMs can really impact page speed, and you might have no idea that this is an issue. Even if your page html looks clean, JavaScript, AJAX and other elements can be adding to the DOM. 

If you’re using pagebuilders like Elementor (4 million websites do) to create your website you need to be especially mindful of the amount of elements you’re including in your site. DOMs can get wildly bloated because pagebuilders wrap their content in tons of divs which enable effects and animations. 

An example: Adding a single H2 element results in this code.

Modern computers and browsers can handle this, but it’s just something that you should be mindful about as excessive elements that are unneeded will bloat the site and slow loading speeds. 

How Do You Fix It?

The simple answer is “remove excess elements” and “combine multiple elements into one”. 

For example, you could change: 

<div id="nav-element">

    <ul>

        etc..

    </ul>

</div>

Into:

<ul id="nav-element">

    etc..

</ul>

But on WordPress that’s a bit difficult because in many cases, you don’t have access to the raw HTML. Instead, you need to incorporate workarounds.

Split large pages into multiple pages

• Breaking up large pages into multiple pages reduces the numbers of elements present, and makes the pages load quicker. 
• For example, you can move the “Services” section from the homepage and make it into its own page. On the homepage, you can add links and short services descriptions. 

Don’t hide unwanted elements using CSS

• Hiding things with CSS by using display:none; does not remove it from the HTML markup, serving visitors unneeded elements. 

Don’t use poorly coded plugins

• Some developers save time by not optimizing their plugins, which leads to more elements on your website. You can test multiple plugins that do the same thing and see which has the smallest image on the pagespeed of your site.

Use Pagination and Lazy Load

• Lazy load archives with Ajax infinite scroll. 

Lazy load YouTube videos -- if you don’t do this you’ll add MBs of render blocking content to your website. You can use a plugin like Lazy Load by WPRocket or code a solution yourself.