Theme causing an excessive DOM size & SLOW site (Luke, Artem or Aizaz ONLY)

Hello,

I have a HUGE issue with the Woodmart theme causing an excessive DOM size

I would first like to point out that I am using the following to help increase the speed of my site, but the huge DOM size from the theme is still weighing it down:

Server host: Cloudways
CDN: Cloudflare
Cache & speed optimisation: WP Rocket (still working on settings for speed, but not related to DOM size)
Database & table optimiser: WP Optimise
*all plugins are updated
*woodmart theme is updated to version 7.0.2 (which actually caused a bit of a higher DOM size than the previous version)

Even though I am using these to speed up my site and getting further assistance from WP Rocket, my DOM size is huge!

I even tried to switch themes and switching to the default theme, there was no issue with the DOM size. Please see below:

GTmetrics score:
1. AFTER Update to latest wood mart theme: Version: 7.0.2 DOM:
Statistics:
GRADE: F
Total DOM Elements: 4083
Maximum DOM Depth: 31
Maximum Child Elements: 204
Speed: 9.7 sec
*video: in private content*

2. SWITCHING THEMES TO DEFAULT THEME
Statistics:
GRADE: D
No issue with DOM size
Speed: 7.9 sec
*video: in private content*

I have contacted WordPress about how to decrease the DOM size and they mention that is the woodmart theme and to contact you guys about this:

“It definitely looks like your theme. You’re using a commercial/premium theme/plugin, so please use their official support channel. We feel they are best equipped to support their products.
https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/20264492/support”

I also am working with WP Rocket and they also mention the DOM size is an issue as seen here: https://snipboard.io/Le9G5B.jpg

“Avoid an excessive DOM size
https://jmp.sh/LMaoXZQ
This is something you would have to address directly through the design of your site.

A DOM element is something like a DIV, HTML, BODY, etc. element on a page — in other words, these have to do with the HTML structure of your pages, so you’d have to actually change that structure outside WP Rocket in order to satisfy this suggestion.

You can find our related doc here:
https://docs.wp-rocket.me/article/1412-avoid-an-excessive-dom-size”

Looking at my page source, https://snipboard.io/Yh1vkl.jpg it shows 2622 “div” in the html and does not look like it’s set for optimised DOM size.

Therefore I need your assistance in fixing the code in your theme by removing unused code and better optimise it to decrease the DOM size.

Please advise.

Hello,

The number of DOM elements is generated in the process of content building. All Elementor page builder elements are DOM elements. If you want to reduce DOM elements you will have to reduce the content: widgets, products, menu items, and others.

Best Regards

Hello,

I am still using Elementor when I switched to the default woocommerce theme and had no DOM issue there, so why is it only with the woodmart theme?

Please advise.

1. USING WOODMART THEME
GRADE: F
Total DOM Elements: 4083
Maximum DOM Depth: 31
Maximum Child Elements: 204
Speed: 9.7 sec

2. USING DEFAULT WOOCOMMERCE THEME
Statistics:
GRADE: D
No issue with DOM size!
Speed: 7.9 sec

Hello,

Yes, it is natural because when you switch to another theme, the pages become much lighter. It doesn’t contain most of the features and elements you added to your website using WoodMart.

Kind Regards

If you want to reduce DOM elements you will have to reduce the content: widgets, products, menu items, and others.

Unfortunately, I run an online marketplace with multi vendors and products will just keep on growing. We cannot decrease what you mentioned so therefore the DOM sounds like it will be an issue. Is woodmart not a good theme option for me then?

Does woodmart try to optimize DOM size? https://snipboard.io/Yh1vkl.jpg it shows 2622 “div” in the html and does not look like it’s set for optimised DOM size.

After doing a search on woodmart theme, I see it’s one of the slowest themes out there.
https://woocart.com/blog/fastest-woocommerce-theme

Please advise.

Hello,

As we can see from your screenshot, all DIV elements there have specific CSS classes and they come from some of the installed plugins, not from the theme.
This article can’t be objective and you can be sure that WoodMart is one of the most optimized themes on the market.

Kind Regards

Yes that is only a small screen shot of all the divs showing. You can also go to my site and check them all yourself (check the private content area).

As I mentioned, I contacted wordpress regarding the DOM size and he confirmed it’s coming from the theme. Now you are saying it’s coming from the plugins. I use the same plugins in the default woocommerce theme and there’s no DOM size issue.

Please explain.

In this case, we can return your money back if you still think that all DOM elements are related to our theme only. We can’t simply remove a part of the elements. Every DIV does some function and you can simply remove it. If you see some really unnecessary DIVs on your website just let us know and we will optimize that part.
Take into account that you have a lot of HTML tags from installed plugins at. For example, Elementor adds ~1200 elements, cmplz has 300+ tags, and so on.

Kind Regards

[Author]

Posts