What Is 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. Elementor thrives to be as fast and as optimized as possible, In order to do that, we've reduced some DOM elements from the HTML output.

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 Elementor will default to Disabled for all sites. 

Which HTML Wrappers Were Removed in 3.0?

Three (3) HTML wrappers are removed, including:

  • .elementor-inner
  • .elementor-row
  • .elementor-column-wrap

Who Does This Change Affect?

By default, this is set to Disabled 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. For now, this is also set to Disabled by default on new sites, although this may change in the future.

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

See the developers post about this change here.