Skip to main content

How to Avoid an Excessive DOM Size

· 8 min read
Shing Kuo

Avoid an Excessive DOM Size

Excessive DOM Size can be detrimental to Web Performance and today, we are going to take a look at how you can avoid an excessive DOM size.

We will also take a look at how the DOM size can be reduced on various different 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 the document's 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.

A large DOM size can affect a webpage's performance negatively. It can increase data costs, slow down page rendering, and overwhelm the memory resources of a user's device. It can also increase the Time to First Byte (TTFB), which measures how long it takes for a client's browser to receive the first byte of the response from the server.

How to Measure DOM Size​

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

Although an excessive DOM size does not directly affect your Lighthouse scores, it can negatively impact your site's real-world performance, leading to slow load times and a poor user experience.

How to Reduce DOM Size​

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

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

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

  3. Be cautious with page builders: Page builders can sometimes produce bloated code with an excessive number of DOM nodes. Some page builders are taking steps to resolve these issues, but it's always good to manually check and clean your HTML.

  4. Don't copy/paste text into the WYSIWYG editor: Most editors fail at cleaning up pasted code, especially when pasted from another rich text source like Microsoft Word. This can embed a lot of DOM nodes. To avoid this, paste as plain text or clean up the code after pasting.

  5. Break down your one-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.

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

  7. Avoid complicated CSS declarations and JavaScript: These can increase memory usage and slow down your site. It's best to skip them if you're dealing with an excessive number of DOM nodes.

Platform Specific Recommendations​

Here are various platform specific recommendation 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:

  1. Use a Lightweight Theme: Themes with minimalistic design and less JavaScript tend to have a smaller DOM size.
  2. Limit the Number of Posts on a Page: Having too many posts on a single page can increase the 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 an excessive DOM size in React:

  1. Component Reusability: Reuse components as much as possible. This will not only make your code cleaner but also reduce the overall size of your DOM.
  2. Avoid Inline Functions in Render: Inline functions can cause unnecessary re-renders and increase the DOM size. Instead, define the function outside of the render method and reference it inside render.
  3. Use Keys in Lists: When rendering lists in React, always use keys. Keys help React identify which items have changed, are added, or are removed and help reduce the DOM size by avoiding unnecessary re-renders.

Shopify​

Shopify is a popular e-commerce platform, and here are some ways to avoid an excessive DOM size:

  1. Minimize the Use of Apps: Each app you add to your Shopify store can add to your DOM size. Only use necessary apps and uninstall any apps you're not using.
  2. Limit the Number of Products on a Page: Similar to WordPress, having too many products on a single page can increase the DOM size. Limit the number of products per page in your theme settings.
  3. Use a Lightweight Theme: Some Shopify themes are better optimized for performance than others. A lightweight, well-coded 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 an excessive DOM size in Angular:

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

Svelte​

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

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

Drupal​

Drupal is a powerful CMS that allows for a lot of customization. Here are some tips to avoid an excessive DOM size in Drupal:

  1. Use Views Wisely: Views in Drupal can generate a lot of HTML, increasing your DOM size. Limit the number of fields and results in your views to only what's necessary.
  2. Use Custom Templates for Complex Fields: If you have fields with a lot of data, consider using a custom template to simplify the HTML that's generated.
  3. Disable Unused Modules: Each enabled module can add to your DOM size. Disable and uninstall any modules you're not using.

Find more about Drupal Performance Optimization here.

Magento​

Magento is a robust e-commerce platform. Here are some tips to avoid an excessive DOM size in Magento:

  1. Limit the Number of Products on a Page: Similar to WordPress and Shopify, having too many products on a single page can increase the DOM size. Limit the number of products per page in your catalog settings.
  2. Use Flat Catalog: Enable the flat catalog for products and categories to reduce the size of your database and speed up your site.
  3. Merge JavaScript and CSS Files: Magento has a built-in feature to merge JavaScript and CSS files into one file each. This reduces the number of HTTP requests and can help reduce your DOM size.

Vue.js​

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

  1. Use v-if Over v-show: v-if only renders the element to the DOM if the condition is true, while v-show renders all elements to the DOM and uses CSS to hide those that don't meet the condition. Using v-if can reduce your initial DOM size.
  2. Use Lazy Loading with Vue Router: Just like with Angular, lazy loading can significantly reduce your initial DOM size by only loading components when they're needed.
  3. Avoid Registering Components Globally: Only register components where they're needed to avoid unnecessary additions to the DOM.

Conclusion​

While fixing your DOM issues won't directly improve your Lighthouse scores, it can significantly enhance your site's real-world performance. By reducing your DOM size, you can increase your site's load time, improve your page's perceived performance, and provide visitors with a better user experience. This, in turn, can lead to lower bounce rates, increased average time spent on your site, and boosted conversions.