Solvedelementor Improve performance: Reduce DOM elements

Prerequisites

  • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

Mentioned before but ticket closed and no real answer:
#6534
#2100

Right now we have way too many DOM elements on our mockup 2000+ My aim is to be below 800 this will be hard with page builders I know. But we should still aim for it and be maximum on a more comprehensive design eb below 1500.

We have no advanced custom things so. Don't see how elementor can add that many divs? Why not add ID and class directly to the tag of h2 or span or p instead of wrapping it into 2 divs?

Of course a plain html page would have minimum DOM and that we don't want but I still consider this amount of DOM elements not to be needed to structure this design. I've seen Divi pages etc use below 1500. Maybe this is a pure elementor issue according to you? I will address a ticket to them tomorrow morning as well.

Which will reduce or use fewest DOM elements.

Section + section + section
or
Section + inline section widget + inline section widget

Help me make the site much easier for browsers to render with what we have today and please comment on the DOM elements and make elementor build pages more lightweight when it comes to DOM elements.

43 Answers

βœ”οΈAccepted Answer

If you have concrete suggestions for reducing the number of DOM elements - we are open to hearing it.

@shilo-ey do you mean isolated testcases?

Here's one to get the ball rolling. I created a new page using the "Elementor Canvas" layout. I added a single heading element with the default properties. The resulting markup:

<div data-elementor-type="post" data-elementor-id="462" class="elementor elementor-462" data-elementor-settings="[]">
<div class="elementor-inner">
<div class="elementor-section-wrap">
<section class="elementor-element elementor-element-3c77f58 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="3c77f58" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-element elementor-element-8d5dee6 elementor-column elementor-col-100 elementor-top-column" data-id="8d5dee6" data-element_type="column">
<div class="elementor-column-wrap  elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-09a1be6 elementor-widget elementor-widget-heading" data-id="09a1be6" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Hello World</h2>	</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

It would be great to reduce the number of the nested div elements as much as possible. In this specific case, ideally, there would be a single h2 element and no divs.

Other Answers:

I've been using Elementor for about 5 years now (1st year free and then PRO) and have quite a few sites running on it. My major issue has always been the constant safe loading/styles breaking up and having to clear, reset, clear, reset over and over again, but to the point at hand.... I gave up on the DOM issue and my solution was a "pick your poison" type of approach. Ideally, the less plugins, the better; but what if you actually need more plugins to offset the harm of the others?

Aside from W3TC, I found that adding Hummingbird to handle asset optimization (which works very well with Cloudflare by the way) + Asset Cleanup + CAOS & OMGF solved every page-speed issue except the DOM/Facebook Analytics nightmare which I tried fixing with "Host Everything Locally (HELL)", but it didn't work for Facebook.

WordPress loads many resources/plugins on pages that you probably just use in one page. With Asset Cleanup you take care of that little problem and that's how I got to improve the score on the front-page (working on rest now).
Another problem is that I have no idea why "jquery" has not been updated to the latest stable version (Current version is red flagged with two security issues on Lighthouse). I did try and update manually, but then the Elementor position breaks (Navigator + Right Click edit) and neither your icons or templates load. All you get is the empty dialog box.

ELEMENTOR... Take a break from adding new features and try to make your platform more stable and fix way overdue issues (Like the post excerpt length and many other bread and butter functions used on a daily basis). There will be the day, when one of those more efficient page builders are going to figure-out and develop a way of importing from one builder to another and you will be the first one on the their list.

The more I'm looking into performace issues with Elementor, the more I'm sceptical about Elementor's future and Elementor's focus on being a professional tool.

Professional tool should produce professional results. WebFlow produces clean code and is super-fast. Oxygen produces clean code and is also fast. Elementor produces huge amount of divs, loads unnecessary files and is just slow, if you build something more complex. (All the reasons why professionals hate page builders.)

I've been trying out Oxygen page builder and my early conclusion was this:

  • It's posibble to build more complex websites with Oxygen.
  • Performance is on a different level with Oxygen.
  • Elementor is nicer and more comfortable to use.

I'm still not ready to switch from Elementor, but I'm more and more concerned about Elementor's focus. Is it going to be a "toy" page builder for amateur users, or is it going to be a professional tool (like WebFlow) for WordPress that professionals can confidently use to build professional websites?

Google PageSpeed Insights hates Elementor, which must also be bad for SEO.

I really hope something can be done about fundamentally improving Elementor's performance.

+1
Oh yes, the number of nested divs is quite insane and most likely unnecessary.

On the other hand I understand, that such a reduction could cause significant backward compatibility issues. Some legacy render option would be needed if this update would come to life.

Little bit offtopic, but concerning other types of bloat (CSS, JS): https://www.youtube.com/watch?v=RmIrqJ9Wd0U

Definitely not independent and not without bias, but the point is quite clear and cannot be easily ignored.

Just to clearly declare it here: I'm definitely not an Oxygen user, nor the fond of it, but the way it handles the code is way better than Elementor's and shows the other page builders it's doable. I'm pointing this out here, because the clarity and bloat of the code concerns me a lot and as far as it's handled by Elementor, doesn't make me happy. And that's why I'm still on the search of the page builder Holy Grail and still without the success. Oh my, how happy would I be, if it was Elementor! Alas it isn't. At least not yet. Hopefully it will be in the future and this is one thing that would helped it a lot.

Related Issues:

27
elementor Accordion - setting for all closed at start
Yeah not seeing a fix in 1.8.x but here's some code you should be able to copy/paste without modding...
19
elementor πŸ“£ Elementor v3.1 Beta 4 Release πŸ“£
As most of the users has been hungry for performance and custom breakpoint improvement ...
15
elementor data-tab link anchor to tabs
Here is my function as I could not wait :) For anyone who needs it :) Hey ...
15
elementor Add Filters and Hooks to Search Form Widget
@pako69 If you need to force Elementor's search to only use a specific post type lets say product fo...
14
elementor Popup - Close when you click on a button
@JoeDarko Currently this feature is not supported but we will look into it in the future if we see a...
14
elementor Improve performance: Reduce DOM elements
If you have concrete suggestions for reducing the number of DOM elements - we are open to hearing it...
13
elementor How to hide some Elementor Pro widgets from the frontend editor?
@norewp - thank you The following is sample code for removing everything (for now > I suppose in the...
12
elementor Include custom templates in Elementor template library (Not My template)
@dinhtungdu Sure feel free to use this idea! If you want Prerequisites I have searched for similar f...
12
elementor Triggering a popup by using a class or custom JS code
@bkjproductions (and for anyone else looking for a JS only solution) you can use: In the example abo...
9
elementor "Edit with Elementor" sub menu item in admin bar not showing on WordPress 5.6
This works for me.. add to your site CSS: #wp-admin-bar-elementor_edit_page:hover > div { display: b...
9
elementor Elementor 1.9 - Beta Release (RC3 Updated)
v1.9 Beta Version RC3 We just released a new beta version please update your version to v1.9.0 RC3 ...
8
elementor My templates -> Display Conditions: support polylang for localisation
@ziogaschr Elementor can't guess which multilingual 3rd party plugin you are using and we don't want...
8
elementor ACF relationship field as Posts source
This was such a pain in the ass Thank you for finally solving this I'm confused as to why this isn't...
6
elementor Elementor v2.9 Beta 5 (RC3) Release πŸ“£
We just released a new beta version please update your version to v2.9 Beta 2 =========== Beta 5 UPD...
6
elementor πŸ“£ Elementor v3.2 Beta 4 Release πŸ“£
The following snippet was recommended to remove eicons: Please confirm this is still applicable for ...
6
elementor Elementor Popup doesnt run with Contact Form 7
Hello @hazelnutz77 Here is a tidier and more versatile piece of code: Add this to your functions.php...
5
elementor πŸš€ Elementor v3.4 Beta 5 Release πŸš€
@fabianenzensperger - thanks for your feedback We are aware about the UI problem with the global fon...
5
elementor Animated Headline Do Not Loop?
Not the most graceful solution but you can do this with some CSS How can i make the animated headlin...
4
elementor "javascript:history.back()" bug since last update
Hi @Code711 Thanks for your input We removed the option to add JavaScript to the URL to avoid potent...
4
elementor BUG: Tabs Widget content enlarges from top left corner when switching tab (after latest updates)
So here is how I temporarily solved this issue a bit hackish solution but it works: It helped in my ...
4
elementor Add "Child Pages of Parent" To "Posts" Widget
@stevenmonson This can be easily done using Custom Query Filter ex: It would be so nice if the Posts...
4
elementor limit DATE fields in Elementor Forms
I just figured this out and I thought it would be useful for everyone because I haven't managed to f...
4
elementor Elementor Pro Bug: The Cards Skin displays only one Badge
@ramiy Not a bug this is the way it works Now as a feature request this should be possible with #444...
4
elementor Pop up menu closing on clicking link
@ErwinvanDeutekom You can use JS to catch a click on a link in your popup and trigger a close action...
3
elementor Elementor Pro Forms MailChimp Conditional Opt-in Field
I needed this functionality too I couldn't (quickly) find usable hooks in Elementor ...
3
elementor Elementor seems to break swiperJS (5.3.0) breakpoint settings (swiper navigation not working)
With Elementor Version 2.9.1 the situation improved but is not fixed completely ...
3
elementor Shape divider above content after updating Elementor.
Hello It's not an Elementor update issue We have the same on 3.0 and 2.9 The problem is only on Chro...
3
elementor How do I change the Date Format in Forms?
You can follow the solution given here: #3605 (comment) minus the translation part ...
192
theme ui Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.
Just adding here in case anyone sees this error message after upgrading a project to create-react-ap...
94
server Upgrade fails with - Column name "oc_flow_operations.entity" is "NotNull", but has empty string or null as default
I just got this error while upgrading from 17.0.10 to 18.0.10 Also with me the column entity did not...
44
server Thunderbird 60.x unable to use caldav/carddav
By disabling the newly introduced parameter network.cookie.same-site.enabled the problem can be solv...
41
server Redirect loop login / Renewing session token failed
Hello I had a similar issue regarding the redirect mine was related to url overwrite protocol option...
37
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
29
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
27
ant design landing ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
temporary way to fix this problem:ant-design/ant-design#23624 😒 remove less-loader@6.0.6 and instal...
26
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
26
server Security and config warnings
Finally got this sorted as well How to use GitHub Please use the πŸ‘ reaction to show that you are af...
23
server Syntax error or access violation: 1118 Row size too large
Changing the ROW_FORMAT to DYNAMIC did not solve the issue Steps to reproduce Run Nextcloud 16.0.0 f...
21
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
18
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
18
server [Nextcloud 15] Nextcloud clients cannot log in after upgrading from 15.0.0 to 15.0.2
nextcloud/android#3430 TL;DR: try adding this to your config.php: 'overwriteprotocol' => 'https', ...
18
server [Updater] Could not find resource js/config.js to load
Same issue on Nextcloud 20 PHP 7.4.3 MYSQL 8 APACHE2 Web server error logs How to use GitHub Please ...
18
blueprint First-class support for @import'ing blueprint scss files
@Ciantic It does work with the generated .css files you have to use the Webpack alias resolution ~ c...
17
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
16
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
16
server Failed Code Integrity because of EXTRA_FILE after Update from 16.0.1 to 16.0.2
Okay so for everyone getting this two things: Delete the cypress.json and the cypress folder in the ...
16
server OSX calendar sync fails (via caldav)
@dhowe I managed to get it working on High Sierra if I select the advanced profile when adding a new...
16
theme ui integrating theme-ui with storybook in a gatsby project
I managed to fix this with the below main.js storybook config As @hasparus says you can force storyb...
13
MaterialDesignInXamlToolkit Could not load file or assembly 'MaterialDesignColors, Culture=neutral' or one of its dependencies
For folks still encountering this issue: this post by Carlos Anderson explains what's going on: Ther...
12
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor 1.6.0.1 and meteor add materialize:material...