How to Avoid an Excessive DOM size in WordPress

If you’ve ever used any major page speed tool to measure the speed and performance of your WordPress site, chances are you’ve come across the excessive DOM size warning before.

There are a lot of issues that an excessive DOM size presents and learning what causes this issue as well as what the DOM is is critical to secure a sustainable WordPress site performance score.

This article will cover everything you need to know about the DOM, what causes excessive DOM size, how to check the DOM size of your WordPress site, and steps you can take to avoid excessive DOM size in WordPress altogether.

Let’s get to it.

What is the DOM?

DOM stands for Document Object Model and is a tree-like structure constructed by browsers whenever a page is requested for and rendered.

You can think of the DOM as the code-equivalent skeleton of pages. It comprises all the HTML tags responsible for the layouts and content displayed on a webpage.

Each HTML tag present in the DOM can also be referred to as an Element or Node. Each node can have a parent/child with another.

In the example above, the div element is the parent of other elements because they are wrapped inside its closing and opening tags.

As you can see from the screenshot above, the DOM a browser generates for each page it loads can be quite complex, spanning hundreds of lines of code.

If you’d like a more in-depth explanation of how the DOM works, I recommend this article by Ilya Grigorik.

What does Excessive DOM size mean?

An Excessive DOM size is when there’s a high number of nodes or HTML tags being generated for a page when rendered by a browser.

Excessive DOM sizes are most common with pages that have huge amounts of content and sometimes poorly coded HTML and JavaScript implementations.

News websites like BBC.com, for example, will naturally have pages with excessive DOM sizes due to the large amount of content being rendered by the browser on load.

Generally speaking, having an excessive DOM size shouldn’t cause alarm, especially when you have page optimisation techniques like deferring and lazy loading in place.

With that said, there is some overall drawback to having an excessive DOM size.

How does Excessive DOM Size Affect Page Speed and Performance?

When a user’s browser requests a page, a DOM tree is generated from which what the user sees is rendered.

This DOM tree generation and rendering include all the HTML, CSS, and JavaScript required to display a page.

When an excessively large DOM tree with nodes of more than 800 is generated, there’s an overall drop in performance and page loading speed.

Depending on the severity of the size of a page’s DOM tree, a browser might struggle, lag and even fail to load a page.

This is especially true for mobile devices that have limited RAM.

An Excessive DOM size also increases the data cost for page visitors, as pages with more content will naturally require more bandwidth.

In a nutshell, a page with an excessive DOM size can affect memory performance, page loading speed, and runtime experience.

How to Check the DOM size of a WordPress site

The easiest way to check the DOM size for WordPress sites is by using a page performance tool like SeoSiteCheckup.

Simply visit their website and navigate to the DOM size test page, which is free to use.

After entering the URL of your WordPress site, click the Checkup button and the wizard should start its analysis.

Once it’s completed, you’ll see the total number of nodes for the URL provided.

You can also use the Dom Size Analyzer chrome extension if you use the chrome browser and you’re comfortable using the developer tools feature.

In most cases, though, you’ll find yourself using Google’s Pagespeed Insights tool or GTmetrix which only apparently displays a DOM size count and warning when excessive.

What causes the “avoid an excessive DOM size” warning

The “avoid an excessive DOM size” is triggered when a page has more than 800+ Nodes generated in its body element when loaded.

Lighthouse, which is an open-source page performance tool by Google flags pages with more than 800+ nodes units body element as “Excessive DOM size”.

This is the same standard other page performance tools like GTmetrix also use when checking page DOM size.

Another important fact to note is, when the node count in the body element of any page exceeds 1,400, an error is triggered instead of a warning.

Overall, it’s best to keep the DOM size of all the pages on your website low.

How To Avoid Excessive DOM size in WordPress

So far, we’ve talked about what triggers the excessive DOM size warning, but we haven’t gone over how you can avoid the warning altogether.

To avoid excessive DOM size in WordPress, make sure the total number of nodes on each page does not exceed 800. This can be achieved by avoiding outdated themes and plugins with bloated code.

Most poorly coded themes or plugins add a lot of scripts to power the layouts on each page, which increase the default node count irrespective of content.

You should also avoid outdated page builders like WPBakery as they also come with their own set of bloated scripts and stylesheets.

Sticking to well-known WordPress building frameworks like Genesis, GeneratePress, and page builders like Oxygen and Elementor will keep you on the safe side of things when it comes to avoiding excessive DOM size. 

Whatever you decide to build technology you decide to go with, just make sure it has lean code with many options to optimise even further.

You should also avoid adding too much content on any page except it’s absolutely necessary and even then, try keeping things as simple as possible by using fewer HTML tags and scripts.

How to Reduce DOM Size Technically?

The DOM is generated by a browser when it renders all the stylesheet, script, and HTML files tied to a page URL.

The total number of elements present on the DOM can, in most cases, be reduced by restructuring the HTML file.

As an example, examine the HTML code snippet below:

As you can see, there are three <div> elements present in our code. We can restructure this to reduce DOM size by using just a single <div> item:

We can take it one step further by using just a single <p> tag and two <br> tags:

The more elements you can get rid of without affecting the structure or look of a page, the better the DOM size.

How to Fix the “avoid excessive DOM size” Warning for WordPress

If you already have a WordPress site with the “excessive DOM size” warning, here are some fixes you can try.

Split pages with large content into multiple pages

Instead of having a huge 20-section services page with a ton of content, to avoid the excessive DOM size warning, it’s best to split the content into multiple pages.

So, instead of listing each and every service you offer on a single page, you simply list them with a small description and link to a dedicated page with all the information for that specific service.

You can apply this to other pages like About us and even the homepage. The key here is splitting your WordPress site’s content into dedicated pages and tying it all together with links and a good navigation system.

Remove unwanted Elements without hiding them with CSS

The normal assumption of most inexperienced WordPress users is that hiding elements on a page with CSS gets rid of them completely.

This is simply not true, using CSS properties like display: none or visibility: hidden on an element simply prevents it from being displayed by the browser. It doesn’t stop the browser from rendering it as part of the DOM.

This is one of the common mistakes a lot of WordPress users make. By hiding sections with a lot of content repeatedly using CSS, the node count increases, thereby slowing down page load time and overall performance.

Whenever an element or section in your website is no longer needed, you have to remove the underlying HTML responsible for it.

Most WordPress sites these days use page builders, so it shouldn’t be difficult to quickly edit and remove the parts you don’t want.

For WordPress themes that purely rely on code, you might need a developer to do the removal for you.

Sanitise text before pasting it into the post/page editor

A lot of people don’t realise it but sometimes when text is copied from a page or other text editors, it comes with some markup attributes.

These unnecessary markups, if not cleaned up, can increase the node count of a WordPress post/page.

Luckily, there are different ways to make sure all markup attributes are cleared when pasting. The easiest would be using Ctrl/Cmd + Shift + V instead of Ctrl/Cmd + V while pasting, this get’s rid of all formatting and just pastes the text.

You can also use an online tool like TextCleanr if you want to keep the formatting but get rid of unnecessary markup attributes.

Overall, always make sure whatever you’re pasting in the Classic or Gutenberg Editor is free from bloated HTML inline styling.

Limit post listing and other dynamic content by adding pagination

If your WordPress website has a blog, then chances are you have your blog posts listed on the homepage.

Now, this is completely fine and does have some SEO benefits when done right, the problem a lot of WordPress site owners make is displaying too many posts on the homepage.

When the number of post listings being dynamically added to the page is excessive, it can affect performance and increase the DOM size.

It’s best practice to limit the number of posts loaded and add a pagination system or load more buttons in case the users want to see more.

This doesn’t apply to just blog posts. Any WordPress post type should also be listed with limits in place as too many listings can drastically increase the element count and lead to different performance problems

In a Nutshell

The most important thing to remember when trying to avoid an excessive DOM size in WordPress is to keep your code clean and well-organised. 

By using the techniques outlined in this article, you can keep your DOM size under control and improve the performance of your WordPress site. 

Thanks for reading and hope. I you’ve found this article helpful!