category oscprofessionals - Blogs - Avoid an Excessive DOM size

1. QuickRead
2. What is the DOM
3. How to fix the “avoid excessive-DOM size” warning
1. Don’t use poorly coded plugins or themes
2. JavaScript’s DOM node count should be reduced
3. It is not advised to use page builders that generate bloat HTML
4. It is not recommended to copy and paste the text into the WYSIWYG editor
5. Don’t use CSS to hide undesirable elements
6. Full Page Cache
4. What else can you do to avoid an excessive DOM size?
1. Lazy loading and infinite scrolling should be implemented
2. Instead of one huge page, make numerous smaller pages
3. You may enhance page rendering by using the content-visibility attribute
4. It is best to avoid using complicated CSS declarations and JavaScript
5. Conclusion

1. QuickRead

When a website is examined using page speed tools such as Google Page Speed or GTmetrix, an error message displays that says, “Avoid an excessive DOM size.” If you’re unfamiliar with the phrase and want to learn more about it, you’ve come to the right place. This article will provide you all the information you need to avoid an excessive DOM size.

2. What is the DOM

When an HTML page is received by the browser, it must be transformed into a tree-like structure, which is required for rendering and painting with cascading style sheets (CSS) and javascript. The Document Object Model is the name given to the tree-like structure.

DOM-related terms:

Nodes: Every element in the DOM is referred to as a node, the same to how leaves in a tree are referred to.

Depth: The length of the branch that goes into the tree is referred to as depth.

Child Element: All nodes of a child node that are not further branched are referred to as child elements.

Certain criteria, if satisfied, result in the flagging of website pages. For example, in the case of Lighthouse and Google PageSpeed, the following requirements are checked:

If the total number of nodes is more than 1,500
If the depth exceeds 32 nodes
If there are more than 60 nodes in the parent node

3. How to fix the “avoid excessive-DOM size” warning

Before attempting to address the “avoid excessive-DOM size warning,” you should first investigate its sources.

The Maximum DOM Depth and Maximum Child Elements may be determined using Lighthouse. After that, you’ll need to do some searching and inspecting the DOM with your web browser’s DOM inspector.

Your goal should be to figure out what’s causing the unusually high number of DOM nodes. The top five most common offenders are as follows:

3.1. Don’t use poorly coded plugins or themes

You might be using a plugin that creates a large number of DOM nodes, such as a calendar or slider. Simply replace it with a more efficient plugin in this case.

Similarly, poorly developed themes and templates can have a negative impact on your website’s performance. This may be fixed by eliminating bloated code from your website using a simpler editor or by changing sections of your template.

3.2. JavaScript’s DOM node count should be reduced

At times, JavaScript can create a large number of DOM nodes. A chat widget, for example, may inject an excessive number of DOM nodes into your website’s DOM. You may fix this by deleting the JavaScript file or by selecting an optimized widget.

3.3. It is not advised to use page builders that generate bloat HTML

Page builders such as WP Bakery and Elementor can produce bloated code with an excessive number of DOM nodes on occasion. It is difficult to delete them all at once because they are usually a vital component of the workflow.

You may, however, fix this problem by eliminating bloated code and altering your strategy. Poor-quality themes can also have an immediate impact on DOM size. As a consequence, we recommend that you use a performance-optimized theme.

The majority of website builders employ an excessive quantity of div tags. You may avoid introducing unneeded components by using simpler techniques, giving you more control over the HTML structure of your site.

3.4 It is not recommended to copy and paste the text into the WYSIWYG editor

Most WYSIWYG editors, including TinyMCE, do not clean up copied code, particularly when it originates from a rich text source such as Microsoft Word. It will also replicate the styles and content, resulting in additional DOM nodes for the styles.

You may easily address this problem by not pasting content into your editor right away and first deleting the bloated text from your site. This is where an HTML cleaner may help.

3.5 Don’t use CSS to hide undesirable elements

We do not recommend hiding page builder or theme-installed elements like an add to cart button in product pages, a rating button, or author information.

This is often achieved using CSS code similar to the following:

.author-name { display:none; }

This is inefficient since you may still be providing unnecessary code to your site’s users, such as HTML markup and CSS style.

By going to the settings of your theme or plugins, you may be able to quickly eliminate these components. You may also remove them from the corresponding PHP code. It is best to remove any unneeded components from a page.

3.6 Full Page Cache

Full-page caching improves response speed while decreasing server load. Varnish Cache is highly recommended in production for all Magento 2 stores for maximum performance.

4. What more can you do to avoid a large DOM?

You may be asking whether there is anything else you can do to avoid having a big DOM. Consider the following practical suggestions:

4.1 Lazy loading and infinite scrolling should be implemented

Lazy loading certain parts of your website is a great way to optimize initial page rendering. You might utilize a lazy loading module for images on category pages or the product catalog, for example.

You may also reduce the number of posts that can be displayed on each blog page to speed up page rendering. It’s a good idea to keep each page to no more than 10 postings. This also implies that no more than 10 goods should be shown on a single product page. Limit the maximum number of connected items to three or four as well.

4.2 Instead of one huge page, make numerous smaller pages

You may have a single page on your website that displays several types of content such as blog postings, contact forms, and goods. This can also lead to a massive DOM tree.
Create separate pages for each of those elements and link to them from the navigation bar instead.

4.3 You may enhance page rendering by using the content-visibility attribute

When a web browser loads a page, it normally renders all of its components. In contrast, the CSS content-visibility property directs the browser to skip style, layout, and painting until the user scrolls down the page in a ‘just-in-time’ manner.

4.4 It is best to avoid using complicated CSS declarations and JavaScript

You should avoid using complicated CSS declarations like div:last-child; since the browser must check the last-child status of each div on your web page.

Another way to minimise DOM size is to remove memory-intensive JavaScript

document.getElementsByTagName('div'); which may produce a large number of DOM nodes.

5. Conclusion

A large Dom Size affects your website’s performance by slowing page load time. Keep your HTML structure simple and clear of extraneous components. Examine your DOM tree and eliminate nodes that do not provide value to your site. You will not only speed up your website, but you will also give a better user experience.

In this manner, you can ensure that the DOM size on your website is adjusted for optimal UX and raise your Core Web Vitals score.

Avoid an Excessive DOM size

Table of contents