If you go through the PageSpeed insights information for your website, one of the most likely entries you would witness can include the message that says “Excessive DOM size.” How would you be able to stop receiving the error message on your WordPress website?
But before finding the right options to resolve the issue and discover how to stop Excessive DOM size error, it may be a good idea to understand what exactly this message means.
What is DOM?
DOM refers to the Document Object Model. When your browser receives an HTML document, it accepts it in the form of a tree-like structure. The browser converts it into a tree-like structure.
The page is then rendered and painted, making use of the CSS and JavaScript elements.
The DOM consists of the following items, or more correctly called elements.
- The Nodes – The HTML elements in the DOM are referred to as Nodes. They are comparable to the leaves on a tree.
- Depth – Th length of the branch on a tree is called depth. For instance, in the above image, the span has a depth of 4 – HTML -> body -> p -> span.
The resources like Lighthouse and Google Page Insights typically flag the site has to have an excessive DOM size when it observes the following conditions –
- A total of more than 1500 nodes.
- A depth is greater than 32 nodes.
- A parent node with more than 60 child nodes.
All that appears to be too technical, right? Well, that is exactly how those things work. For now, it should be enough to note that an excessive DOM size can translate into a slower loading website.
Either the page will load considerably slower, or the JavaScript on the page will load slower. The ultimate effect that an Excessive DOM size can have on your website is slower loading time.
How can it affect your website performance?
The loading time on your website has a lot to do with your website’s performance in terms of traffic. A delay of more than three seconds can cause more than 40 percent of the visitors to move away from your site. Even a second’s delay can cause a severe issue with your conversion rate and cause slow traffic.
If you do not want to lose the customers or whopping traffic to your website, the right option would be to ensure that you take care of the excessive DOM size.
It can cause the following issues and result in severe problems on your WordPress site performance. Some of them, maybe.
- It increases the TTFB or the time for the first byte. This can further increase the loading time.
- Higher parse and render time is another issue caused by a more massive DOM tree.
- It can also increase memory usage to a considerable extent.
How to reduce excessive DOM size?
Well, unlike the other issues that you would address on your WordPress site, the excessive DOM size may not be that easy enough. That is precisely what would explain why the tools like GTMetrix and PageSpeed insights do not provide a straight and direct option to take care of the error message.
It would ideally need you to redesign the webpage right from scratch. In case you are facing this error on more than one page on your site, it may be a clear sign that you need to look for some action. Now that you are an expert or an advanced user of WordPress, the best option you can opt for is to check out a few tips that can help you address the concern to some extent.
Some of the options that can help you tackle the issue of an excessive DOM size can include
Split the larger pages into the multiple pages
If you have a significant page that contains everything you do? In that case, it may be a good idea to split it into various pages. Instead of including the items like services, contact forms, products, blog posts, and testimonials in one page, you can split them into their pages.
Of course, you can later interlink them together. You can link to them from the header and navbar.
Lazyload the images
Lazyload all the photos. Of course, it may not Reduce the DOM size. It can also help you opt for a workaround, where you can improve the page load speeds. It may be an excellent idea to lazyload YouTube videos as well. You can use a few specific plugins for the purpose.
Limit the number of posts per page
Limiting the number of jobs per page can be yet another plus point. Paginating the rest of the sheets can help you take care of the excessive DOM size issue. You can also limit the related posts count on the page.
Avoid too many specializations.
If your theme is using too many devs, it can increase the DOM size. Check if you have any options within your theme or plugin to disable any of the unwanted options. Some of these features may be useful for improving your website’s performance, but a host of them may not be used for most of the needs.
A few other tips may include:
- Reduce the number of widgets and sections within your web pages.
- Use a more straightforward web page builder.
- Avoid the unneeded codes.
- Check if using a different theme can resolve the issue.
- Paginate In-line comments – If you have hundreds of comments, this can also affect DOM size. Paginate comments by going to Settings -> Discussion -> Break comments into pages.
- Limit number of related posts count – Try to limit the number of related posts count to 3 or maybe 4.
The Concluding Thoughts
Well, those were a few tips that can assist you in opting for the best possible page speed. The advice and solutions in the above discussion should ideally help you achieve the best results in reducing the excessive DOM size.
Necessarily, you would need to focus on reducing the unwanted clutter on your website. This should go a long way in promoting the website loading time to a considerable extent.
External References: