Elementor Developers Blog

Additional Custom Breakpoints – Technical Details and Gotchas

As you may recall, at the end of 2020 we released a blog post detailing The Road to Additional Custom Breakpoints. Last April, we published another blog post discussing advancements made in Elementor v3.2.0 in order to reach the additional breakpoints goal.

The last step in the roadmap as stated in the blog post linked above, was:

Change the way responsive controls are registered, created and utilized, into a more efficient structure.

We are happy to announce that this phase has been completed in Elementor 3.4.0, and in this upcoming version, we will be introducing the long-awaited “Additional Custom Breakpoints” feature!

How Elementor Improved Asset Loading and Made Your Website Run Faster

Performance is important to you, which means it’s important to us. This is why the Elementor engineering team is always working on new ways to make your website run faster. With each new release comes performance improvements, inspired by both user feedback and internal research to ensure we’re covering the most important areas. While some of these changes are integrated seamlessly into the Editor, others are marked as experimental features.

As performance improvements have become an even higher priority, we wanted to take you through the changes we’ve implemented in recent versions and, more importantly, discuss how it directly impacts you and your client’s website. This effort stretches over several versions, so this post will cover the most significant changes we’ve made, focusing on front-end assets loading.

In the most recent releases, we have managed to apply new techniques to how Elementor loads CSS, JS, and Font files. This improves page speed and makes your website run faster by removing unused CSS, reducing duplicate code, applying dynamic assets loading, and so much more. Let’s dive in!

Breakpoint System Changes in Elementor v3.2.0

As we have published several months ago, we have been working on releasing a highly requested feature – additional custom breakpoints. Core 3.2.0 is another milestone in the road to achieve this goal AND achieve better performance overall in Elementor sites as part of the process. As detailed in our recent blog post, step one of our roadmap is:

Convert hard-coded usage of breakpoints (tablet, mobile, default) to a dynamic system that will utilize registered breakpoints (the two existing ones + future Additional Custom Breakpoints).

In essence, these changes, as well as a lot of UI changes and additions as listed in step 2, are all included in Elementor Core 3.2.0.

Elementor v3.2: Additional DOM Improvements

In Elementor v3.0, we made the first step in optimizing the HTML output of Elementor pages. One of the steps in v3.0 was removing 3 wrapper elements from the Editor’s DOM output: .elementor-inner, .elementor-row, and .elementor-column-wrap.

The Optimized DOM Output feature is optional, and is configured as an Elementor Experiment. The two new wrappers being removed are also included within this experiment and will only be actually removed from a website’s markup if the experiment is active in that website.

In Elementor v3.2.0, we are continuing our optimization efforts and removing two more wrappers:

• .elementor-image
• .elementor-text-editor
  

New Experiment: Optimized Asset Loading Mode

In the upcoming Elementor v3.1.0, we created a new “Improved Asset Loading” mode, which reduces the amount of JS code loaded on the page by default. When activated, parts of the infrastructure code will be loaded asynchronously, only when needed.

Which Functionalities Already Support the New Improved Asset Loading Mode?

1. Widget JS Handlers

Up to Elementor v3.1.0, all widget handlers were loaded to every page by default, regardless of whether they are actually used on the page.

Starting in Elementor v3.1.0, when the “Improved Asset Loading” mode is active, each widget will dynamically load its handler, only when being used on the page.

A New Method For Attaching A JS Handler To An Element

In Elementor 3.1.0 version, we created a new method for attaching a JS handler to an element.

Up to Elementor 3.1.0, in order to attach a JS handler, we used a hook called addAction, and passed a function to it (addHandler):

const addHandler = ( $element ) => {
	elementorFrontend.elementsHandler.addHandler( ElementHandlerClass, {
		$element,
	} );
};
 
elementorFrontend.hooks.addAction( 'frontend/element_ready/your-element-name.default', addHandler );

For more details, see here.