Document Object Model (DOM) is a programming interface (API) for HTML and XML documents. It provides a structured view of a document and defines how this structure can be accessed from programs that can change the document’s content, style, and structure. The DOM connects a web page to scripting or programming languages.
What does “Excessive DOM size” mean?
This issue means that the page contains more than the recommended 1500 elements in the DOM. How does this affect your site? A large DOM tree slows down the performance of your pages. The more characters and words a HTML document contains, the longer time it takes for a browser to load it, the slower user experience an end-user gets. Consequently, you need to avoid this problem.
What triggers this issue?
The presence of a large number of DOM elements can occur for various reasons. For example, your site used to be fast, but after the last changes in the code, the speed and performance have dropped. Or your developers added new pages on the site that have an excessive DOM size. However, it is possible that you just built a web application that immediately had a problem with a DOM.
There may be other reasons as well. In any case, you need to understand how you can stop this problem.
How can I check the issue?
You can check this issue with online or offline crawlers that scan your site. They identify pages with over 1500 elements in the DOM. In addition, you will also learn such indicators as a DOM depth and a DOM width, which you also need to monitor so that they do not exceed the norm.
Now you know about avoiding excessive DOM size of your website, go ahead and analyse the issues on it!
Check not only the issue but make a full audit to find out and fix your technical SEO.
Why is this important?
You have created a website using one of the content management systems (WordPress/Elementor, Drupal) or an online store on an eCommerce platform (Shopify, Magento). And your web application was functioning as expected. But then you discovered a large number of elements in the DOM on some pages.
You should know that this issue can harm your pages:
- Network efficiency and load performance
- Runtime performance
- Memory performance
Moreover, users may notice that they spend a lot of time waiting for your pages to load. They will most likely prefer to find another site that matches their expectations. Therefore, you need to figure out which element is redundant on problem pages as quickly as possible. And then, you should reduce the DOM size and improve the loading speed (WP Rocket plugin).
How can I fix the issue?
You need to seek ways that help to create elements in the DOM only when needed and destroy them when no longer needed. You can also load your page and manually note which nodes are displayed. Perhaps you can delete the undisplayed nodes from the loaded DOM and only create them after a user gesture, such as a button click or a scroll. Keep in mind that an optimal tree has less than 1500 elements in the DOM. The next step in improving a page loading performance could be using .htaccess configuration file to leverage browser caching.
You can also discover how to increase your site’s speed by Moz:
