Top 5 Ways to Avoid Excessive DOM size in Wordpress

Avoiding an excessive DOM size in Wordpress mainly relates to your theme choice.

If you have a site with a large DOM, consider the following to fix

Remove unused code

Remove assets from an unused plugin. Consider the following plugins:

• Asset Cleanup: Remove unused assets from unused plugins and reduce DOM size.
• Asset Cleanup Pro includes inline scripts to dequeue and more settings for Core Web Vitals.

Lazyload images won’t reduce DOM size.

Update to the latest version of your page builder

Page builders are the most flagged with large DOM size, consider looking into recent feature improvements made to improve the page-builder DOM structure.

Elementor recently added support for Flexbox Containers, which makes pages leaner than using columns for elements. Head over to Elementor Flexbox playground to learn and test more about this feature.

Switch to a lightweight theme or plugin

Use Wordpress blocks and full site editing themes to build using fewer classes(elements). Wordpress FSE(Full site editing) themes and new block plugins offer a performant yet intuitive experience for building a website.

Consider our Best block themes, Fastest Wordpress theme, or Best WordPress Full Site Editing themes & plugins posts when making a new theme decision.

FSE themes have almost all the functionalities of page-builders, are easier to use, and are more flexible when it comes to building websites, and even just landing pages.

If you’re using a plugin and identified that it is contributing to a large DOM, consider a leaner alternative.

Slider plugins can add a lot of HTML code to your site, run an A/B test, and compare conversion or any metrics using a background image and text instead. It can improve both your Core Web Vitals and also your SEO, as some slider plugins don’t properly format the text content, by using inappropriate headings or paragraph tags.

Ask your plugin developer to remove unused code

If you bought a theme or a plugin, ask its developer to remove unused code and make a custom version for your specifications. Unused code can add size to the DOM. Consider the following unused functions:

• Remove support for older browsers, if don’t want older browser support.
• Any other function you’re not using but it’s adding classes and code to your DOM.

Avoid using hacks to hide elements

While using CSS code visibility:hidden to hide elements can be convenient, it has a serious adverse effect, your DOM can grow a lot without you seeing it. You can check if your element is hidden using visibility:hidden here.