How to Solve: “Avoid an Excessive DOM Size” in WordPress

What the “Avoid an excessive DOM size” warning means

The DOM is essentially a kind of database of the different elements on your site. This includes your headings, paragraphs, images, links, and more. A good visual representation of this is the code output from a WordPress page builder plugin like Elementor.

Generally, each Elementor widget will be an element within the whole ‘DOM tree.’ You can see this within your browser’s DevTools or Inspect Element screens:

We’ll talk about why a big DOM tree can disrupt performance later. However, if you use a tool such as Google Lighthouse, you may see a warning within its Performance reporting:

The message is explicit: you want to ‘Avoid an excessive DOM size.’ Lighthouse reports this warning in three areas:

• The total number of elements for the page. If you have over 800 elements within the DOM tree, you’ll see a warning in Lighthouse.
• A value that represents a piece of code that contains the most number of nested elements – the maximum DOM ‘depth.’
• Lighthouse will also report a parent ‘node’ – any object within the DOM tree rather than just HTML elements – that has over 60 ‘child’ nodes.

However, given that this metric is a ‘Diagnostic’ for Google Lighthouse, it doesn’t directly affect your Performance scores. However, it will influence some of the overall Core Web Vitals. The upcoming Interaction To Next Paint (INP) Core Web Vital will have more of a direct relationship with your DOM size.

How a DOM tree can slow down your site

The greater a DOM tree is, the more this will impact on performance. At its most basic, lots of elements and nodes in the tree will slow down your site. As you may expect, this has influence in a number of areas:

• Performance problems. An excessive DOM size can slow down the rendering and responsiveness of a web page. Browsers need to parse, render, and manage the DOM, and bloat here can strain your system resources.
• Memory consumption. For the end user, a large DOM will consume more memory, which can lead to increased memory usage in the browser. This can impact the user experience (UX), especially where a device has limited resources.
• Maintenance challenges. A complex and large DOM can be challenging to maintain and debug for a developer. It can also make it harder to implement changes and updates due to its size.

If you combine these together, you will likely see an increase in site rendering time. The continual interaction between all the moving parts of your site, thanks to the DOM size, will have a clear impact on your UX. You may even see an increase in your Time To First Byte (TTFB) metric. This is due to the amount of data you need to transport between locations.

How to measure DOM size

There are plenty of ways to find out the size of the DOM. The most straightforward method will be to look at the warning Diagnostic in Google Lighthouse. This will display the total number of elements for a page:

In all honesty, this is likely the best way to check this out, as it directly relates to the warning. However, there are other ways to measure the DOM size using code. There’s also an answer to a question on Stack Overflow that uses JavaScript to count all the nodes:

function countNodes(element = document.body) {
  let count = 0; let child = element.firstElementChild;    
  while (child) { count += countNodes(child);
    if (child.shadowRoot) { count += countNodes(child.shadowRoot); }
    child = child.nextElementSibling; count++;
  } return count;
}Code language: JavaScript (javascript)

However you count the nodes and elements, once you reduce the DOM size, you’ll achieve better performance and UX. Our advice is to stick with the count in Google Lighthouse unless you need to code a custom solution for your own requirements.

How to solve the “Avoid an excessive DOM size” warning

For the rest of the article, we’ll look at ways to exile the ‘Avoid an excessive DOM size’ warning for good. Most of these will be practical and non-technical solutions. However, Google’s own Lighthouse documentation has some tips for stack-specific setups if you need them.

1. Choose themes and plugins with a good codebase
2. Use Optimole to optimize images and implement lazy loading
3. Implement pagination or infinite scrolling
4. Use minimalism concepts to cut down on your site’s elements

1. Choose themes and plugins with a good codebase

A good foundation for your site is to use themes and plugins that have a clean codebase and use modern coding techniques. A roundup of tools will often work well here, as you can pick from a curated list. However, if you need a plugin that’s not on one of these lists, you can use the following checklist to find one:

• Use a quality, performance-optimized WordPress theme. As the foundation of your site, your theme plays a big role in the DOM size of your site. Check out our data-backed roundup of the fastest WordPress themes to find some good options. The freemium Neve theme is a great option if you’re not sure where to start.
• Use top-tier developers with a good reputation. For starters, you could check out independent reviews on the WordPress Theme Directory or Plugin Directory.
• Try to use performance-optimized plugins in addition to your theme. Some plugins that add content to your front-end site can have a large effect on your site’s DOM. This can also be true for third-party elements that you add to your site via JavaScript, such as a live chat service.
• Avoid WordPress page builder plugins whenever possible. While page builders are great for adding design flexibility, they can have an especially large effect on your site’s DOM size. As an alternative, you can use the native WordPress block editor and extend it with block plugins like Otter Blocks, which we’ve reviewed previously.

You’ll also want to follow typical guidelines for choosing WordPress products. This includes good ratings and reviews, along with regular updates within the last six months. Beyond that, you’ll generally want to avoid nulled themes and plugins.

2. Use Optimole to optimize images and implement lazy loading

Lazy loading is a great way to not only boost your UX, but also improve your site’s performance. In addition, because the technology holds back other elements from loading, your DOM tree will be cleaner. While there are a lot of ways to do this, the Optimole plugin is perfect:

This gives you a suite of tools to help optimize aspects of your site. For instance, it utilizes the cloud to distribute media through Amazon’s CloudFront content delivery network (CDN). This will cut down on loading times, which will have a direct impact on your other Core Web Vitals.

However, both the free and premium versions offer typical image optimization and lazy loading functionality. Best of all, you can implement them with one click from the WordPress dashboard:

While you can stick with the one-click functionality, lazy loading in particular has a raft of other options to tweak:

This means you can ‘optimize’ your lazy loading (no pun intended) in line with the needs of your site.

3. Implement pagination or infinite scrolling

Pagination and infinite scrolling are closely related to lazy loading. Here’s a quick summary of what they can both achieve:

• Pagination. This is where you break your content down into smaller chunks and load them across multiple pages. This is a ‘brute force’ method of reducing the number of elements in the DOM tree. If you remove some content from your pages, there will be less to load.
• Infinite scrolling. Here, your site essentially has no footer. Instead, content will load as long as the user continues to scroll. While this can be complex and technical, the technology will let you ‘unload’ elements off-canvas. It’s almost the other side of the coin to lazy loading, and both together can work well.

Adding these to your site could be the job for a developer. However, a WordPress theme such as Neve can do both.

You can find both pagination and infinite scroll within the Layout → Blog / Archive → Ordering and Content screen:

We have a full tutorial on how to achieve this on our sister site, Themeisle.

You could also use plugins such as WP-PageNavi if you want greater control over your pagination and scrolling on individual pages. However, site-wide implementation is possible with the right theme to hand.

4. Use minimalism concepts to cut down on your site’s elements

Choosing to use minimalist concepts on your site isn’t only about aesthetics – they will improve your performance, too. While we won’t get into how to apply minimalism to your site here, there are three key areas to think about:

• Restrict the number of on-page elements. This is a no-brain, clear win as the fewer elements there are on the page, the more ‘svelte’ your DOM tree.
• Keep fancy layout elements to a minimum. As with HTML elements, using scripts, CSS, and more to add functionality to your pages will increase the number of nodes in your DOM tree. You should only use ‘flourishes’ where it’s necessary for UX. In addition, hiding elements using display:none; is often not a good idea. This won’t stop those elements from loading, which means they’ll sit in the DOM tree and take up system resources.
• Use straightforward site navigation. Breadcrumbs, mega menus, and other forms of advanced navigation are great, but they can also increase the number of elements on a page. If possible, look to use straightforward navigation types. An added benefit is that your visitors will be able to traverse your site faster, without losing their way.

As long as you keep the core concepts in mind, you should be able to reduce the number of elements you serve, and also remove the ‘Avoid an excessive DOM size’ warning too.

Fix the “Avoid an excessive DOM size” message for good 🎯

All the HTML elements on your site collate into the DOM tree. This is how you can navigate through the tags in solutions such as Chrome DevTools. However, too many elements – especially those that nest or have child elements – will impact your performance. In these situations, Google Lighthouse will display the ‘Avoid an excessive DOM size’ warning in your Performance report. Reducing this can speed up your site and improve the experience for your visitors.

To reduce the DOM size, you can choose themes and plugins that use a good core codebase, such as Neve and Optimole. Speaking of which, the latter can help you implement lazy loading – crucial to reduce the number of nodes within the DOM tree. You could also implement infinite scrolling solutions or pagination if the situation calls for it. On the whole, if you keep your layout elements to a minimum and exercise good choices around the themes and plugins you use, this should fix the “Avoid an excessive DOM size” message.

Do you need to fix the ‘Avoid an excessive DOM size’ warning in Google Lighthouse? If so, share your situation with us in the comments section below!