Using Divi with WP Rocket

This document contains all the necessary information about using the Divi theme along with WP Rocket.

Divi's performance features

Divi includes some features under its Divi  > Theme Options > Performance tab.

In general, it's recommended to use WP Rocket's features only to avoid having duplicated optimizations running on a site. Therefore, you should disable the following Divi’s options:

• Dynamic CSS
• Critical CSS 
• Disable WordPress Emojis
• Improve Google Fonts Loading
• Defer jQuery and jQuery Migrate
  • Enqueue jQuery Compatibility Script
  • Defer additional third party scripts

Divi and Delay JavaScript execution

You can check Divi boxes under the One-click exclusions from delay section in WP Rocket's Delay JavaScript execution feature in order to load Divi's animated elements without interaction, like shown below:

Checking the boxes and saving changes should be enough to load elements immediately and fix issues. However, it's also possible you need to find custom exclusions, and add them to the Excluded JavaScript files box.

Additionally, Divi's Critical CSS option can cause Flash Of Unstyled Content (FOUC) for which this fix is used. Such fix is not Divi's official approach, and when Delay JavaScript execution is enabled, it will cause a white flash on the site.

If possible, you should use WP Rocket's Remove Unused CSS and disable Divi's Critical CSS to avoid the original FOUC problem. But if you want to keep Divi's Critical CSS with the external fix, then please set this exclusion using the Exclude JavaScript Files box in the Delay JavaScript execution feature.

Divi and Remove Unused CSS

When you update a Divi template, and the  Remove Unused CSS feature is active, WP Rocket will display the following warning on the WordPress dashboard pages recommending you to clear the Used CSS and a button for this.

WP Rocket: Your Divi template was updated. Clear the Used CSS if the layout, design or CSS styles were changed.

Split testing

Divi's split testing is not compatible with caching because it relies on PHP, which is not available on a cached page.

Blog module disappears

The Divi Blog module is not compatible with the Load CSS Asynchronously feature. To resolve it you can: 

• Switch to the Remove Unused CSS feature instead - Recommended.
• Disable Load CSS Asynchronously on the affected page.

Video module

The Divi video module is not compatible with the option to Replace YouTube iframe with preview image. This option will automatically be deactivated and grayed out when using Divi or a child theme of Divi.

Divi slider module and LazyLoad

If you use Divi Theme Slider Module, it can cause image displacement from the original location when LazyLoad is turned on.

The only maintainable solution is to turn off LazyLoad for that specific page. Since Divi does not use filters to call slider module elements, we cannot use a hook to insert the data-no-lazy="1" attribute to the <img> HTML tag.

Missing font icons in IE 11

In some rare cases, you might not see icons on your site while browsing with IE11. You can resolve that behavior by installing this small helper plugin:

📥  Download (.zip): WP Rocket | Remove ETag
Developers: You can find the code for this plugin on GitHub. 

Divi editor doesn’t load

In cases where the server resources are limited, running Divi and WP Rocket’s optimizations can cause problems, and prevent the Divi editor from loading.

The solution is to increase the PHP memory as shown here. 

Synchronized cache clearing

Divi will trigger WP Rocket's partial or full cache clearing in scenarios such as:

• Saving a post.
• Saving template layout.
• Enabling/disabling Static CSS.

Heads up! When theme developers update their code, it may affect which files need to be excluded. If these solutions do not work for you, let us know!