TL;DR: Fixing the “Avoid an Excessive DOM size” warning won’t improve your Lighthouse scores, but it has a direct impact on your site’s real-world performance. A large DOM size slows down your site, increases rendering time and data costs for your users, and overwhelms their devices’ memory. There are numerous solutions to the excessive DOM size issue like avoiding poorly coded themes and plugins, dividing your single-page website into multiple pages, and using page builders with caution.
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 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.
Good to know: DOM size does not directly affect your Lighthouse scores (i.e. Performance, Accessibility, Best Practices, and SEO). However, an excessive DOM size will negatively affect your site’s real-world performance, leading to slow load times and a bad user experience for your users.
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.
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:
