Top 5 Ways to Avoid Excessive DOM size in WordPress

Updated on January 23, 2023, by

Avoiding an excessive DOM size in WordPress is partially making a good theme choice. Consider researching websites that use the theme before installing it on your website. Test those websites on Pagespeed and verify their performance, also look for historical Core Web Vitals performance.

If you already have a bad-performing website, consider the following top 5 ways for improving or fixing excessive DOM size warnings on Pagespeed.

Update to the latest version of your page builder

Page builders are the most flagged with large dom size by Pagespeed, 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.

Use fewer page elements with a lightweight theme or block 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 fastest WordPress theme post to choose a lightweight theme or Best WordPress Full Site Editing themes & plugins for a block or full site editing themes/plugins.

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.

Lazyload or remove unused HTML code

Lazyload iframes and videos to reduce dom size, or remove assets from an unused plugin. Consider the following plugins:

⚠️ Lazyloading elements may have unwated SEO effects. Test wisely 
  • 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.

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.

Get your WordPress Core Web Vitals Optimized!

Leave a Comment