4 best ways to avoid excessive DOM size in WordPress

Last updated on September 11, 2022 | By

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.

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.

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

Leave a Comment