How to Solve: “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;
}

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

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:

Current Version: 3.9.2

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:

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 LayoutBlog / ArchiveOrdering 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.

Current Version: 2.94.1

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:

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!

This content was originally published here.