Top ways to reduce DOM size in Wordpress

Pagespeed flags pages with DOM size that exceed 1,400 nodes. 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.

Update 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 for a lightweight theme or plugin

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

Block themes have almost all the functionalities of page-builders, are easier to use, and are more flexible for building websites, or landing pages.

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

Slider plugins can add a lot of HTML code to your site. Consider running 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.

Avoid using hacks to hide elements

While using CSS code visibility:hidden to hide elements can be convenient, but it can have adverse effects, and your DOM can grow without you seeing it. You can check if your element is hidden using visibility:hidden here.