Divi Theme

In this article

Divi 4.10 Performance Update

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

  • WP Rocket's Remove Unused CSS is compatible with Divi's Critical CSS
  • 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. 
  • If you notice any layout issues, you should try excluding Divi's dynamic CSS file from WP Rocket's Combine CSS files. This applies only when following combination of settings is met:   
    • WP Rocket's Combine CSS files is enabled
    • WP Rocket's Remove Unused CSS is disabled
    • Divi's Load Dynamic Stylesheet Inline is enabled

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 Optimize CSS Delivery feature. To resolve it you can: 


Minify/Combine CSS/JS - 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 JS 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 behaviour by installing this small helper plugin:

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

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!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.