Avoiding an excessive DOM size in WordPress is partially making a good theme choice. Consider research into websites that uses the theme, before installing it on your website. Test those websites on Pagespeed and verify their performance.
If you already have a bad-performing website, consider the following for improving or fixing excessive DOM size warnings on Pagespeed.
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.
Consider fewer page elements, change theme or plugin
Use WordPress blocks to build using fewer classes(elements). WordPress FSE(Full site editing) themes and new block plugins offer a performant yet intuitive experience to build a website. Consider our Fastest WordPress theme post to choose a lightweight theme.
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 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 appropriate heading 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:
Lazyload by Wp Media – Lazyload videos and iframes
FlyingPress – Lazyload elements(Including comments section)
⚠️ Lazyloading elements may have unwated SEO effects. Test wisely
Asset Cleanup – Remove unused assets from unused plugins and 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.
Get your Core Web Vitals optimized