By popular demand, for this installment of our theme performance-testing series, we are covering Divi, one of the most popular premium WordPress themes. Created by the Elegant Themes team, Divi is a highly customisable, multi-purpose theme with thousands of users. Elegant Themes states:

This is the smartest, most flexible theme in our collection. With Divi, the sky’s the limit.

In our tests, WP Rocket improves the speed of Divi by up to 57%! Esp. on key pages like homepage,… Click To Tweet

This time we set up the test site on the same web host we use for our own website, OVH. We ran Pingdom Tools tests from Stockholm, as it is the closest location to our servers. This test includes the following pages:

  • Homepage
  • About
  • Shop
  • Blog
  • Single Post
  • Landing Page
  • Contact

The only additional plugin used in our installation is WooCommerce, in order to simulate online shop pages.

Let’s get to work and start our initial test.

Divi Speed Test Without WP Rocket Cache

Thanks to a good server and well-written code by Elegant Themes, as well as to a pretty basic content structure, we get very good load times even when caching is not active.

divi-no-cache

Consider these results with caution. Depending on your content, installed plugins, server performance and other factors, your loading time could be different.

Divi Speed Test with WP Rocket Active

Right after activating WP Rocket, I activated LazyLoad, Minification (HTML, Google Fonts Optimization, CSS and JS). In general, everything worked well, with just a couple of tweaks to the WP Rocket settings. So let’s cover them first.

Optimal WP Rocket Settings for Divi

The Divi Slider Module is not compatible with LazyLoad, so if you use the slider on any page, the best solution is to  turn off LazyLoad for that specific page. As you can see from the speed tests below, this doesn’t have a negative impact :)

lazyload-issue-compared

Since Divi doesn’t use filters to call the slider module elements, we cannot hook into it in order to insert the data-no-lazy=”1″ attribute to the img HTML tag. Although not recommended, you can manually fix this by editing line 3258 3530 of includes/builder/main-modules.php file.

? sprintf( '<div class="et_pb_slide_image"><img src="%1$s" alt="%2$s"  data-no-lazy="1"/></div>',

Keep in mind this is not recommended  since you will lose the change after the next theme update. However you could incorporate it into a child theme.

JS Minification with Divi Masonry Element

When JS minification is activated, the Masonry list of posts doesn’t show up. The solution for this is easy. You just need to exclude the following file from JS minification:

/wp-content/themes/Divi/includes/builder/scripts/salvattore.min.js

You will notice the Blog Masonry page is not included in main speed test result list, but for reference, we got 1.8s vs 600ms, which is a great result.

Shopping Cart Menu

With Divi, you can add a shopping cart icon as a Menu Item (in Appearance –> Menus ) and it will automatically show the number of items in your basket.

However, Divi uses PHP to update the number of items in the cart, which means (in short) it is not compatible page caching – that means it will not work with ANY page caching plugin, not just WP Rocket. 

The scenario is as follows:

You go to the Shop page and choose a product you want to buy. Then you add it to the cart. If you visit some other page(s) of the site that was not cached before, your visit will trigger cache creation.

The problem is that the number of items in your cart will be visible to other visitors who visit these pages after you, and you will not see an accurate number of cart items as you navigate the site.

To make this feature compatible with all page caching plugins, the updating of the cart widget should be done using AJAX ( just as WooCommerce’s standard cart widget already does). So hopefully the Elegant Themes team will consider this in order to make Divi even better for all their customers.

Now, having adjusted the settings as needed, let’s test again.

Results of the Speed Tests

What happens when we activate WP Rocket?

divi-rocket-cache

Speed Test Comparison

Here is a closer look at the statistics for the homepage, before and after activating WP Rocket.

divi-homepage-comparison

Before and after results, side-by-side:

rocket-divi-comparison

As you can see, WP Rocket provides a solid boost for all tested pages, which is great. Notice that some of the biggest improvements are seen on the pages that really count – the homepage, blog page and shop page. We have seen similar improvements with other themes tested so far, and Divi is no exception. If you compare these results with those you get on your own sites, don’t panic if you cannot make it load in less than 1 second. You probably use real content and additional plugins, so it’s normal that this will increase the load time.  What you can expect, however, is to get significantly faster results with WP Rocket activated.

Conclusion

From simple personal blogs, to complex online shops, Divi is one of the most popular multi-purpose themes available today. Their page builder is easy-to-use and intuitive, so this theme is ideal for those people who want to setup their website quickly and focus on its promotion. Of course, there are downsides to using Divi, and that is something you should know before using any theme of this kind.

So far, we have covered Avada, X Theme, The7 and Divi. If you have an idea for the next one, feel free to let us know in comments section. We already have one theme in mind, so let’s see if we match :)