How to Fix “Avoid an Excessive DOM Size” in Lighthouse

Site owners should prepare their sites for Google page experience update. This implies that you should focus on DOM size also as it is a ranking signal. You may see a warning like “Avoid an excessive DOM size” from Google Lighthouse. It means having too many DOM Nodes or HTML tags on your page that are nested too deep.

This can increase your page’s memory usage, produce costly layout reflows, cause longer style calculations, and slower loading time. In contrast, an optimized DOM size offers the best user experience and leads to increased conversions. In this guide, we will show you how to fix avoid an excessive DOM size in Lighthouse and improve your page performance. 

What is DOM?

First, let’s understand what DOM actually is. DOM implies Document Object Model that is a tree diagram of objects in your HTML. Every time while loading a web page browsers create a structure of the objects called DOM. 

What is DOM

The following are the key terms of DOM:

  • Nodes: All elements or tags (i.e. HTML, body, head, H1, H2, etc) that constitute the HTML structure of the page are called nodes.
  • Depth: The total number of elements of a DOM’s branch is known as depth.
  • Child Element: The elements below each parent node are called child elements.

Whenever you add an image, paragraph, module or widget, link, and other things from your page builder, you are adding additional nodes to the DOM. in this way, the size of the DOM increases. 

What is “Avoid an excessive DOM Size” in Lighthouse?

Before anything, you should run Lighthouse on your web page. Do the following to run Lighthouse”

  • Press Ctrl+Shift+j or Command+Option+j on Mac to open DevTools.
  • Choose Lighthouse and select all the categories.
  • Hit the “Generate Report” button.
Avoid an excessive DOM Size

Lighthouse will show you the above warning if your page-

  • Have more than 1500 DOM nodes in total.
  • Have reached more than 32 node depth.
  • Have a parent node with greater than 60 child nodes.

How to Fix “Avoid an Excessive DOM Size” in Lighthouse?

Focus on creating DOM nodes only when needed and destroy those that are not needed. This should be your first priority. Other than that, to resolve the “Avoid an excessive DOM size” warning you should find out its origin.

Avoid an Excessive DOM Size

As shown in the above section, Lighthouse will help you by showing the maximum DOM depth and child elements location. Then, check out the DOM by using your web browser’s DOM inspector.

Currently, if you’re shipping a large DOM tree, you can try loading your page and noting manually the nodes that are displayed. You can remove the undisplayed nodes from your initially loaded document and create them after relevant user interaction. For example, scroll or button click.

If you can’t avoid a large DOM tree, you can simplify your CSS selector to improve rendering performance. Following are some static-specif guidance for optimizing the DOM size-

Angular

When it comes to rendering large lists, you can use virtual scrolling with the Component Dev Kit (CDK).

React

  1. Use a “windowing” library like react-window to minimize the number of DOM nodes created if you are rendering many repeated elements on the page.
  2. Minimize unnecessary re-renders using shouldComponentUpdate, PureComponent, orReact.memo.
  3. Skip effects only until certain dependencies have changed if you are using the Effect hook to improve runtime performance.

Preventing the excessive DOM size isn’t that easy, as one size doesn’t fit all solutions. Therefore, you should focus on implementing the best practices while building your website.  Now, let’s see the things that you can apply to fix avoid an excessive DOM size.

1. Never Use Poorly Coded Plugins or Themes

Plugins like the calendar plugin or slider create a large number of DOM nodes. You should avoid them or simply replace them if using them and look out for more optimized ones.

Similarly, your poorly coded plugins and templates can impact the website’s performance badly. In this situation, you should rewrite the template parts and start from scratch. Also, by starting using a streamlined editor you can get rid of this bloated code.   

2. Reduce DOM Nodes That Are Created by JavaScript

JavaScript like a chat widget can create an excessive number of DOM nodes into your page’s DOM. You can fix this issue by deleting the JavaScript file or using an optimized widget with the same functionality.

3. Avoid Page Builders That Generate Bloated HTML

Often, Elementor and WPBakery create bloated code with a great number of DOM nodes. Well, it’s an integral part of their workflow and there’s no easy solution to this. However, by cleaning up the bloated code and modifying the workflow, you can fix this issue. Fortunately, to reduce this bloat, the developers of Elementor include some DOM improvements recently. Now you can optimize the DOM setting from Elementor as well.   

Avoid Page Builders That Generate Bloated HTML

4. Don’t Copy-Paste Text into The WYSIWYG Editor

WYSIWYG editors like TinyMCE don’t clear copy-pasted code. They especially do a poor job when pasted from another rich text source like Microsoft Word. Along with copying the text, it copies the styles also this implies it creates additional DOM nodes. 

Don’t Copy-Paste Text into The WYSIWYG Editor

So, the best way to avoid this issue is to stop pasting texts into the editor. Also, don’t forget to clean up those pages which already have pasted bloated text. For this process, an HTML cleaner will work best. 

5. Implement Lazy Load and Infinite Scroll

To speed up initial page rendering, implementing lazy loading selected parts is a great way for your website. For example, you can use a lazy loading module for your footer, images on product catalog or category pages. Also, you can limit the maximum number of posts on each blog page, and it’s best not to exceed 10 posts per page. You can implement infinite scrolling on the web page to lazy loading can speed up the page loading time. It will help the users in the time of scrolling repeated elements like blog posts or products.    

6. Instead of Creating One Long Page Create Multiple Pages

If your web page shows different content like blog posts, contact, products, and others it can lead to a large number of DOM nodes. The content itself created many DOM nodes therefore, splitting the large pages into multiple ones can reduce the DOM nodes numbers.  

7. Improve Page Rendering

Usually, while loading, browsers render all elements of a page. In this case, if you use the CSS content visibility, it can lessen the impact of excessive node sizer. This CSS content visibility instructs browsers to skip style, paint, and layout until the user scrolls down the page. 

8. Avoid Memory-Intensive JavaScript and Complicated CSS

If you are dealing with a large number of DOM nodes on your page, you have to be very careful while dealing with JavaScript and CSS declarations. Avoid using memory-intensive JavaScript like document.getElementsByTagName(‘div’); and complicated CSS like div:last-child. Both these will help you to keep the DOM size small. 

Conclusion

The larger DOM size can negatively affect your site performance and maximize the page loading time. So, you should focus on simplifying your HTML page structure and remove the unwanted elements.

Throughout this guide, we have shared all the measure steps that can help you to fix avoid an excessive DOM size in Lighthouse. By applying them, you can ensure that the DOM size of your website is well-optimized. Also, this thing will help you to improve your website’s UX.

Leave a Comment