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 fix its excessive DOM size warning on Pagespeed.
Delay Google maps, iframes, and images until user-interaction
Lazyload an iframe JS to reduce dom size, if it’s not possible, consider using an image instead of an iframe linking to the iframe itself. Lazyload the Google Maps and images too.
Be sure to use the latest version of your page builder
Page builders are the most flagged with large dom size by Pagespeed, consider applying all improvements necessary to improve your website DOM structure, if you’re using a page builder.
Use CSS variables for styling and avoid repeating HTML classes
When you’re making a theme, no matter what tool you’re using, consider CSS variables for reducing repeating styling and scale the design system of our site/app.
Consider fewer page elements, change the theme
Use WordPress reusable blocks to build using fewer classes.
Consider asking the developer to remove unwanted code
If you bought a theme, ask the theme dev to remove unwanted code, and make a custom version for your specifications. Unwanted code can add size to the DOM. Consider the following unwanted functions:
- Remove support for older browsers, if don’t want older browser supports.
- Any other function you’re not using but it’s adding classes and code to your DOM.