How to avoid an excessive dom size in wordpress

If you’re reading this article, chances are you’ve run into an “Avoid an excessive DOM size” warning from Google Lighthouse.

Part of selecting a good theme choice in WordPress is to avoid an excessive DOM size. Before you install the theme on your website, do some research on other websites that utilize it. Verify the performance of those websites with Google PageSpeed Insights.

The loading performance of a web page is one of the factors that influence getting good SEO positioning. And this is a topic where the DOM size of a page is critical.

When a website is assessed using page speed tools such as Google Page Speed or GTmetrix, the error ‘Avoid an excessive DOM size’ displays. If you’re unfamiliar with the word and want to learn more about it, you’ve come to the correct spot. This post will cover everything you need to know about avoiding an excessive DOM size in WordPress.

What is the DOM?

Your browser creates a tree structure of the objects called DOM (Document Object Model) every time it loads a web page.

DOM is a tree diagram of objects in your HTML. It shows each HTML element such as the body or h1 with its own node.

DOM represents the hierarchical nature of different objects which may or may not depend on each other. As mentioned earlier, it displays the webpage’s HTML structure as a tree, composed of a series of tags.

Here’s how it works: when your web browser starts preparing a page to display it, it generates an object tree diagram of all the page elements according to its HTML structure.

As a result, whenever it receives an HTML file, it begins by converting it into a tree-structured form called DOM or DOM tree. You can access the DOM and modify it using JavaScript.

Here are some key terms related to DOM:

  • Nodes. Each element or tag in the DOM is called a node or leaf in the DOM tree.
  • Depth. The number of elements in a branch of a DOM is called depth.
  • Child element. The last node which doesn’t branch any further is called a child element.

When analyzing your site through Google PageSpeed Insights you might have seen an error like “Avoid an excessive DOM size”:

Or in GTmetrix “Reduce the number of DOM elements”:

How DOM Size Impact Performance?

Excessive DOM size can impact performance in different ways.

  • Higher parse and render time (FCP) – A large DOM tree and complicated style rules make a huge work for the browser. The browser has to parse the HTML, construct a render tree, etc. Every time user interacts or something in HTML changes, the browser has to compute this again.
  • Increases memory usage – Your JavaScript code might have functions to access DOM elements. A larger DOM tree causes JavaScript to use higher memory to process these. An example would be a query selector like document.querySelectorAll('img') which lists all images, commonly used by lazy loading libraries.
  • Increases TTFB – As your DOM size increases, the size of the HTML document increases (in KBs). Since more data has to be transferred over the network, this increases TTFB.

How to avoid an excessive dom size Technically?

For example, technically reducing DOM size is simple as:

use:

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

instead of:

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

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

But since you’re using WordPress, this isn’t gonna help you much!

How to avoid an excessive DOM size in WordPress?

Lazy Render below-fold contents

You can tell the browser to lazy render the contents (or elements) if it’s not required for the above fold. It’s just like lazy loading images, but for HTML elements.

Split large pages into multiple pages

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

Try to split them into multiple pages and link to them from the header/navbar.

Lazy load and Paginate everything possible

Lazy load every possible element. Some examples could be:

  • Lazy load YouTube videos – use WP YouTube Lyte or Lazy Load by WP Rocket.
  • Limit number of blog posts/products per page – I usually try to keep a maximum of 10 blog posts per page and paginate rest of them.
  • Lazy load blog posts/products – Add “load more” button or infinite scroll to load more blog posts or products.
  • Lazy load comments – I lazy load comments section using Disqus Conditional Load since I use Disqus. If you’re using native comments, use plugins like Lazy Load for Comments.
  • Paginate comments – If you have hundreds of comments, this can also affect DOM size. Paginate comments by going to Settings -> Discussion -> Break comments into pages.
  • Limit related posts count – Try to limit the related posts count to 3 or 4.

Note: Lazy loading images won’t reduce DOM size

Don’t hide unwanted elements using CSS

Sometimes you might need to remove elements injected by the theme/builder. For example, add to cart button in product pages, rating button, author info, published date, etc.

A quick solution is to hide them using CSS:

.cart-button {
  display:none;
}

Even though this solution looks easy, you’re serving unwanted code to users (which includes both HTML markup and CSS styles).

Check your theme/plugin settings to see if there is an option to remove it. Otherwise, find the respective PHP code and remove/comment on them.

Use well-coded themes and page builders

A good theme has a major role in DOM size. Use well-coded themes like GeneratePress or Astra.

Page builders also inject too many divs. Use builders like Oxygen that doesn’t inject unwanted divs and have more control over the HTML structure.

If you’re new to Oxygen, watch Building a Website in Oxygen from Scratch.

Conclusion

There might be more plugins or theme settings that inject too many divs. An example can be “mega menu” plugins like UberMenu.

Sometimes these are crucial for your website’s user experience. But sometimes these are never used by users.

Maybe your footer links are never clicked because most of the visitors are only scrolling up to 75%.

Use tools like HotJar or Google Analytics events to see what visitors are actually using and not using. Analyze, measure, and iterate.

Hope this helps! 🙂


WordPress Speed Optimization Service

Latest Guides