7 Proven Strategies for Fixing “Avoid an Excessive DOM Size” Warning

 

Most Google PageSpeed Insights’ improvement suggestions are pretty straightforward. 

Whether it is “defer offscreen images,” “eliminate render-blocking resources,” or “reduce unused CSS,” you can grasp what next steps you need to take to deal with the issues.

However, when you scroll a little deeper, you suddenly get hit by the “Avoid an excessive DOM size” warning:

First reaction:

What the hey is DOM size, and how do I fix that?! 

You’re at the right place. 

In the following paragraphs, you’ll learn everything you need to know about DOM size and how to deal with this warning:

• What is DOM (Document Object Model)?
• What's the impact of the DOM size on page performance?
• Why you see the “Avoid an excessive DOM size” warning
• How to fix the “Avoid an excessive DOM size” warning

Achieve a 90+ PSI score in a click of a button. See your site with NitroPack!

 

What is a DOM?

Your website includes resources like an HTML document, CSS, and JavaScript files. 

Whenever a user loads your website, their browser establishes a connection and receives the resources. Once the first chunk of data is received, the parsing process begins. 

Parsing is the step the browser takes to turn data (HTML markup) into the DOM tree.

The DOM is a document model representing HTML as a tree of branches and nodes.

Each branch of the tree ends in a node, and each node contains objects. A node represents part of the document, like an element, text string, or comment.

In simpler terms, when you hear DOM, it means the structure of objects that the browser builds every time a webpage is loaded.

Key terms: Nodes. Each element or tag in the DOM is called a node or leaf. Depth. The number of elements in a branch of a DOM. Child element. The last node that doesn’t branch any further.

 

What's the impact of the DOM size on page performance?

The more branches and nodes your DOM has, the bigger its size will be. 

Respectively, the larger the DOM size, the more negative performance issues you could face. 

Here are some of the problems that correlate with a larger DOM size:

1. Increased data costs and slower load times

A large DOM tree often includes many nodes that aren't visible when the user first loads the page. This will unnecessarily increase data costs, as they will have to load more elements,  for your users and slow-down load time.

2. Overwhelms the memory resources of your user’s device

The continual interaction with JavaScript queries leads to poor performance and slow rendering. This results in a negative page experience for your site’s users.

3. Increased rendering time

As users interact with your page, the browser must constantly recompute the position and styling of nodes. A large and complicated DOM tree can drastically slow down rendering.

4. Increased Time to First Byte (TTFB)

TTFB measures how long it takes for a client’s browser to receive the first byte of the response from the server. An excessive DOM indicates a larger HTML document. As a result, there is more amount of data to be transported, which could take more time.

Why you see the “Avoid an excessive DOM size” warning in PageSpeed Insights

PSI uses Lighthouse to analyze URLs in a controlled environment (i.e. using lab data) to showcase the Performance, Accessibility, Best Practices, and SEO score.

For Lighthouse to flag your page and respectively - display the “Avoid an excessive DOM size” warning in your PSI report, either of the following errors must be true for its DOM tree:

• It has more than 1,500 DOM nodes in total. 
• It has a maximum node depth greater than 32 nodes.
• A parent node has more than 60 child nodes.

Join the top 31% of websites that pass their Core Web Vitals! See your site with NitroPack

 

How to Fix Avoid an excessive DOM size

A good rule of thumb from Google is:

“In general, look for ways to create DOM nodes only when needed, and destroy nodes when they're no longer needed.”

Of course, that’s easier said than done, and there will be times when you need to go down to the nitty-gritty of optimizing your website. 

Then, we’d suggest applying some of the following fixes:

1. Avoid poorly coded plugins and themes

They will basically bloat your site’s code, increase your DOM size, and hurt your site’s speed and overall performance. 

How can you tell if a theme/plugin was poorly coded?

Great question. And the answer is:

• Read the reviews. If there are issues, someone is likely to have encountered them already and commented.
• Don’t be shy to spend some money. Just like anything else, you get what you pay for. Saving money by getting a free theme/plugin might sound great, but the long-term effects will cost you much more.
• Check when it was last updated. You most definitely want to avoid out-of-date themes and plugins.

If you are a WooCommerce user or plan to start a store, you should definitely check our in-depth research on the best-performing Woo themes in 2022.

Here’s a checklist of things you should look out for/avoid when selecting a theme: Multi-purpose themes. They come with a lot of options that you’ll never use and, at the same time, will bloat your code. Free versions. Again, they are great for a test drive, but oftentimes, they underperform and might cause you a lot of trouble. Nulled themes. Never use a cracked version of a paid theme, as it can contain malicious scripts which could harm your website.

 

2. Minimize JavaScript-based DOM nodes

Adding dynamic elements on your website comes with a price, as they might bloat it with extra JavaScript nodes.

For starters, you can fix it by allocating the JS files that cause problems and removing them. In case it’s a third-party widget (e.g., a chat widget), you should look for an optimized alternative.

3. Page builders that generate bloated HTML

Page builders’ ease of use has made them an integral part of the website creation process for a lot of users. 

Unfortunately, page builders can sometimes produce bloated code with an excessive number of DOM nodes. They’re doing it by injecting too many div tags.

To deal with it, you can access your HTML and fix it manually. 

The good news is that some page builders take steps to resolve these well-known issues. For instance, Elementor has announced that Elementor 3.0 comes with significant DOM improvements to boost the speed and performance of new websites.

4. Don’t copy/paste text into the WYSIWYG editor

Most WYSIWYG (What You See Is What You Get) editors fail at cleaning up pasted code. Especially when pasted from another rich text source like Microsoft Word. The issue is that it will not only copy the text but its styles as well. And they are the main culprit as they might embed a lot of DOM nodes. 

You have a couple of options to deal with it:

• Avoid pasting text in your editor
• Use the Paste as Plain Text option
• (If your editor allows) Use the advanced features to clean up the code after pasting it

And last but not least - return to your old pages and clean them up. 

5. Break down your one-page website into multiple pages

A single-page website is a great idea when its only purpose is to present your business. 

Contrary, if you decide to add business info, blog articles, products, contact forms, etc., divide them into separate pages and link them through the navigation menu. 

Splitting large pages into multiple pages might reduce the number of DOM nodes.

6. Don’t hide unwanted elements using display:none

display: none is commonly used with JavaScript to hide and show elements without deleting and recreating them. However, that doesn’t mean that they disappear from your HTML markup, leaving visitors loading unwanted elements.

7. Avoid using complicated CSS declarations and JavaScript

Complicated CSS declarations and JavaScript might additionally increase memory usage and slow down your site. It’s best to skip them if you deal with an excessive number of DOM nodes.

Fix CSS and JavaScript issues automatically! See your site with NitroPack

In Conclusion

It’s true that fixing your DOM issues won't lead to an improvement in your PageSpeed Insights scores. 

However, the hidden benefits of putting effort into dealing with the “avoid an excessive DOM size” warning are much greater:

• Increase your site’s load time
• Improve your page’s perceived performance
• Provide visitors with a better user experience

Most importantly, these three things are rewarded by Google! On top of that, they are a surefire way to decrease bounce rates, increase average time spent, and last but not least - boost conversions. 

If you’re looking for ways to fix any other PSI suggestions, make sure to check our other articles:

• Serve Images in Next-Gen Formats Easily (WordPress, OpenCart & Magento)
• How to Lazy Load Offscreen Images (5 Proven Techniques)
• Image Optimization for The Web: 2022 SEO and Site Speed Techniques
• 8 Font Loading Strategies to Improve Your Core Web Vitals (2022)
• How to Eliminate Render-Blocking Resources (CSS and JavaScript)
• Reduce the Impact of Third-Party Code (With/Without Plugins)
• 7 Ways to Minimize Main Thread Work