How to Avoid Excessive DOM Size

Excessive DOM size can be detrimental to web performance. Today we will explore how you can avoid excessive DOM size.

We will also look at how to reduce the DOM size across various platforms, CMSs, and web frameworks.

What is DOM and DOM Size?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document and allows programs to manipulate document content, structure, and styles. Each element in the document is a node in the DOM tree, and the size of the DOM refers to the total number of nodes in the DOM tree.

Your browser creates a tree structure of objects called DOM (Document Object Model) every time it loads a web page.

DOM is an object tree diagram in your HTML code. Show each HTML element as a body or h1 with its own node.

DOM represents the hierarchical nature of different objects that may or may not depend on each other. As mentioned above, it displays the HTML structure of the web page as a tree, made up of a series of tags.

Here's how it works: When your web browser starts preparing a page for display, it generates an object tree diagram of all page elements according to its HTML structure.

Consequently, whenever it receives an HTML file, it begins by converting it into a tree-structured form called DOM or DOM tree. You can access the DOM and modify it using JavaScript.

Here are some key terms related to the DOM:

• Knots. Each element or tag in the DOM is called a node or leaf in the DOM tree.
• Depth. The number of elements in a branch of a DOM is called the depth.
• Child element. The last node that doesn't branch further is called a child.

What does it mean to avoid excessive DOM size?

Excessive DOM size occurs when there are too many DOM nodes (or HTML tags) on your page or when they are nested too deeply. This causes the user's browser to consume extra energy to process your web page, leading to slow page loading and low page speed scores.

One of the reasons JavaScript and CSS are often slow to execute is because the browser has to process multiple nodes, resulting in a delay in page rendering.

Excessive DOM size causes higher memory usage, style processing delays, and creates expensive layout arrangements. Changing DOM objects gives you control over which page elements you want to show to your user.

Put simply, keeping the DOM size small improves site performance and user experience. This, in turn, will improve your score Core Web Vitals .

Warning “avoid excessive DOM size” explained.

Here we will talk about the “avoid excessive DOM size” warning in Lighthouse.

You will encounter this error if:

• There are over 1.500 DOM nodes in total. There are more than 1500 HTML elements on your web page.

• You have reached a maximum knot depth greater than 32 knots. An element is nested in 32 or more parent elements.

• There is a parent node with more than 60 child nodes. There are more than 60 children (list items or table rows) in a parent item.

The "avoid excessive DOM size" warning does not directly affect Lighthouse metrics. While in theory, pages with a large DOM can load fast, but in the real world, they mostly don't.

However, a large DOM size will definitely affect other Lighthouse metrics such as largest content of content (LCP) and cumulative layout displacement (CLS).

How to Measure DOM Size?

You can measure the DOM size using Google's Lighthouse tool, which is built into the Chrome DevTools. Lighthouse reports pages that have more than 1.500 total DOM nodes, a maximum node depth greater than 32 nodes, or a parent node with more than 60 child nodes.

While an excessive DOM size doesn't directly affect your Lighthouse scores, it can negatively impact the real-world performance of your site, leading to slow load times and a poor user experience.

How does excessive DOM size affect page speed?

While the excessive DOM size warning doesn't affect Lighthouse metrics directly, it does affect other metrics which ultimately lead to a lower Lighthouse score.

For example, a large DOM size makes it unnecessarily difficult for a browser to read and parse a web page. As a result, the browser will take longer to load the page on the screen.

Every time a page loads, the web browser needs to download and parse the HTML before it can start generating the DOM tree.

Here are some of the ways an excessive DOM size can affect the performance of your page:

• Increase the number of bytes transferred. Includes multiple nodes that are not displayed to the user on first load. This slows down page loading speed and harms network efficiency, leading to increased data costs and a poor page experience for users.

• Slow down page rendering. The browser consumes more resources as it has to continuously recalculate the position and style of the different nodes. Likewise, site performance also suffers due to complicated styling rules.

• Overflows the memory resources of the user's machine. Continuous interaction with JavaScript queries leads to poor runtime performance and slow page rendering. This results in a bad page experience for your site's users.

The fact is that a large DOM size negatively affects the performance of a web page. Here's a quick look at what else is affected:

• Network efficiency and load performance
• Runtime performance
• Memory performance

How to Reduce DOM Size?

Reducing the DOM size involves optimizing the structure and code of your website. Here are some strategies to consider:

Avoid poorly coded plugins and themes: These can burden your site's code, increase the size of the DOM, and hurt the overall speed and performance of your site. Always check reviews, update dates, and consider investing in premium options.

Minimize JavaScript based DOM nodes: Dynamic elements on your website may bloat it with extra JavaScript nodes. You can fix this by identifying and removing problematic JS files or finding optimized alternatives.

Be careful with page builders: Page builders can sometimes produce bloated code with too many DOM nodes. Some page builders are taking steps to fix these issues, but it's always a good practice to manually check and clean up your HTML.

Do not copy/paste text into WYSIWYG editor: Most editors fail to clean up pasted code, especially when pasted from another rich text source such as Microsoft Word. This can embed many DOM nodes. To avoid this, paste as plain text or clean up the code after pasting.

Split your single page website into multiple pages: If your single page website has a lot of content, consider dividing it into separate pages. This can reduce the number of DOM nodes.

Avoid hiding unwanted elements by using display:none: This CSS property hides elements but doesn't remove them from your HTML markup, causing users to load unwanted elements.

Avoid complicated CSS declarations and JavaScript: These can increase memory usage and slow down your site. These are best avoided if you are dealing with too many DOM nodes.

Specific recommendations for the various platforms and CMSs

Here are various platform-specific recommendations to avoid a large DOM.

WordPress

WordPress, being a dynamic CMS, can sometimes generate a large DOM size if not managed properly. Here are some recommendations:

Use a Light Theme: Themes with a minimalistic design and less JavaScript tend to have a smaller DOM size.

Limit the Number of Posts on a Page: Having too many posts on a single page can increase your DOM size. Limit the number of posts per page in your Reading Settings.

Learn more about WordPress Speed ​​Optimization by following this checklist.

React

React is a JavaScript library for building user interfaces, and it uses a virtual DOM to improve performance. Here are some tips to avoid excessive DOM size in React:

Reuse of Components: Reuse components as much as possible. Not only will this make your code cleaner, but it will also reduce the overall size of your DOM.

Avoid Inline Functions in Render: Inlined functions can cause unnecessary re-renders and increase the size of the DOM. Instead, define the function outside the render method and reference it within the render.

Use Keys in Lists: When rendering lists in React, always use keys. The keys help React identify what elements have changed, added, or removed, and help reduce the size of the DOM by avoiding unnecessary re-rendering.

Shopify

Shopify is a popular ecommerce platform, here are some ways to avoid excessive DOM size:

Minimize App Usage: Every app you add to your Shopify store can increase your DOM size. Use only the apps you need and uninstall any apps you're not using.

Limit the Number of Products on a Page: Similar to WordPress, having too many products on a single page can increase your DOM size.

Limit the number of products per page in your theme settings.

Use a Light Theme: Some Shopify themes are optimized for performance more than others. A well-coded, lightweight theme will have a smaller DOM size. You can find the in-depth Shopify optimization guide here.

Angular

Angular is a platform for building web applications, and it uses a real DOM. Here are some tips to avoid excessive DOM size in Angular:

Use Lazy Loading: Lazy Loading is a design pattern that delays loading of objects until they are needed. This can significantly reduce the initial DOM size of your application. Use TrackBy with ngFor: When using ngFor to loop through an array in Angular, use the trackBy function. This will help Angular keep track of each element and prevent unnecessary DOM manipulation. Avoid Complex Expressions in Templates: Complex expressions in your templates can increase DOM size and decrease performance. Try to limit the complexity of your expressions, or better yet, move the logic into the component class.

Slender Svelte is a newer JavaScript framework that compiles your code into minimal imperative code that directly manipulates the DOM. Here are some tips to avoid excessive DOM size in Svelte:

Use Svelte's Integrated Status Management: Svelte's built-in state management is designed to be efficient and minimize DOM size. Avoid using external state management libraries unless necessary. Avoid Unnecessary Components: While components are useful for organizing your code, unnecessary components can increase the size of your DOM. Keep your components as simple as possible and avoid unnecessary nesting.

Drupal

Drupal is a powerful CMS that allows many customizations. Here are some tips to avoid excessive DOM size in Drupal:

Use Views Wisely: Views in Drupal can generate a lot of HTML, increasing the size of your DOM. Limit the number of fields and results in your views to only what is necessary. Use Custom Templates for Complex Fields: If you have fields with a lot of data, consider using a custom template to streamline the generated HTML. Disable Unused Modules: Each enabled module can add to the size of your DOM. Disable and uninstall any modules you are not using. Learn more about Drupal Performance Optimization here.

Magento

Magento is a robust ecommerce platform. Here are some tips to avoid excessive DOM size in Magento:

Limit the Number of Products on a Page: Similar to WordPress and Shopify, having too many products on a single page can increase your DOM size.

Limit the number of products per page in your catalog settings.

Use the Plate Catalogue: Enable flat catalog for products and categories to reduce your database size and speed up your site. Merge JavaScript and CSS Files: Magento has a built-in function to merge JavaScript and CSS files into one file. This reduces the number of HTTP requests and can help reduce the size of your DOM.

Vue.js

Vue is a popular JavaScript framework for building user interfaces. Here are some tips to avoid excessive DOM size in Vue:

Use v-if Instead of v-show: v-if renders the element in the DOM only if the condition is true, while v-show renders all elements in the DOM and uses CSS to hide the ones that don't satisfy the condition. Using v-if can reduce the initial DOM size.

Use Lazy Loading with Vue Router: As with Angular, lazy loading can significantly reduce the initial DOM size by loading components only when they are needed. Avoid Registering Components Globally: Register components only where they are needed to avoid unnecessary additions to the DOM.