Avoid an Excessive DOM Size: How to Fix this Warning?
When a website is analyzed through page speed websites like Google Page Speed or GTmetrix, an error appears ‘Avoid an excessive DOM size’. Now, if you are unaware of the term and are seeking ways to reduce the issue, then you are at the right place. This article will provide you with all the details on Avoid an excessive DOM size for WordPress.
What is DOM?
Whenever the browser receives an HTML document, it is needed to be converted into a tree-like structure, which is essential for rendering and painting using cascading style sheets (CSS) and javascript. The tree-like structure is called the Document Object Model.
Terms related to DOM:
- Nodes: Every element in the DOM is called a node or leaves in a tree.
- Depth: The length of the branch that goes in the tree is called depth
- Child Element: All the nodes of a child node that are not branched further are called child elements.
There are certain conditions which if met then website pages are flagged. For example in case of Lighthouse and Google PageSpeed, below conditions are checked:
- If total nodes that exist are more than 1,500
- If depth is more than 32 nodes
- If the parent node has more than 60 nodes
How the performance of the website is impacted by the DOM size ?
The greater number of DOM size puts pejorative impact in distinct ways:
- Higher parse and render time: The large size of the DOM tree increases workload on the browser. This is because the browser has to parse the HTML, render DOM tree etc. The frequency of the computation depends on the user interactions and the changes in the HTML structure.
- Increased memory usage: It is javascript code that may have functions to access DOM elements and if the dom tree size is large then javascript uses higher memory to process the script. To cite an example, a query selector like document.queryselectorAll(‘img’), lists all the images which are normally used by the lazy loading libraries.
- Increased TTFB: Increased DOM size means increased document size (in Kbs). Therefore, as the data to be transferred over the network increases, so the time to the first byte increases.
You may also like to read:- How to Optimize Website for Fast Speed?
How to Reduce the Excessive DOM Size:
- Eliminate every possible HTML element. One possible way is to use flexbox or grid to reduce the size of the HTML DOM. However, it is not possible in WordPress.
- Split a page into multiple pages and try to link them from the header or navbar. This means a page must not contain everything related to the website on a single page like all services, contact forms, products, blog posts, and testimonials.
- Lazy load and paginate everything possible.
- Use WP YouTube Lyte or Lazy Load by WP Rocket in order to lazy load youtube videos.
- Per page, limit the number of blog posts or products and paginate all the others. The preferred number of blogs is kept 10 per page
- Use lazy load blog posts or products by adding the ‘load more’ button or infinite scroll to load more products or posts further.
- Lazy load comments. This can be done by Disqus Conditional Load or using plugins such as Lazy Load for Comments.
- If comments are large in number then it is better to paginate the comments after reaching a hundred. This can be attained by going to Settings > Discussion > Break Comments into pages.
- Never hide unwanted elements of the design using CSS, otherwise, unwanted code is served to the user. It is always better to find the respective PHP code and remove it or comment on it.
- Use well-coded themes and page builders. As many themes are supplied with too many divs and thus have control over the HTML structure.
Conclusion: Avoid Excessive DOM Size for WordPress
The best way to analyze the website first, to find out what visitors are normally checking or not reaching on the website. This is a way to improve the user experience and remove or change the unwanted part. Therefore try using tools such as HotJar or Google Analytics to maximize the user experience.