Elementor: The Challenge to Become More Performant

This post is a high level, big picture look at the project to optimize Elementor to make it faster and more light weight. I’ll begin by listing some major events from the last year. This is important, because when you line them all up then you start to see some patterns. I will then give my assessment and share my opinion on what it means for Elementor users, or the things you should know and pay attention to. Before I get started, let me point out that these are my assessments and opinions. I don’t have an axe to grind or anything to defend, and I’m curious to see if you think I got it right.

Video Version

Major Events

May 2020 – Google Announces Core Web Vitals

In May, a year ago, Google announced that it was going to change SEO ranking factors to account for “page experience ranking signals” using a new set of metrics called “Core Web Vitals.” Starting with mobile, sites would be penalized for poor user experience. This announcement unleased a tsunami of articles and videos on site optimization. Google’s announcement also brought extra attention to page builders that were accused of outputting “bloat,” including Elementor.

Early July 2020 – Elementor Version 3 Beta Released

To support advanced layout, design, and animation options, Elementor had added several layers of DIV wrappers around basic HTML elements. Also, icons, JavaScript, and CSS resources were loaded on every page, not just on pages where they were being used.

The beta of Elementor 3 was released in July and it brought new global colors and typography, new site configuration options, a new theme builder, and the first of a series of changes to the underlying code base. They called this DOM optimization.

The developers were beginning the process of refactoring the code to make it more performant. This was a big project and obviously begun prior to Google’s announcement, but the WordPress community is obsessed with SEO and Google’s announcement put a spotlight on Elementor’s page output.

Late August 2020 – Elementor Version 3.0

Elementor version 3 was released on August 23rd, 2020. The release was a disaster. Despite an open beta of almost 2 months, significant numbers of Elementor sites “broke.” Elementor support was overwhelmed and online forums and Facebook groups were flooded with unhappy users.

There were 27 fix releases issued in the version 3.0 branch for Elementor Core and Pro:

There were some addon vendors who tested the version 3 beta and had updates ready. These vendors quickly fixed any small issues that arose. However there were a large number of third party addons which were not compatible with version 3 when it was released. This of course complicated support requests because initially it was not known if issues were with Elementor itself or with addons.

On September 23rd, the Elementor CEO publicly apologized and talked about the lessons learned.

January 2021 – Elementor 3.1 Released

With Elementor 3.1, released in January 2021, the Elementor team made two adjustments to its release process. First, one of the main features of the release was the introduction of “Experiments.” These are code changes that can be manually enabled/disabled and allow people to test upcoming features without downloading a beta version. The second change was the introduction of the new compatibility tag feature. Just as WordPress plugins have a tested up to tag, the new compatibility tag allows third parties to add a tag to their readme indicating the latest version of Elementor that they have been tested with. With these two features in place, the Elementor team could safely resume the optimization project.

March and April 2021 – Security Issues

In March WordFence wrote about a potential security issue in Elementor where some widgets gave the user the ability to pick the HTML element, such as the heading level, but the user input was not validated, opening the door for malicious users to inject JavaScript exploits. This was reported after Elementor released fixed versions in February.

Then in April WordFence published another post, titled “Recent Patches Rock the Elementor Ecosystem,” reporting that 15 popular Elementor addons had the same issue. The following plugins were listed:

• Essential Addons for Elementor
• Elementor – Header, Footer & Blocks Template
• Ultimate Addons for Elementor
• Premium Addons for Elementor
• Elements Kit
• Elementor Addon Elements
• Happy Addons
• Livemesh Addons for Elementor
• HT Mega – Absolute Addons for Elementor Page Builder
• WooLenter
• PowerPack Addons for Elementor
• Image Hover Effects
• Rife Elementor Extensions & Templates
• The Plus Addons
• All-in-One Addons for Elementor
• JetWidgets for Elementor
• Sina Extension for Elementor
• DethemeKit for Elementor
• Clever Addons for Elementor

Discussion and Conclusions – What You Need to Know

Technical Debt That Needs Attention

For years Elementor moved full speed ahead adding new features without much attention to performance. As a result, they accumulated a lot of technical debt. However, expectations and requirements have changed and I give credit to the Elementor team for realizing that it was important to address this. What you need to know is that in today’s web space, no product can ignore performance.

Elementor’s User Base Are Not Testers

If we are learning from the past, then lets look at the issues exposed by the problematic version 3 rollout. First, the Elementor team has usually shown an uncanny knack for knowing their user base, but they made a big mistake with the version 3 release. Even though the beta was available for almost two months, we learned that most Elementor’s users are not testers.

Third Party Addons – Who Is Paying Attention?

Secondly, something else that came to light was that there was a problem with some third party addon developers. They should be testing their code with the beta version, but they aren’t. If there is any question about some of these developers not paying attention, just reflect back on this year’s Elementor security issues. Elementor announced a security fix for widgets where users could change the HTML tag used. Then a month and a half later 15 addon vendor, who have the same feature, were cited, for the exact same issue! That is not confidence inspiring. Conclusion: we need to look for signs in order to identify the addon developers who are paying attention and carefully select the ones we use.

The Compatibility Tag

One way to see which addon developers are paying attention is to check the compatibility tag. The recommended process is to update addons before updating Elementor, then Elementor will show whether they are compatible with the new version of Elementor before you upgrade.

For this to work well, addon vendors need to use the beta versions to fix their addons, but it seems like many are waiting until release versions to make changes. For example, Elementor 3.2 Core was released on April 19th. I got an email from Happy Addons on April 26th that they were compatible and we could update.

I got a similar email from the PowerPack team on May 13th.

I appreciate getting these notices, but waiting 1-3 weeks for the OK to upgrade doesn’t seem ideal.

Note, these compatibility notices only show on the plugins page and don’t show on the unified dashboard update page and also don’t show if you are using a management tool like MainWP or ManageWP. Conclusion: You need to check the compatibility tags on your addons. If you are using a tool for managing multiple WordPress installs, then you need to check a site manually for addon compatibility before updating Elementor.

I sampled 15 Elementor addons on May 14th to see if they had the compatibility tag. Here are the results:

These had the tag:

These did not:

The good news is the ones I consider “top tier,” that have been around for a while and have a good reputation, are on the ball. However, there were a fair number of addons have still not been paying attention to realize that they should have added the compatibility tag. So maybe you are staring to see the problem here. There is a wide range from those offering their addons for free in the WordPress plugin directory, to new startups that are just learning the business, to accomplished developer teams who follow best practices. Conclusion: We also need to pay attention, the compatibility tag is one sign among others that indicates addons follow best practices.

Experiments

After the 3.0 launch disaster, the Elementor team is being very cautious. They are using the experiments feature to address the technical debt and make Elementor more performant. However, progress is slow because most users are not testers. Further, users don’t have any way to know if their addons work with the experiments and whether it is safe to enable the experiments to get better performance. As far as I know, none of the Elementor experiments have yet graduated and moved from experimental status! Therefore, my last conclusion is that the move to better performance is going to be very slow. In order to make Elementor performant, the Elementor team is going to have to enable the experiments, potentially breaking sites where addon vendors have not fixed their code.

As customers, we need to let addon vendors know that we expect them to test with the beta versions. We also need for them to test and announce that they are compatible with the experiments.

So, that is my retrospective look at Elementor and the project to make it more performant. Did I missing something important? Did I get something wrong? If so, please let me know in the comments.