Elementor Developer Edition and Optimization Experiments

Introduction

You have to admire the Elementor team. When they identify a problem they work to find a solution. Yes, Elementor currently has two problems that are being addressed. The first problem is the loss of confidence in the update process. Remember when Elementor 3 was released and a lot of things broke? The Elementor install base is so large now and there are so many third party addons, that it is hard for Elementor to roll out big changes without things breaking. The Elementor developers are nervous about it, they don’t want a repeat, and users are also cautious now about updating. The second problem is that page output is not optimized. Elementor does not compare well with some of the other builders, such as Oxygen and Gutenberg, when it comes to the rendered page output. To achieve the design and animation effects, Elementor adds a lot of DIV elements. The loading of CSS and JavaScript resources is also not optimized. The lack of optimization means that Elementor does not score as well as other builders on performance benchmark tests. In this post I want to look at how the Elementor team is addressing these issues.

Video Version

Different Versions of Elementor And Experiments

The Experiments Tab

Elementor 3.1 saw the introduction of Experiments. You find them as a tab off of the Elementor Setting page. Here is what the Experiments tab looks like on an established website with lots of Elementor content. The site is running Elementor 3.1.1. Note that all of the experiments are disabled.

Now, here is the Experiments tab on a new site, also running Elementor 3.1.1. Note that most of them are enabled. They are enabled on new sites because the Elementor team thinks they are safe for new sites without any Elementor content, but they are disabled for old sites because sites that already have Elementor content may experience an error. If you want to try the features on existing sites then you will need to turn the Experiments on manually.

Note also that some of the features say “Alpha” and others are tagged as “Beta”. I noticed that the Beta ones are turned on by default.

Elementor Developer Edition

You can install a beta version of Elementor, when one is available, from the Versions tab of the Tools menu.

Well, the Elementor team also has some developer builds where you can look at Experiments even before a beta is ready. You get access to these by installing the Developer Edition of Elementor. It can be a bit confusing, because they call it Elementor Beta, sigh, but it actually gives you access to pre-beta builds. One difference between a real Beta version and the Developer Edition version, is that the Experiments listed on the real Beta are planned and will appear in the final version. Experiments in the Developer Edition, however, are not guaranteed to make it into a final version if the the developers decide the experiment didn’t work out.

Here I have a testing site with just the regular free version of Elementor installed.

You install the Developer Edition the same way as any other plugin, but note that you need Elementor installed also. If you install the Developer Edition without regular Elementor then it will prompt you to install it.

I clicked Add New to add a new plugin and then typed “Elementor Developer Edition” into the search field.

I installed and activated it. As soon as it was activated, I got a message that a new version of Elementor was available, version 3.2.0-dev4.

When you install the Developer Edition, the Elementor admin menu changes to show a “DEV” tag and there is a new submenu for “Developer Edition.”

This is a test site, and I took a snapshot of it before I started, so I went ahead and clicked the “Update Now” button, which does the same as the link on the plugins page. Once you’ve updated, you have a “Re-install Now” button, if you want to go back to the latest stable version.

OK, what happens if I install Elementor Pro? I go to the plugins page and upload a copy of Elementor Pro 3.1.1. I go through the process to connect the site to my Elementor account, click around for a while, and then I get a notice that an update is available. There is a prompt to install Elementor Pro version 3.2.0-dev5. So, I go ahead and click the “update now” link.

Going back to the Experiments tab, I see that there is a new one available, this one for the Elementor Pro Form Builder. This feature gives the option to save form submissions to the database, so you have a record of them and so you won’t loose them if there they get lost in the mail. That looks like it will be a nice upgrade and really useful.

The Optimization Experiments

Let’s put our lab coats on and conduct an experiment. To start, on the Experiments tab I’m going to disable all of the Experiments by making the Inactive.

Now, I’m going to create a new page and call it Elementor Experiments. I go ahead and publish it.

Now I go ahead and Edit with Elementor. In the Elementor editor I go to the library and find a page to insert. I pick the Online Course Home Page template.

After it is inserted, I go ahead and save the page and then click the View Page button. Here is the page that was inserted.

I right click on the page and click the “View Page Source” context menu item. This shows me the HTML rendered output of the page. I scroll down to the bottom and see there are 955 lines of code.

Now I go to the GTMetrix testing site and paste in the URL to the Elementor Experiment page. I run the test and this is the result. Well, at least it is not an “F”! Not too good. The page got a C grade, performance was 60%, and it the largest contentful paint was 2.8.

Let’s see if we can do better. Back to the Elementor Experiments page, I turn on the two optimization options. The first one is what will be in play in our test. It is going to optimize the HTML output. The second experiment doesn’t load some of the Elementor scripts on pages that are not using Elementor.

Now I go back to the front of the site and view the Elementor Experiments page again. After refreshing it, I look at the source code again and scroll to the bottom. This page has 886 lines of code, so the page got smaller, and the optimization was all around the content elements.

Back now to GTMetrix to rerun the test. Wow! The optimized page got an “A, performance was up to 88%, and the page loaded in 1.5 seconds, over a second faster.

Discussion and Conclusion

The Elementor team has been faced with a couple of problems and have tackled them head on. I admit that the different versions can seem a bit confusing, but what the team is doing is giving users and third party developers a chance to test potential new features earlier. They have made the process about as easy as it can be. You can install the developer builds, switch experiments on and off, and revert back to the stable version when you are done. If you are using the stable version on a production site, there is the option to disable any experiments that might be causing an issue if, for example, a third party plugin hasn’t been updated yet.

Some people feel that Elementor should not be asking its users to test, but remember that Elementor core is the most feature rich WordPress page builder that is available for free. So I personally don’t have an issue with testing when I have the time to do so. Of course, not everyone has the time to setup a testing site and run experiments, and that is OK, its optional. I imagine that it took a bit of work to add the Experiments options, and it also took a bit of thinking outside of the box. In most cases new features like this are only available in beta versions and you don’t have the ability to turn off new features that might cause an issue.

You can see that in this case, with my experiment, the optimization of the page really worked. The results might not be so dramatic for all pages and content, but it is obvious that Elementor is moving in the right direction. My understanding is that the Elementor team has further optimization experiments planned, so this isn’t the last word on the subject. I’m happy to see that the Elementor team is addressing the update issues by letting us control if the experiments are on or not, and that they are addressing the performance issues by optimizing the rendered output.