Using Elementor with WP Rocket

This document contains guidance about how to use Elementor and WP Rocket on a website.

Elementor and Delay JavaScript execution

If you notice the Delay JavaScript execution feature breaks or delays the loading of some of the Elementor modules, you can check the respective boxes under the One-click exclusions section, as shown below:

checking elementor boxes

Checking the boxes and saving changes should be enough to fix layout issues as well as for loading elements immediately.

However, if you're still having issues, you may need to find custom exclusions, and add them to the Excluded JavaScript files box.

Elementor sticky effect

In some cases, the Load JavaScript deferred feature may break Elementor's sticky effect preventing elements from staying fixed in the screen while scrolling.

If this happens in your site, please try setting the following into Load JavaScript deferred exclusions box:

\/jquery(-migrate)?-?([0-9.]+)?(.min|.slim|.slim.min)?.js(\?(.*))?( |'|"|>|$)
/elementor-pro/assets/lib/sticky/jquery.sticky.min.js

If enabled, the same exclusions need to be added to the Delay JavaScript Execution as well.

Elementor editor doesn't load

In some cases, servers resources are not enough to process WP Rocket's optimizations and edits done in Elementor at the same time.

This can lead to Elementor's editor not loading, and showing a blank page instead.

Increasing the PHP memory as shown here should fix this problem.

Elementor post CSS files will not be minified

Elementor post CSS files are automatically excluded from Minify CSS files to avoid a situation where the cache would be cleared too frequently.

Elementor Performance features

The following features under Elementor > Settings > Performance should be deactivated:

Optimized Image Loading
Lazy Load Background Images

This is because:

WP Rocket already includes LazyLoad and LazyLoad for CSS background images features.
WP Rocket's Optimize critical images feature does not currently support excluding critical images from third-party lazyloading.

Apart from the above, there are no other known issues with Elementor's performance features or experiments.

Synchronized cache clearing

The following actions in Elementor will trigger WP Rocket's partial or full cache clearing:

Elementor’s CSS Print Method is set to External File, and Element Caching is set to Default or Active.
Updating a post/page from the Elementor editor.
Elementor’s maintenance mode is changed