Fixing “Avoid an Excessive DOM Size” in WordPress

The Google Lighthouse warning “Avoid an excessive DOM size” is a performance measurement worth paying attention to. We will look carefully at the Document Object Model (DOM) behind it, and in this article we will share the DOM tool our Türk SEM SEO specialists use. A large DOM size can cause performance problems, maintenance problems and a good deal more.

In this Türk SEM article we will show you how to resolve the ‘Avoid an excessive DOM size‘ warning in Google Lighthouse. First, let us help you understand what it means.

DOM Check Tool

The DOM check tool our Türk SEM SEO specialists use is now open to everyone. Our tool runs 5 basic DOM checks and explains the parts you need to fix, one by one. You can see every DOM adjustment.

If you are going to work on the tool for a long stretch, you can do it from the full DOM error test tool page.

What does the “Avoid an excessive DOM size” warning mean?

The DOM is essentially a kind of database, or output, of the different elements on your site. That data covers your headings, your paragraphs, your images, your links and more. A good visual representation of it is the code output of a WordPress page builder plugin such as Elementor.

Generally every Elementor widget opens and closes code so that it becomes one element inside the whole ‘DOM tree’. You can see this in your browser's DevTools or Inspect Element panels:

If you have had a DOM warning in PageSpeed, it should look like this.

The message is plain enough: ‘Avoid an excessive DOM size.’ Lighthouse reports this warning across three areas:

• The total element count of the page. If you have more than 800 elements in the DOM tree, you will see a warning in Lighthouse.
• A value representing the piece of code with the greatest number of nested elements. If it goes past the maximum, Lighthouse warns about maximum DOM depth.
• Lighthouse will also tell you about a parent node with more than 60 ‘child’ nodes, a node being any object in the DOM tree rather than an HTML element as such.

I should say, though, that because this metric is a ‘Diagnostic’ for Google Lighthouse it does not affect your Performance scores directly. Your DOM figures will still affect part of the overall Core Web Vitals. Interaction to Next Paint (INP) is the Core Web Vital with the more direct relationship to your DOM size.

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

1. Pick themes and plugins with a good code base
2. Using Optimole to optimize your images and apply lazy loading can help
3. Apply pagination or infinite scroll and break the load into pieces
4. Use the ideas of minimalism on your site to cut the number of elements

To tell you how it really is, on WordPress sites the DOM question usually comes down to the theme. Themes that are not written cleanly and correctly produce line after line of code and cause DOM problems. That has a direct effect on how long the page takes to open. Our own Türk SEM website, turksem.com, unfortunately runs a theme whose builders paid very little attention to the DOM. That is why our DOM figures come out rather badly.

Changing a theme is usually a great deal of trouble, and we are living through exactly that. We have wanted to change our theme 3 times, but with the site having been published for 15 years it turns out to be quite an effort. Still, the hard data we have says we need to change the theme of Türk SEM's website, turksem.com.

We looked at the TTFB figure recently as well, so you may want to have a look at that article too.

An Optimized WordPress Theme and the Plugins That Help

After a good deal of research, Neve Themes turned out to be quite a good option for us. You may want to take a look at the Neve theme for your own work.

The Optimole plugin can serve your basic needs on a number of fronts. It works alongside LiteSpeed and WP Rocket.

With the Website Speed Test tool we publish on our Türk SEM SEO tools page, you can also reach a range of speed-related data.