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.
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.
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.
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-
When it comes to rendering large lists, you can use virtual scrolling with the Component Dev Kit (CDK).
- 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.
- Minimize unnecessary re-renders using shouldComponentUpdate, PureComponent, orReact.memo.
- 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.
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.
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.
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.
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.