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.
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:
- Lazyload by Wp Media: Lazyload videos and iframes.
- FlyingPress: Lazyload elements(Including comments section).
- 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.
⚠️ Lazyloading elements may have unwated SEO effects. Test wisely
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 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.
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 Unused CSS Core Web Vitals Optimized!