Part of selecting a good theme choice in WordPress is to avoid an excessive DOM size. Before you install the theme on your website, do some research on other websites that utilize it. Verify the performance of those websites with PageSpeed.
The loading performance of a web page is one of the factors that influences getting good SEO positioning. And this is a topic where the DOM size of a page is critical.
When a website is assessed using page speed tools such as Google Page Speed or GTmetrix, the error ‘Avoid an excessive DOM size’ displays. If you’re unfamiliar with the word and want to learn more about it, you’ve come to the correct spot. This post will cover everything you need to know about avoiding an excessive DOM size in WordPress.
Speed up WordPress using LiteSpeed Cache Plugin.
Table of Contents
What is DOM?
The browser converts HTML documents into tree-like structures, which are used to render and paint pages utilizing cascading style sheets (CSS) and JavaScript. The tree-like structure is called the Document Object Model.
In the simplest terms, when we talk about the DOM, we mean the structure of objects that the browser builds every time a webpage is loaded.
In other words, when the browser presents us with a page it builds an object tree based on the HTML structure of the page.
It’s a hierarchical system made up of various things, some of which are dependent on others. Because there is a main object on which other secondary items rely, the structure is comparable to that of a tree. The DOM describes the HTML structure of a page as a tree made up of tags.
JavaScript can access that DOM and modify it. You can learn more about DOM here.
Important terms related to DOM
Nodes: Every element in the DOM is referred to as a node, or leaves in a tree.
Depth: The length of the branch that goes into the tree is referred to as depth.
Child Element: Child elements are all the nodes of a child node that aren’t branched farther.
Certain criteria must be completed in order for website pages to be marked “flagged”. In the case of Google PageSpeed, for example, the following conditions are checked:
- If there are more than 1,500 nodes in total,
- If there are more than 32 nodes in the depth,
- If there are more than 60 nodes in the parent node,
How website performance is affected by the DOM size?
The bigger the number of DOM sizes, the more negative the impact:
Higher analyze and rendering time: The DOM tree’s size increases the browser’s burden. This is due to the browser’s need to parse HTML, render the DOM tree, and so on. The frequency with which the computation is performed is determined by user interactions and changes in the HTML structure.
Increased memory usage: JavaScript code may have functions to access DOM elements, and if the DOM tree size is huge, JavaScript processes the script using more memory. A query selector like document.queryselectorAll(‘img’), for example, lists all the pictures that are typically utilized by lazy loading libraries.
Increased TTFB: A larger DOM indicates a larger document (in Kbs). As a result, as the amount of data to be carried across the network grows, so does the time it takes to transport the first byte.
Amount of data transferred: Large DOM trees frequently contain nodes that aren’t visible at first. This increases the amount of data your users must pay for and slows the website load time. To address these issues, minifying your JS and CSS can be highly beneficial. Use Minify JS & CSS to optimize your files, reduce the DOM size, and enhance overall performance.
Why does excessive DOM size show?
Large DOMs, as previously discussed, can have a significant impact on page speed, and you may be unaware of this. Even if the HTML code on your page appears to be tidy, JavaScript, AJAX, and other elements might contribute to the DOM.
You’ll want to pay close attention to the number of elements you use if you’re building your website with Elementor (which is used by 4 million websites). Due to the abundance of divs used by pagebuilders to enable effects and animations, DOMs can quickly become bloated.
Modern computers and browsers are capable of handling this, but it’s something to keep in mind because unnecessary items will bloat the site and slow loading times.
How do you avoid an excessive DOM size?
Making a suitable theme choice is part of avoiding an excessive DOM size in WordPress. Before you install the theme on your site, do some research on other websites that utilize it. Check the performance of certain websites with PageSpeed.
In WordPress, there are various methods to minimize the size of the DOM:
- Dividing large pages into multiple pages
- CSS should not be used to conceal undesired elements
- Don’t use plugins that aren’t well-coded
- Remove any unneeded elements from the default WordPress theme
- Use the most latest versions of your page builder
Dividing large pages into multiple pages
Do you have a single page that displays all of your site’s content? Contact forms, blog entries, merchandise, and so on.
In that situation, it’s preferable to organize all of those elements into separate pages and link them together using the navigation bar.
CSS should not be used to conceal undesired elements.
Using display:none; to hide items in CSS does not remove them from the HTML markup, leaving visitors with unwanted elements.
Don’t use plugins that aren’t well-coded.
Some developers save time by not optimizing their plugins, resulting in an increase in the number of items on your page. You can compare multiple plugins that do the same thing to find which one has the smallest impact on your site’s PageSpeed.
Remove any unneeded elements from the default WordPress theme.
Certain components that come with your WordPress theme by default, such as the “Add to Cart” button on product pages, the date of publication, author information, and so on, may need to be removed in some situations.
If there isn’t an option to remove those items in the WordPress theme’s configuration, seek the appropriate PHP code to remove them.
Use the most latest versions of your page builder.
If you’re using a page builder, be aware that PageSpeed will alert you for having a big DOM size. If you’re using a page builder, make any necessary changes to improve your website’s DOM structure.
How you can avoid an excessive DOM size technically?
You must eliminate all HTML elements that aren’t required to avoid an excessive DOM size and ensure that web performance isn’t harmed. As we’ve seen, if we don’t take the necessary precautions, the page will slow down for a variety of reasons.
The simple answer is “remove excess elements” and “combine multiple elements into one”.
For example, you can make changes in :
<div id="nav-element">
<ul> example
</ul>
</div>
Into:
<ul id="nav-element">
example
</ul>
However, on WordPress, this is a little more challenging because you don’t always have access to the necessary raw HTML. Instead, you must implement countermeasures.
You can access the HTML code by selecting “Edit as HTML” in the options menu
How to lazy load comments and images to avoid excessive DOM size?
You can tell the browser to lazy render the comments and images to essentially avoid an excessive DOM size
Lazy load comments to avoid excessive DOM size:
Go to your WP Dashboard
Select “Plugin” -> “Add new” from the left hand side menu
Search for “Lazy load comments”
Install and Activate
Go to “Settings” -> “Discussions” from the left hand side menu
Scroll down to “lazy load comments” section and select “on click” option
Save changes
Now open your post to observe the “load comments” button
Lazy load images to avoid excessive DOM size:
Go to your WP Dashboard
Select “Plugin” -> “Add new” from the left hand side menu
Search for “Lazy load WP Rocket”
Install and Activate
Select “Settings” -> “Lazy Load” from the left hand side menu
Select “Image”, “Iframes & videos” and “Replace YouTube videos by Thumbnails” options.
Save changes
Conclusion
An increased DOM Size degrades your website’s efficiency by lengthening the time it takes for pages to load. Keep your HTML structure concise and free of extraneous elements. Examine your DOM tree for nodes that do not offer value to your website. When you avoid an excessive DOM size, you will not only improve the speed of your website, but you will also improve the user experience.
