Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
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:
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:
|
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:
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.
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.
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.
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.
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:
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:
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:
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:
|
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.
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.
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:
And last but not least - return to your old pages and clean them up.
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.
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.
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.
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:
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:
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.
