How to Reduce DOM Size in WordPress

Or in GTmetrix "Reduce the number of DOM elements":

What is DOM?

When your browser receives an HTML document, it must be converted into a tree structure, which is used for rendering and drawing with CSS and JavaScript.

This tree structure is called the DOM or Document Object Model.

Knots All HTML elements in the DOM are called nodes. (aka "leaves" on the tree).
Depth – How long a “branch” goes in a tree is called depth. For example, in the diagram above, the img tag has a depth of 3. (HTML -> body -> div -> img).
Child elements – all child nodes of a node (without further branching) are children.

Lighthouse and Google PageSpeed Insights start flagging pages if one of the following conditions is met:

Total to have more than 1500 nodes.
Have a depth of more than 32 knots.
The parent node has more than 60 child nodes.

How does DOM size affect performance?

Excessive DOM size can affect performance in different ways.

Higher Parse and Render Time (FCP) . A large DOM tree and complex style rules do a great job for the browser. The browser has to parse the HTML, build the render tree, etc. Every time the user interacts or something in the HTML changes, the browser has to calculate it again.
Increases memory usage - Your JavaScript code may have functions to access DOM elements. A larger DOM tree forces JavaScript to use more memory to process them. An example would be a query selector, indocument.querySelectorAll('img')which lists all images commonly used by lazy-loading libraries.
Increases TTFB – As the size of the DOM increases, the size of the HTML document increases (in KB). Since more data needs to be transferred over the network, this increases the TTFB.

How to reduce DOM size technically?

For example, it's technically easy to reduce the size of the DOM:

usage:

<ul id="navigation-main">etc..</ul>

instead of:

<div id="navigation-main"><ul>etc..</ul></div>

Basically, get rid of all possible HTML elements. You can also use Flexbox or Grid to further reduce the DOM size.

But since you're using WordPress, this won't help you much!

How to reduce DOM size in WordPress?

Split large pages into multiple pages

Do you have a page with everything on the site? Like services, contact forms, products, blog posts, testimonials, etc.?

Try splitting them into multiple pages and linking to them from the header/navbar.

Lazy loading and pagination of everything possible

Lazy loading of all kinds of elements. Here are some examples:

YouTube video lazy loading - Use WP YouTube Lyte or Lazy Load by WP Rocket.
Limit the number of blog posts/products per page – I usually try to keep a maximum of 10 blog posts per page and paginate the rest.
Lazy loading blog posts/products – Add a Load More button or infinite scroll to load more blog posts or products.
Lazy loading comments - I'm using Disqus conditional loading since I'm using Disqus . If you are using your own comments, use plugins like Lazy Load for Comments .
Pagination of comments - if you have hundreds of comments, this can also affect the DOM size. To paginate comments, go to Settings -> Discussion -> Paginate Comments.
Limit the number of related posts – Try limiting the number of related posts to 3 or 4.

Note: lazy loading images will not reduce the size of the DOM

Don't hide unwanted elements with CSS

Sometimes you may need to remove elements introduced by a theme/designer. For example, add a button to the cart on the product pages, a rate button, author information, publication date, etc.

A quick fix is to hide them with CSS:

.cart-button {display:none;}

Even though this solution looks simple, you're exposing users to unwanted code (which includes both HTML markup and CSS styling).

Check your theme/plugin settings to see if there is an option to remove it. Otherwise find the relevant PHP code and remove/comment it out.

Use well-written themes and page builders

A good theme plays an important role in DOM size. Use well-written themes likeGeneratePress orAstra .

Page builders also introduce too many divs. Use constructors likeoxygen, which don't introduce unwanted div blocks and have more control over the HTML structure.