Divi Theme

Divi 4.10 Performance Update

Divi's 4.10 release introduced various performance features. This is the WP Rocket's compatibility:

WP Rocket's Remove Unused CSS is compatible with Divi's Critical CSS
Divi's Dynamic CSS will be automatically disabled when Remove Unused CSS is enabled because they're not compatible
You can set these compatibility exclusions in WP Rocket's Delay JavaScript execution feature in order to load Divi's animated elements without interaction
There haven't been reported issues with other Divi features such as Defer jQuery and jQuery Migrate, Disable WordPress Emojis and Defer additional third party scripts, however, it's recommended to disable them and use WP Rocket's features only to avoid having duplicated optimizations.

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:

Disable Load CSS Asynchronously on the affected page

Exclude the main Divi style sheet from the Load CSS Asynchronously option:
https://docs.wp-rocket.me/article/977-exclude-files-from-optimize-css-delivery
Normally the file path is: /wp-content/themes/Divi/style.css but if you are using a child theme it will be different.
If you have also enabled Combine CSS in WP Rocket you should exclude the same file from that option:

Minify/Combine CSS/JavaScript - Static CSS File Generation

If you are using Divi 3.26.8 or later it's not necessary to apply any of the changes described in this section. This means you can keep Divi's minify options and Static CSS options enabled.

For older Divi versions (< 3.26.8), the cache clearing of Divi's static CSS files is not synced with the cache clearing of WP Rocket. This can lead to problems with broken post/page styling.

Divi has its own options to minify and combine CSS and JavaScript files, found under Divi > Theme Options > General. These options should be set to Disabled in order to allow WP Rocket to handle minifying and combining with our File Optimization settings.

You should also disable Divi's Static CSS File Generation feature, found under Divi > Theme Options > Builder > Advanced.

Video module

The Divi video module is not compatible with the option to Replace YouTube iframe with preview image (a sub-option of iframes LazyLoad). This option will automatically be deactivated and grey-ed out when using Divi or a child theme of 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.

Although this is not recommended, you can manually fix this by editing a theme file directly.

For Divi versions less than 4

Locate line 612 of Divi/includes/builder/module/SliderItem.php and modify it like this *:

sprintf( ‘<div class=”et_pb_slide_image”><img src=”%1$s” alt=”%2$s” data-no-lazy=”1″ /></div>’,

Keep in mind you will lose that change with the next theme update, though!

[* Thanks to Elephantmark for the fix!]

For Divi version 4+

Locate line 867 of Divi/includes/builder/module/SliderItem.php and modify that block accordingly:

if ( $multi_view->has_value( 'image' ) ) {
			$image_html = $multi_view->render_element( array(
				'tag'      => 'img',
				'attrs'    => array(
					'src' => '{{image}}',
					'alt' => esc_attr( $image_alt ),
					'data-no-lazy' => '1',
				),
				'required' => 'image',
			) );

Note that in the theme version you are using the number of the line may be different, so you may prefer to search for a string instead, e.g. `$multi_view->has_value( 'image' )`.

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.

Synchronized cache clearing

Divi will trigger WP Rocket's partial or full cache 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!