Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Avoid an excessive DOM size

Overview

A large DOM tree will likely increase memory usage, cause longer style calculations, and may produce costly layout reflows. Manipulating the DOM elements helps modify the page content depending on what you want the user to see.

Avoiding an excessive DOM size is in the best interest of your page, particularly within the context of page experience.

How does your site score on this audit?

How does a large DOM tree affect page performance?

Whenever a page loads, the browser downloads and parses the HTML before it begins building the Document Object Model (DOM) tree. This DOM tree contains all the HTML elements comprising the structure and content of the webpage.

A large DOM tree can negatively affect your page performance in the following ways:

  • Unnecessarily increase the number of bytes transferred
    • Due to the inclusion of multiple nodes that aren't initially visible upon first load. This affects your page's network efficiency and load performance, translating into higher data costs and slower page loads for your users.
  • Drastically slow down the rendering of your page
    • Due to the browser constantly needing to recompute the position and styling of various nodes. This is made worse in combination with complicated style rules, affecting your page's runtime performance.
  • Overwhelm the memory capabilities of your users' devices
    • Due to the large-scale interaction with JavaScript queries.

Optimizing the DOM size improves runtime performance, speeds up page rendering, and helps deliver a positive page experience to your users.

How does GTmetrix trigger this audit?

GTmetrix reports the total DOM elements for a page, the page's maximum DOM depth, and its maximum child elements. Depending on the DOM size (i.e. number of DOM elements), this audit's impact score will change.

This audit gets triggered if your DOM size exceeds 818.

How to avoid an excessive DOM size?

Preventing an excessive DOM size for your webpage isn't easy as there is no one-size-fits-all solution.

When you're building your website, it is a good practice to integrate certain processes in your development workflow so that your production website doesn't suffer from an excessively large DOM size.

For example - when using a CMS to build your website, pay attention to the themes or plugins used as they may inject too many elements, some of which may be unrelated to your site functionality.

In many cases, these features are hidden, making you think that there isn't any code. Where possible, remove unwanted code that is irrelevant to site functionality.

Remember that the more complex your page is, the larger your page's DOM size likely is.

To learn more about how to prevent an excessive DOM size for your page, read this article.

Note: This is an expert-level optimization

Only experienced developers are advised to improve this audit.

Summary

 *****