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
Lighthouse flags pages with DOM trees that:
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.
The simple answer is “remove excess elements” and “combine multiple elements into one”.
For example, you could change:
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
Don’t hide unwanted elements using CSS
Don’t use poorly coded plugins
Use Pagination and Lazy Load