In this post, we’re going to explain what exactly Document Object Model (DOM) is, how it impacts the website and what measures to take to improve its performance.
What is Document Object Model (DOM)
DOM is a programming interface for web documents, which allows programming languages like JavaScript to interact with it. In other words, a web page consists of nested HTML tags, which a browser then converts into a tree-like structure we call DOM.
It’s the same document in both cases, but the DOM representation gives us the option to manipulate its design. In other words, we can modify web pages design by using a programming language such as JavaScript.
Impact of a large DOM tree
A large DOM tree can slow down web pages performance in a few ways on which you could turn your focus on.
Network efficiency and load performance
When a web page has a large DOM tree, it can include a lot of nodes that aren’t visible when a user first loads it. Therefore, it can unnecessarily increase the amount of data your visitors’ browsers need to fetch, causing a long loading time.
Runtime performance
This refers to the performance of your website while users and scripts are interacting with it. Furthermore, the browser needs to recompute the position and styling of the nodes with each interaction.
Memory performance
Another cause for poor performance can hail from using up memory resources by referencing elements unnecessarily. For example, if you use general query selectors for tags like ‘li’ in JavaScript, you may be storing references to a large number of nodes. This can overwhelm the memory capabilities for your visitors’ devices.
Therefore, things can get really inefficient when you have a large DOM tree in combination with complicated style rules, which can slow down the rendering process of your page.
How to diagnose issues with large DOM tree
While there are a number of website performance audit tools out there, PageSpeed Insights is one of the most popular. Furthermore, it can display all sorts of opportunities for improvements, and one of them may also pertain to an excessive DOM size.
Moreover, PageSpeed Insights uses Lighthouse tool to audit a page, which will report the total DOM elements for it, what’s its maximum DOM depth and what is the maximum number of child elements.
There are 2 stages of the message it can give you, one is a warning and the other is an error. Furthermore, you will get a warning when Lighthouse detects more than 800 nodes in the body element of your page, and you will get an error when it detects more than 1400.
How to optimize a large DOM tree
In general, you can look for ways to create DOM nodes only when necessary and remove them when they’re no longer needed. One way of doing this is to load the page and manually noting which nodes are displayed and only load those on initial load of the page. On the other hand, you can create the undisplayed nodes from initially loaded document only after a relevant user interaction, such as a scroll or mouse hover.
In case you can’t avoid having a large DOM tree, you can simplify your CSS selectors, which may decrease the style recalculation times of your page. To clarify, you can avoid long chains of selectors and envelop the specific styles in a single class for specific elements.
For WordPress users, you can lookout for poorly coded plugins and themes by reading their reviews. There is a vast amount of either available online and if you come across a plugin that promises exactly what you want, it can’t hurt to check out what others had to say about it.
For the more tech savvy ones, you can also check if the plugin of your choice has a filter for the final HTML output, which you can use to rewrite what is output and optimize DOM structure on a more granular level. In case that plugin doesn’t have this filter built in, you can also look for the action hook it uses and deregister its default effects on DOM structure and add your own.
Another telltale sign of a poorly coded product might also be the date it was last updated. WordPress is constantly updating and evolving, and using outdated plugins might just cause you more headache than it’s worth.
Conclusion
To conclude, we went over what DOM is and what its role is when it comes to web pages performance. We also talked about how PageSpeed Insights diagnoses excessive DOM size issue and what measures you can take to remedy its negative effects on website loading speed.
