Divi Theme

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

Divi 4.10 Performance Update

Divi's 4.10 release introduced various performance features. These are the recommended configurations:

• WP Rocket's Remove Unused CSS is not always compatible with Divi's Critical CSS.
• Divi's Dynamic CSS should be disabled because it is not compatible with WP Rocket's Remove Unused CSS.
• 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. 

Divi and Delay JavaScript execution

You can set these compatibility exclusions in WP Rocket's Delay JavaScript execution feature in order to load Divi's animated elements without interaction.

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 at the Delay JavaScript execution feature.

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

Or

• 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!