Overview
Some time ago I was working on performance optimization for one very bloated website. The main issue was in a large number of plugins for it. And first of all I am speaking about the Elementor plugin and some add-ons for it.
The website includes a variety of such plugins, but in this article I want to highlight The Plus Addons plugin. Previously I was dealing with this plugin and I know that in the case of performance this plugin is not the best choice.
So one of the main problems, besides the very long loading time of the non-cached version of the site on the front-end, was that quite often the front-end Elementor editor just wouldn't load to the end. We would just see a sidebar with a loading icon. And so it goes on and on.
What ThePlus team suggest as solution
Apparently the developers from ThePlus are aware of the problem and have written an article about possible solutions to this problem.
So, what are the ways they suggest:
1. Increase memory limit to 768M
Maybe on less loaded sites this will help, but in my case, such a limit was already in place and it was the maximum possible limit for the current hosting (Pantheon).
It is also worth noting that not all hostings allow you to set the limit of 768 MB. Usually it is 512 or even 256 megabytes.
As you can see, this option is not suitable. And of course there is also the question of why the plugin consumes so much memory. I will discuss this point below.
2. Disable Unused Widgets from The Plus Settings >> Widgets section.
It may work, but not always. It all depends on how many and which widgets you disable.
Completely disabling ThePlus plugin solved the problem for me. Then I enabled it again and started to disable the widgets one by one. That way I found out that not all widgets are the same. Some of them require 10X more memory than others.
So, if you want to go this way and solve the boot problem by disabling some widgets, I recommend you start with these, because they are the most memory-hungry:
WP Search Filters
Woo My Account
Search Bar
Social Feed
WP Login & Register
Accordion
Header Meta Content
Woo Cart
Woo Checkout
WP Forms
Dynamic Listing
Ninja Form
Pricing Table
Coupon Code
Count Down
Info BoxStart by disabling the widgets at the top of the list and work your way down. This may solve your problem, but not the cause.
3. Disable Unused Elementor widgets from The Plus Settings >> Performance section
This solution suggests disabling not the ThePlus widgets, but the standard Elementor widgets instead. You can try this, especially if you don't use most of them, but I found that ThePlus widgets require in many times more memory then any standard Elementor widget. So it is better to start with disabling as many ThePlus widgets as possible.
4. Deactivate Third-party Elementor addons and widgets
So this solution can help, but as I said previously - ThePlus widgets are the most memory consuming plugins from all that I was seeing.
On a website that I was working on together with The Plus plugin was installed such plugins like Unlimited Elements for Elementor, JetElements, WooLentor. But ThePlus was the absolute leader among all of them (: . So I suggest you to start from disabling ThePlus widgets first of all.
5. Bonus: my not-to-use solution - remove loader
The last fun, but effective way - manually remove Elementor sidebar loader.
So just open a browser inspector window, browse to the DOM tree and then find and remove the element with ID elementary-panel-state-loading.
After this the spinner icon will be gone and sidebar widget button will become active. After this you can even add Elementor widgets to the page and build your page layout. But be careful with this - not all widgets can work and even if they work inside editor it doesn't mean that they will properly works on the front-end.
I personally highly not recommend to use these solutions and listed it here just as a funny way to fix the problem without fixing it.
Why this problem happens
All above mentioned solutions can help you. Or may not help. All depends on how much memory you already using and what is your current memory limit.
For interest you can just temporarily disable ThePlus plugin and check is this solved the problem. In most cases it does.
So when I found that it is ThePlus plugin responsible for such an issue my next action was to learn why exactly this happens. It is not so hard to find the reason. I just opened a browser console window in Elementor editor and check it for any available error messages. Immediately I found this message:
http://localhost:8888/woo.lc/wp-admin/admin-ajax.php 500 (Internal Server Error)So all problems are in some AJAX request. From the Network tab I learn a bit more about that request.
This Elementor request must return configs for all available widgets. Its return a json file with information like widget options, options tabs, default values, etc. So, as seen, such information is required for editor proper work and without such it is just no possible to make it work as expected.
During further investigation I found that because of ThePlus widget response for this requesting just becoming too large and consume all available memory.
Here are just values to compare with:
Response size with ThePlus and ThePlus PRO widgets: 5.3 MB
Response size without ThePlus widgets: 558 kB
Difference in 10 times can't help but surprise. So why ThePlus plugin makes it such huge? Well, it is on the other side of that variety of options that it is providing. If you look inside any ThePlus widget options you will find the huge amount of them. Different styles options, content customization, animations, display rules, events, etc.
For the end user it is great that he has such powerful tool - customize your widgets in any way without coding knowledge. But you have to pay for everything. And in this case the payment is performance and loading problems.
So the reason of the problem is found - huge amount of different options for ThePlus widgets leads to huge output for get_widget_config ajax requests and to memory overuse.
How I fixed it
Some solutions for fixing this problem was being mentioned above. But all of them requiring some surface - in most cases you need to disable plugins/widgets to reduce memory use. Good if you don't need them anyway. Bad if you need to disable some widgets that are useful for you.
In such cases I offer you any additional solution for that problem - you don't need to disable any widgets/plugins at all. You even can leave active all your ThePlus widgets. This solution only requires some custom code adding and have some limitations in Elementor editor use that I will describe a bit later.
So the idea here is to reduce the size of get_widget_config Ajax requests from, not to loading any options for ThePlus widgets at all. Instead will be loaded only widget controls for all other Elementor widgets. Additionally Elementor will load options for ThePlus widgets that were already inside the page.
So it works like that - if we open inside Elementor editor the page that already has some of ThePlus widget - nothing will change. We are still able to edit this widget. If we create a new page and try to add ThePlus widget - inside the editor firstly we will not be able to edit this widget. But it is possible just to refresh the page and then all widget controls will be loaded. But only for this specific widget.
As seen this solution bring some limitations - when you add ThePlus widget to the page you can't edit it imidiatly. First you need to refresh the page to load all needed widgets options and only then you will be able to edit this widget. Yes, its sounds not so handy, but if the other alternative if even worst for you then it is worth a try.
Speaking about a code there is nothing complex and all that you need is just to use the following code:
class My_Elementor_Fix {
public function __construct() {
add_action( 'elementor/ajax/register_actions', array( $this, 'ajax_get_widgets_config_action' ), 999 );
}
public function ajax_get_widgets_config_action( $ajax_manager ) {
$ajax_manager->register_ajax_action( 'get_widgets_config', array( $this, 'get_widgets_config' ) );
}
public function get_widgets_config( array $data ) {
$config = array();
$widget_types = ElementorPlugin::$instance->widgets_manager->get_widget_types();
foreach ( $widget_types as $widget_key => $widget ) {
if ( isset( $data['exclude'][ $widget_key ] ) ) {
continue;
}
if ( strpos( $widget_key, 'tp-' ) === 0 ) {
continue;
}
$controls = $widget->get_stack( false )['controls'];
$config[ $widget_key ] = [
'controls' => $controls,
'tabs_controls' => $widget->get_tabs_controls(),
];
}
return $config;
}
}
new My_Elementor_Fix();
Add it in your functions.php file (better if it is a child theme) or use one of the code snippets plugin for this.
Also , I wrap this code as a plugin and you can just install and activate it. The plugin can be found in my GitHub repository.
Get WordPress plugin for fixing Elementor + ThePlus loading issue.
Conclusion
I don't want to blame ThePlus plugins and say that it is bad. It has a large variety of widgets that include the huge amount of options that will satisfy almost any user. But the price for such variation will be the problems like I describe in this article.
Not use solution for this article blindly - fist try official recommendations from ThePlus team and only if they don't work / not suitable for you try my one.