Top ways to reduce DOM size in Wordpress

Boost your website speed & performance.

*No spams

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 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 for 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. 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.

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, 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.

Get your WordPress Core Web Vitals optimized and your pages faster!

guest

0 Comments
Inline Feedbacks
View all comments