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 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 background images and LazyLoad

From WP Rocket version 3.15, you can enable the LazyLoad for CSS background images feature to apply lazyloading to background images.

Please note, Elementor's experiment  Lazy Load Background Images option should not be used at the same time as WP Rocket's LazyLoad for CSS background images feature.

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 Experiments

Elementor has some performance and experimental options under Elementor > Settings > Features. 

If you’re using the Lazy Load Background Images feature, you should take into account the following:

• You can use the Elementor - Lazy Load Background Images box under the One-click exclusions section to prevent it from being delayed.
• This experiment is not compatible with WP Rocket's LazyLoad for CSS background images. It's recommended to use WP Rocket's option only.

If you’re using the  Optimize Image Loading feature, which is activated by default, you should take into account the following:

• This experiment is not compatible with the Excluded images or iframes field in the WP Rocket settings to disable lazy loading on images. It's recommended to use WP Rocket's option only.

Apart from this, 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.
• Updating a post/page from the Elementor editor.
• Elementor’s maintenance mode is changed