🔥 🥳 Get your Wordpress Pagespeed optimized today for $99 🔥 🥳 Conditions apply.

How to avoid an excessive DOM size in WordPress

Last updated on October 4, 2021 | 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 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.

Leave a Comment