“Avoid an Excessive DOM Size” in WordPress

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:

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.

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!