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.

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.

Images aren't displayed when LazyLoad is active

If you have an issue where images aren't showing up, or are only showing on refreshing the page, please use the same solution provided in this guide:
Images are incorrect sizes when LazyLoad is active

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!