The optimized DOM output experiment aims to improve performance by decreasing the number of wrapper elements present in the HTML that is generated by Elementor.
Important: This experiment includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the Experiments stage only, users can test the new optimized DOM output on test sites only to avoid damaging existing sites.
Note: This experiment is automatically active on all NEW sites with a new install of Elementor only.
How To Use This Experiment
- Go to Elementor > Settings > Experiments tab.
- Select Active from the Optimized DOM Output dropdown.
Click the Save Changes button.
More About The Optimized DOM
Starting with Elementor 3.0, some significant DOM improvements have been made to boost the speed and performance of new Elementor websites. The developers addressed a growing concern about the number of HTML wrapper elements that were output by Elementor. In response, we’ve removed some wrappers.
The presence of these wrappers was due to the diverse use of Elementor, the ability to use these selectors in various ways to customize your site, and the omni-purpose of Elementor as a solution for creating advanced websites visually.
Removing wrapper elements from the DOM contributes to more simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance. This is, however, a potentially breaking change, so by default, Elementor will only use the Optimized DOM Output on new sites.
Which HTML Wrappers Were Removed in 3.0?
Three (3) HTML wrappers are removed, including:
- .elementor-inner
- .elementor-row
- .elementor-column-wrap
HTML Wrappers Removed in 3.2
In this version we removed the following two (2) HTML wrappers:
- .elementor-image
- .elementor-text-editor
Who Does This Change Affect?
By default, this only affects new sites to avoid breaking existing sites that upgrade to 3.0. Using the Optimized DOM Output on existing sites that upgrade from pre-3.0 would potentially cause your website’s appearance and/or functionality to break. For this reason, the Optimized DOM Output is disabled on upgraded sites, and Legacy DOM remains in place. However, if you upgrade to 3.0 and wish to use the Optimized DOM Output, you can enable this feature. Simply go to Elementor > Settings > Advanced and select Enable in the Optimized DOM Output dropdown.
Important: If you have used any of these wrapper classes in either your custom CSS or custom code, you should refactor your code to use different wrapper classes that aren’t being removed. Otherwise, your custom styles or code will no longer function properly
Note: If unable to edit your text in the main window, and only able to edit text in the editor panel, try disabling the Optimized DOM Output experiment.
See the developers post about this change here.