While performing a website speed test through lighthouse or Google PageSpeed Insights, you may get the following recommendation stated: “Avoid an excessive DOM size.”
It means your web pages contain too many DOM nodes or HTML tags that are nested too deep. This can lead your website to slow down by increasing the page’s memory usage, causing more extended style calculations, producing costly layout reflows, etc., which ultimately impact the website performance.
Therefore, it is recommended to reduce the DOM size to ensure the best website performance as well as user experience. So, if you are wondering how to reduce DOM size in wordpress, keep on reading this guide to find the answer.
What Is DOM?
Before getting into the main topic, let’s understand what DOM is and how it works. Actually, it is a tree-like structure, which helps in rendering and painting web pages with the help of CSS and JS. Simply put, when a browser receives an HTML document, it creates a DOM which is a Document Object Model of the page. For example,
There are some key terms of DOM, like Nodes, Depth, and Child Element. Let’s have a look at them.
- Nodes: All objects that create a web page’s HTML structure, that is, all the tags included in it, for example, HTML, BODY, DIV, H1, H2, etc., are known as nodes, and their aggregate is called DOM size.
- Depth: The maximum number of DOM’s branches is known as depth, such as the depth of the P tag.
- Child Element: Child elements are the child nodes or elements below each parent node.
What Is A Good DOM Size?
There are some conditions here, and when your website meets these, it will be flagged. For example, Google PageSpeed Insights and Lighthouse flags pages with DOM trees when the following conditions are met-
- A website with more than 1,500 nodes in total. (In GTmetrix, you will get a warning if the DOM size exceeds 818)
- Having a depth with more than 32 nodes.
- A parent node with more than 60 child nodes.
That means the optimal or good DOM tree size will be when there are less than 1500 nodes in total, the maximum depth of 32 nodes, and the parent nodes with less than 60 child nodes. So, you need to try not to cross these above numbers. Anything beyond these will impact your page speed as well as website performance.
How Does The DOM Size Affect Your Web Performance?
So far, you get the idea that larger DOM slows down your site loading speed. However, this issue also affects your web page performance in multiple ways, like-
Poor Load Performance and Increased Data Cost
Usually, a large DOM tree contains too many nodes that are not visible when in the first loading, and this thing unnecessarily increases the user’s data cost as well as slows down the load time.
Higher Parse and Render Time
Due to the interaction between the user and scripts on your page, the browser must parse HTML, create render trees, and recalculate the node positions and styling. And this complex combination of style rules with the large DOM tree can drastically slow down the rendering process.
Uses User’s Device Memory
If your website’s JavaScript code includes the functions to access the DOM elements, in that case, a large DOM tree can lead the JS to use higher memory to proceed. For example, if the JS uses this general query document.querySelectorAll(‘li’), then it will overwhelm your user’s memory capabilities.
Increases TTFB
It’s a fact that when the DOM size increases, the HTML document’s size will also increase (in KBs). This way, it increases the TTFB of your website as your site needs to transfer more data through the network.
How To Reduce DOM Size In WordPress
Now you know how this larger DOM site is affecting the performance of your website. However, reducing the DOM size isn’t that easy, as one solution won’t fit all. Therefore, first, you need to identify the causes. In order to discover its origin, you can use the Lighthouse, then use your web browser’s DOM Inspector to do some searches, inspect the DOM, and move forward to the necessary changes.
So, here are some common tips that will help you to reduce the DOM tree size in wordpress. So, let’s see how to reduce DOM size in wordpress.
1. Split Large Pages Into Multiple Pages
A complex DOM structure with too many functionalities often has the risk of exceeding the limitation of 32 nodes. So, if you put everything that you got on your site into a single page like products, contact forms, testimonials, blog posts, services, etc., you should make the page split.
Besides that, in general, browsers require more time to parse the larger pages. That is why it is a best practice to split the large page into multiple pages based on core functionalities and link to them from the header or navbar.
This way, you can reduce the number of nodes and child elements of a single page. And lastly, with this, you can effectively separate a large post into multiple pages which results in reducing all CSS tags applied to a single page.
2. Avoid Unnecessary Usage Of JavaScript
It’s not uncommon to load blogs, and websites with different widgets that use JavaScript, which most users never use or require. The worst part is, this unnecessary JS creates a large number of DOM nodes and thus, increases the page load time.
If you simply avoid the use of unnecessary JS files or start using a well-optimized widget including the same functionality, you will be able to fix this problem.
3. Don’t Hide Unwanted Elements Using CSS
Many times while using a theme or builder you may need to hide unwanted CSS elements injected by these, such as an email collection form, rating button, author info, a checkout button, etc. Generally, it is done like using the following snippet-
.author-name { display:none; }
But the fact is, even after hiding these elements, you’re serving unwanted HTML markup and CSS style codes to the users, and the browser has to parse this CSS object and help to increase the size of the DOM.
This means this process is not helpful for your site. Therefore, it will be best if you remove these elements from your website’s theme and plugin settings. It is also possible to remove these elements using the appropriate PHP code.
4. Avoid Using Complicated CSS Declarations
The page loading speed may be slowed even further if you use complicated CSS declarations like “div:last-child;.” The reason behind this is when you use such a declaration, the browser has to check the last-child status of your web page’s each div.
5. Use Well-Coded Plugin, Themes, And Page Builders
Page builders, plugins, and themes play a major role in increasing DOM size by injecting too many divs. Still, you need to use these to run your website smoothly and ensure an optimum user experience.
Therefore, it is best to look out for well-coded plugins, themes, and page builders that offer proper control over DOM elements. Also, you should use a flexible solution that gives you more control over the HTML structure of your site and helps avoid inserting unnecessary elements.
6. Use Lazy Load Plugins and Paginate Everything Possible
Lazy load is a process that conveys to the browser to wait before starting downloading images or videos of a page instantly when the user visits a page. It’s a great way to make your website load faster. Thus, you should lazy load every possible element of your website.
Fortunately, there are some good-quality plugins that can help you in this process without requiring coding. For example-
- Lazy load YouTube videos: In order to avoid rendering-blocking content on your website and blog posts, it’s essential to lazy load your website videos. In this case, you can use WP Rocket or WP YouTube Lyte.
- Lazy Load Blog Posts/Products: To load more blog posts or products, you can add the “load more” button or implement infinite scrolling on your web pages.
- Lazy Load Comments: It will be a wise decision to delay loading comments because users are generally never in a hurry to read comments. You can do this by using the Disqus Conditional Load or Lazy Load for Comments
- Limit Number Of Blog Posts/Products Per Page: It’s good to keep 10 blog posts per page and not exceed beyond that, then paginate the rest of them.
- Limit Related Posts Count: Limit the number of related products or posts to 3 to 4.
- Paginate Comments: Paginate the comments on your page by navigating Settings → Discussion → Break comments into pages. You can do this if you have hundreds of comments.
7. Create Separate Page For Comments Or Additional Images
If your post consists of a lot of images or comments also, if these are likely to exceed 50, it can increase the size of the DOM and make the site load slowly.
To avoid this, you can prioritize images that you require to display on a single webpage and refer the other images to other web pages on the same site. In the same way, if the users want to see the comments, they can load comments on a new page.
8. Don’t Copy-Paste Text Into The WYSIWYG Editor
When you copy and paste code, most WYSIWYG editors don’t clean them, especially when you paste text from a rich text source like Microsoft Word. This will copy the style and text, which means additional DOM nodes will also be created for the styles.
You can avoid this issue by not pasting text directly into your editor. Apart from that, instead of copying and pasting text into the classic editor, you can use Gutenberg editor. Gutenberg works best to produce lighter and clutter-free markup.
9. Improve Page Rendering With The Content-Visibility Property
Content visibility is a new CSS property that you can set using the following simple CSS-
.myelement {
content-visibility: auto;
}
It has the potential to reduce the excessive DOM size and lazy load to give a speed gain.
Note: You must be very careful while making any changes to HTML. it is recommended to make the changes in a staging/development environment before applying directly to the live site.
Wrapping Up
Today, when search engines, as well as users, prefer to have a good page experience and fast loading speed to consider a site as a good site, you can’t afford to have a slow site. Therefore, it is essential to test your website speed frequently and look out for warnings and recommendations. However, if you see that the speed test warns you to avoid DOM size, this guide can help you remove the DOM size in wordpress and effectively get a faster speed website.
So, this is all for how to reduce DOM size in wordpress. We hope you get what you are looking for. For any other queries and feedback, you can comment below.
