Skip to content
How to Reduce the Number of DOM Elements
1. QuickRead
If you’re reading this article, chances are you’ve run into an “Avoid an excessive DOM size” warning from Google Google PageSpeed Insights / Lighthouse
or “Avoid an excessive DOM size” in GTmetrix
If your webpage contains an excessive number of DOM nodes or HTML tags, or if these nodes or tags are nested too deeply, it has a high DOM size. This might cause difficulties with site performance, such as jerky scrolling and sluggish page loading times. An optimized DOM size, on the other hand, provides a better user experience, which leads to greater conversions.
Website owners, particularly eCommerce store owners, must prepare their sites for the Google Page Experience change, as DOM size will almost definitely be used as a ranking indicator.
In this post, we’ll define DOM and discuss how it may affect the user experience of your website. We’ll also provide some practical suggestions along the road to help you optimize your web pages for better performance.
2. What is the DOM ?
When a browser accepts a web page, it must understand its HTML, CSS, JavaScript, and so on. Only then will it be able to begin displaying all of the content. To even begin comprehending what the page is, your browser must first arrange the document in a tree-like structure.
It is a hierarchical structure with many objects, some of which rely on others. The structure is comparable to that of a tree since there is a core object on which all subordinate objects rely. The DOM depicts the HTML structure of the page as a tree made up of series of tags.
Simply defined, the DOM refers to the structure of the objects that the browser generates every time it loads a page. It gets its name from the acronym DOM (Document Object Model). It displays each HTML element, such as the body or h1, as its own node. That DOM can be accessed and modified by JavaScript code.
Here are some key terms associated with DOM:
Nodes:
In the DOM tree, each element or tag is referred to as a node or leaf. An HTML element is anything that exists between the opening HTML tag and the closing HTML tag. For example, in the image below, anything between the tags (including the tags themselves) is referred to as an HTML element.
Depth:
The depth or number of steps down a specific node. Theelement in the Wikipedia picture, for example, has a depth of 1. (HTML–>Body). The count always begins with HTML, which has a value of zero (0).
Child element:
A child element is a node that is a sub-node of another node. Body, for example, is a child of HTML.
3. What does avoid an excessive DOM size mean?
Excessive DOM size occurs when your page has too many DOM nodes (or HTML elements) or when they are nested too deeply. As a result, the user’s browser consumes more power to process your web page, resulting in delayed page loading and low page performance ratings.
One of the reasons JavaScript and CSS execution is typically sluggish is because the browser must process more nodes, resulting in page rendering delays.
Excessive DOM size increases memory consumption, causes style processing delays, and results in costly layout reflows. You may control which page elements are displayed to your user by modifying the DOM objects.
Simply said, reducing the DOM size allows you to enhance site performance and user experience. As a result, your Core Web Vitals score will improve.
4. When Does PageSpeed Insights/Lighthouse Trigger a Red Flag for Excessive DOM Size?
According to web.dev, you will get this issue if:
There are over 1500 DOM nodes in total: Your web page has over 1500 HTML elements.
You have exceeded the maximum node depth of 32 nodes: A nested element has 32 or more parent elements.
There is a parent node with more than 60 child nodes: A parent element has more than 60 children (list elements or table rows).
The “avoid excessive DOM size” warning has no effect on any Lighthouse measurements. While pages with a big DOM can theoretically load quickly, in practice, they seldom do.
A huge DOM size, on the other hand, would undoubtedly influence other Lighthouse metrics such as the largest contentful paint (LCP) and cumulative layout shift (CLS).
5. What causes the avoid an excessive DOM size warning ?
A page’s DOM size might be excessive for a variety of reasons. Let’s take a look at some of the most common:
- Plugins or themes that have been poorly coded
- JavaScript-generated DOM nodes
- Page builders that create excessively long HTML code
- Text that has been copied and pasted into a WYSIWYG editor
This is due to the fact that bloated code can increase the size of your HTML, causing it to take longer to download your web page.
Excessive DOM size has a negative impact on rendering performance. As a result, the user’s browser will perform additional computations on the first load as well as whenever the user or a script interacts with your webpage. Web browsers also use more Memory when using JavaScript to process the DOM.
6. How does excessive DOM size affect page speed?
A big DOM size makes it needlessly difficult for a browser to read and analyze a web page. As a result, the browser will take longer to display the page on the screen.
The web browser must download and parse the HTML every time a page is loaded before it can begin building the DOM tree.
Here are some of the effects of a large DOM size on page performance:
Network efficiency and load performance: A big DOM tree frequently has many nodes that are not visible when the user first loads the page, which raises data costs for your users and slows load time.
Runtime performance: The browser must continually recompute the location and style of nodes when users and scripts interact with your website. A big DOM tree combined with complex style rules can significantly slow down rendering.
Memory performance: If you utilize generic query selectors in your JavaScript, such as document.querySelectorAll(‘li’), you may be unintentionally keeping references to a huge number of nodes, which might exceed the memory limitations of your users’ devices.
Looking For Expert Shopify Speed Optimization And Other Services Get In Touch
7. How to fix the “avoid excessive-DOM size” warning ?
Before attempting to resolve the “avoid excessive-DOM size warning,” you should first identify its causes by investigating its origins.
Lighthouse may be used to determine the Maximum DOM Depth and Maximum Child Elements. After that, you’ll need to perform some searching using your web browser’s DOM inspector and inspect the DOM.
Your objective should be to determine the reasons for an abnormally large number of DOM nodes. The following are the top five most prevalent culprits:
Don’t utilize plugins or themes that are badly coded
You might be using a plugin that generates a huge number of DOM nodes, such as a calendar plugin or a slider. In this instance, just replace it with a better-optimized plugin.
Similarly, badly coded themes and templates can have a detrimental influence on the performance of your website. You can resolve this by removing bloated code from your website using a simplified editor or by modifying sections of your template.
Reduce the number of DOM nodes generated by JavaScript
JavaScript can generate a huge number of DOM nodes at times. A chat widget, for example, may inject an excessive amount of DOM nodes into the DOM of your website. You can resolve this by removing the JavaScript file or choosing an optimized widget.
Use of page builders that create bloated HTML is not recommended
Page builders like WP Bakery and Elementor can occasionally generate bloated code with an excessive amount of DOM nodes. Because they are frequently an important component of the workflow, it is difficult to just eliminate them all at once.
However, you may resolve this issue by removing bloated code and changing your approach. Poor-quality themes can also have a direct influence on DOM size. As a result, we recommend that you select a theme that is optimized for performance.
Most website builders use an excessive number of div tags. Using simplified methods, you may avoid introducing unnecessary components, giving you more control over the HTML layout of your site.
Similarly, you may utilize tools like HotJar to learn about what your site’s visitors are using and what works best for them. A thorough examination is required in order to reduce the DOM size.
The text should not be copied and pasted into the WYSIWYG editor
Most WYSIWYG editors, including TinyMCE, do not clean up copied code, especially when it comes from a rich text source like Microsoft Word. It will also duplicate the styles and content, resulting in the creation of new DOM nodes for the styles.
You may simply resolve this issue by not immediately pasting content into your editor and first removing the bloated text from your site. This is when an HTML cleaner comes in handy.
Don’t use CSS to mask unwanted components
We do not advocate concealing page builder or theme-inserted features such as an add to cart button in product pages, a rating button, or author information.
Typically, this is accomplished with CSS code similar to the following:
.author-name {
display:none;
}
This is ineffective since you may still be delivering unneeded code to your site’s visitors, such as HTML markup and CSS styling.
You may be able to easily delete these components by heading to the settings of your theme or plugins. You may also delete them from the relevant PHP code. It is preferable to completely eliminate unnecessary components from a page.
8. What else can you do to avoid an excessive DOM size?
You may be wondering what more you can do to avoid having a large DOM. Here are some practical suggestions to consider:
Implement lazy loading and infinite scrolling
Lazy loading certain portions of your website is an excellent approach to improve initial page rendering. For pictures on category pages or the product catalog, for example, you may use a lazy loading module.
You may also speed up page rendering by restricting the number of articles that can be displayed on each blog page. It’s a good idea to limit yourself to no more than 10 postings on each page. This also means that no more than ten products should be displayed on a single product page. Similarly, limit the maximum number of linked goods to three or four.
Instead of one large page, create several pages
On your websites, you may have a single page that displays several sorts of information such as blog entries, contact forms, and products. This can also result in a huge DOM tree.
Instead, create individual pages for each of those elements and link to them from the navigation bar.
With the content-visibility attribute, you may improve page rendering
Normally, when a web browser loads a page, it renders all of its components. The CSS content-visibility attribute, on the other hand, instructs the browser to skip style, layout, and painting until the user scrolls down the page in a ‘just-in-time’ way.
Use of complex CSS declarations and JavaScript should be avoided
You should avoid using complex CSS declarations like div:last-child; since the browser must verify the last-child status of each div on your web page.
Another method to reduce DOM size is to eliminate memory-intensive JavaScript Document.getElementsByTagName(‘div’); which might generate a significant number of DOM nodes.
9. Summing up
An enormous Dom Size degrades your website’s performance by slowing page load time. Keep your HTML structure basic and free of unnecessary components. Examine your DOM tree and remove nodes that do not offer value to your site. You will not only speed up your website, but you will also provide a better user experience. Together with UX Services, clients usually need additional work, including web development, web hosting stuff, optimizations, marketing integrations, and others. Consider software outsourcing for these purposes.
This way, you can guarantee that the DOM size on your website is optimized for optimal UX and enhance your Core Web Vitals score.
