Table of Contents

Divi recently released an impressive performance update where they “speed up Divi from every angle”. According to Elegant Themes, their new version eliminates bloat and gives you a good grade on Google PageSpeed Insights. 

Today, we are going to verify this statement and check how fast Divi is. Then, we’ll share our list of optimization techniques you can follow to increase the speed of your WordPress site built with the Divi theme. 

Divi and WP Rocket
Divi and WP Rocket

Testing Divi’s Performance


I’m going to test version 4.14 of Divi. I’ve installed a demo coming from the Divi library called “The yoga studio”. My test site has several images, yoga classes, testimonials, and links to social media.

Performance tools used: Google PageSpeed Insights on mobile and WebPageTest.org (iPhone X with a server located in France) – we are taking a full mobile approach.

KPI measured:  Performance grade on PSI, two of the Core Web Vitals, Speed Index, Total Blocking Time, First Contentful Paint, Time To Interactive, Fully loaded time, and the number of HTTP requests.

Note: FID can’t be measured because its data is based on real users. However, we have the Total Blocking Time, which is similar to FID. 

Let’s run the audit! 

My test site built with Divi: an e-learning site with yoga classes.
My test site built with Divi: an e-learning site with yoga classes

Let’s have a look at our mobile KPIs scores: 

KPIs (Mobile performance)Score
Overall grade 84/100
First Contentful Paint2.5 s (orange)
Speed Index4.7 s
Largest Contentful Paint2.8 s (orange)
Time to Interactive5.4 s
Total Blocking Time200 ms
Cumulative Layout Shift0.01
Fully loaded time2.669 s 
HTTP requests24

Speed Results: How Fast is Divi?

Divi’s fully loading time is 2.6 seconds from mobile, which is a good speed result for many sites. According to Lighthouse, Divi got an 84/100 performance grade on mobile, which is also a satisfactory performance score. 

All those numbers are solid for pages that are built using a visual drag-and-drop editor like Divi.

How to explain this performance for a page builder that lets you build so many advanced features? It’s simple: in the latest release of Divi, Elegant Themes added some serious built-in speed optimization features that can make your site load faster. 

That’s why our performance grade from mobile (84/100) is pretty good: we should consider the amount of content we built using the Divi modules and the animations. 

Overall performance on mobile - Source: PSI
Overall performance on mobile – Source: PSI 

However, there’s still room for improvement. We should aim for a green score (90+). Lighthouse recommends addressing a few issues to improve our performance score. The recommendations are mainly about caching, text compression, and reducing unused code. 

Audit section for my Divi site - Source: PSI
Audit section for my Divi site – Source: PSI
🚀 Performance key takeaways

– Divi theme is way faster than it was before Divi 4.14

– I enjoyed the bloat-less experience while building the site

– I got 84/100 on mobile, which is extremely good for such a powerful page builder

– Fully loading time is 2.6 seconds, which is also a good starting point for performance

Want to see how we got 100/100 on mobile using Divi and WP Rocket? Jump to the last section!

The 5 New Divi Performance Features

Divi went from a heavyweight to a lightweight theme by adding 5 main speed-optimization features, namely:

  1. A new dynamic PHP framework – loading and processing only what’s needed based on the Divi modules, animations, emoji, or icons you use on your site.
  2. The overall CSS size of Divi was reduced by 94%, and its JavaScript was cut by 50% (meaning that Divi has removed unneeded resources and deferred render-blocking requests).
  3. Divi is now Inlining stylesheets and only loads critical CSS (the one above the fold), which will defer everything else. 
  4. Google Fonts are now cached.
  5. JQuery deferral moved out of the header and is now loaded asynchronously in the footer (only when it’s not needed in the header). 

You will even find a dedicated tab to performance, accessible from your WordPress dashboard from Divi Theme Options > General > Performance.

Performance tab implemented by the Divi Team - Source: My WordPress dashboard
Performance tab implemented by the Divi Team – Source: My WordPress dashboard

Divi is fast, and on top of that, we have put together a list of optimization techniques you can implement to make it even faster.

How To Make Divi Faster

Divi has been performing well with a satisfactory speed score from our audit. However, there are some easy techniques you can follow to optimize Divi’s performance, namely: 

  1. Choose The Right Hosting
  2. Reduce TTFB
  3. Optimize JS Performance
  4. Remove Unused CSS or Optimize CSS Delivery
  5. Minify and Combine Your Code
  6. Optimize Your Images
  7. Lazy Loading Images and Videos
  8. Use a CDN
  9. Text Compression
  10.  Avoid Using Sliders Above The Fold and Non-Composited Animations

Let’s go over each technique so you can apply them to your Divi site and boost your speed. 

1. Choose The Right Hosting

You need a reliable host which is stable and fast in terms of servers and network connections. There are many different kinds of hosting, but we suggest you opt for providers specialized in WordPress. We wrote a detailed guide about what to look for when choosing your hosting, and we also combined a list of the best WordPress hosting on the market. 

To sum up: don’t save money on your hosting provider. Make it a priority instead. The founder of Divi recommends auditing your hosting environment. He says that Divi “is only one piece of the puzzle when it comes to your website’s speed”. 

Divi Founder about choosing the right hosting
Divi Founder about choosing the right hosting 

2. Reduce TTFB

The best way to reduce the time to first byte (TTFB) for your WordPress site built with Divi is to use a cache plugin. Caching helps decrease TTFB by helping reduce the server processing time, resulting in a faster web page. You should also optimize your WordPress database, use the latest version of PHP and use a CDN. 

Measuring TTFB - Source: GTmetrix
Measuring TTFB – Source: GTmetrix

WP Rocket can help reduce TTFB for you, thanks to the caching and database optimization features. 

3. Optimize JS Performance

JavaScript helps out with validation and interaction functions between your visitor and your website. In the latest version, Divi reduced the size of its JavaScript file, allowing the user to load only what they need for each module. 

On top of that, Divi has an option to remove unused JavaScript per page in Theme Options → General → Performance. Here, you should enable dynamic module framework and dynamic JavaScript libraries settings. 

on-demand JS  - Source: Divi Optimization Tab
on-demand JS  – Source: Divi Optimization Tab

On top of that, you can use a plugin like WP Rocket to optimize the JS code that Divi does not create. 

Optimizing my JS - Source: WP Rocket
Optimizing my JS – Source: WP Rocket

4. Remove Unused CSS or Optimize CSS Delivery

The Divi team made the theme smart by automatically identifying the Critical CSS (above the fold) and optimizing CSS delivery. Divi defers non-critical styles, which reduces the Divi Builder’s CSS output and the loading time. 

Like the JS optimization, Divi only loads the CSS you need for a particular module or page. 

Ensure that the following settings are enabled from the performance tab: 

Enabling CSS optimization settings - Source: Divi Builder
Enabling CSS optimization settings – Source: Divi Builder 

When Critical CSS, Dynamic CSS, and In-Line Stylesheet options are activated, all render-blocking CSS requests related to Divi are removed.

To reduce the unused CSS, don’t forget to use the “Divi Preset” option. This allows you to create lighter pages because each module using the same preset does not need to have the whole suite of designing blocks. 

Setting a global design for all the buttons - Source: Divi Builder
Setting a global design for all the buttons – Source: Divi Builder
⚠️ Important: Both JS and CSS built-in features in Divi will only remove unused CSS and JavaScript created by Divi.

You will need a plugin like WP Rocket to remove the rest of unused CSS and JS:

5. Minify and Combine Your Code

Minification is an optimization technique that reduces the size of your CSS, JS, and HTML files. It means removing all the bloat and unnecessary content in your files, such as punctuation, developer comments, and so on. You can use several tools to minify and compress your files. We wrote a tutorial on the best free CSS and JavaScript minification tools

If you prefer optimizing your code in a few clicks, then have a look at the WP Rocket plugin that allows GZIP compression and minifies your JS and CSS code in a few seconds: 

Minifying and Combining my CSS files with WP Rocket (note: if you scroll, you have the same section for JS)
Minifying and Combining my CSS files with WP Rocket (note: if you scroll, you have the same section for JS)

6. Optimize Your Images

Images are a key component of your content strategy, but they will hurt your performance if not optimized. Make sure to choose the right image format for each device, select the correct compression level, serve images with the right dimensions and use the next-gen WebP format.

If you don’t want to apply those best practices manually, we recommend using a WordPress image optimization plugin like Imagify. The plugin can make your images lighter without compromising the quality. Why don’t you give it a try? There’s a free trial

Want to learn a few more high-level performance techniques for your WordPress site? Read our dedicated guide about page speed optimization

7. Lazy Loading on Images and Videos

Another way to optimize your content is to apply lazy-loading, meaning that you delay their rendering until the visitor needs them. In short, you prioritize the images or code that are located in the viewport of the user. You can apply lazy loading on images and videos manually by adding the following script: 

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

If you want an easier way (and faster way) to apply lazy loading, you can use a plugin like WP Rocket that has a dedicated LazyLoad tab:  

Lazy Loading with WP Rocket
Lazy Loading with WP Rocket

8. Use a CDN

A Content Delivery Network (CDN) is a geographically distributed group of servers that work together to provide quick web content delivery. This is much needed, especially if you have international visitors. When choosing a CDN, ensure that you have access to unlimited bandwidth and that all your files are served over HTTPS (with the SSL traffic included). 

Many CDNs are available on the market, but you can use RocketCDN with Divi if you want your images, JS, and CSS files to automatically be served on 35+ markets and more than 50 edge locations. 

Servers locations - Rocket CDN
Servers locations – Rocket CDN

9. Text Compression

Text compression, also known as GZip compression, allows HTML, CSS, and JS content to be compressed so that the files sent from the server are smaller (and lighter). The idea is to compress all the content of your WordPress site to increase its speed. All major CDNs allow text compression, and a plugin like WP Rocket can also compress your whole site right upon activation. It compresses your files on the server-side and decompresses them on the browser of the visitor. 

 10. Avoid Using Sliders Above The Fold and Non-Composited Animations

Above-the-fold sliders often contain the page’s Largest Contentful Paint (LCP) element, a Core Web Vital. That is why you should avoid displaying a “hero slider” on the top of the homepage

A test site with a heavy JS carousel in the header - Source PSI
A test site with a heavy JS carousel in the header – Source PSI

A non-composited animation refers to any animation in which JS or CSS JavaScript modifications would trigger a sudden change on your page, impacting your Cumulative Layout Shift (CLS) metric.

Google will not give you a good performance grade if both of your core web vitals (CLS and LCP) are not optimized. 

We have mentioned the WP Rocket plugin as a performance solution for a WordPress site built with Divi. That takes us to our next section, showing you how WP Rocket improves the Lighthouse performance score.

Speeding Up Divi with WP Rocket

To speed up Divi, Nick Roach, the founder of Elegant Themes, recommends continuing using a performance plugin. According to him, you should use caching and a CDN to improve the speed of your site built with Divi. 

Divi’s founder recommended using a performance plugin with Divi - Source: Divi official performance release
Divi’s founder recommended using a performance plugin with Divi – Source: Divi official performance release

WP Rocket is the best caching plugin for WordPress, and it is also fully integrated with a CDN called RocketCDN. And the good news is that Divi is fully compatible with WP Rocket. Divi 4.10 improved the compatibility with WP Rocket by introducing the following enhancements: 

  • WP Rocket’s “Remove Unused CSS” is compatible with Divi’s Critical CSS feature. Divi takes care of its CSS, and WP Rocket does the rest. 
  • You can now set some exclusions in the “Delay JS execution” WP Rocket feature, so Divi can still load the animation if you want to.
  • Divi comes with the following features –Defer jQuery and jQuery Migrate”, “Disable WordPress Emojis” and “Defer additional third-party scripts” – that are overlapping on WP Rocket options. It’s recommended to disable them and use WP Rocket’s features only to avoid duplicated optimizations. 

WP Rocket can help you achieve better mobile performance on a website built with Divi. Let’s see how! 

🚀 We recommend you read our detailed guide about testing WordPress site performance if you need help testing your WordPress site.

Performance tools & mobile KPIs we are measuring:

  • WebPageTest (Fully loaded time and the number of HTTP requests on mobile)

We will be testing 2 different scenarios:

  • Scenario #1 – Mobile performance of my test site – no WP Rocket (results from the first section where we got 84/100)
  • Scenario #2 – Mobile Performance of my test site – 🚀 with WP Rocket


Let’s start the comparison! 

  • Scenario #1 – Mobile performance of my test site – no WP Rocket 

As seen in the first section of this article, my grade on mobile was 84/100 with a few performance issues flagged by PSI:

Audit section for my Divi site - Source: PSI
Audit section for my Divi site – Source: PSI

As we saw in section 1, Divi now comes with built-in features to optimize JS and CSS. You may be wondering why you can still see some warnings like “Remove Unused CSS” or “Reduce unused JS” despite the built-in features, right? 

Answer: Divi will only remove the unused CSS and JS created by Divi. If your site uses other plugins, then those unused CSS styles or JS will not be removed by Divi. This is exactly where WP Rocket can help! 

  • Scenario #2 – Mobile performance of my test site – 🚀 with WP Rocket:

Upon activation of WP Rocket, I got 100/100 on my site built with Divi, and all my performance KPIs moved to the green zone. 

My performance results with WP Rocket - Source: PSI
My performance results with WP Rocket – Source: PSI

Here’s a sum-up of the performance before and after using WP Rocket: 

KPIs (mobile performance)Score (no WP Rocket)Score (🚀 with WP Rocket)
Overall grade 84/100100/100
First Contentful Paint2.5 s (orange)0.6 s (green)
Speed Index4.7 s (orange)0.6 s (green)
Largest Contentful Paint2.8 s (orange)0.6 s (green)
Time to Interactive5.4 s (orange)0.6 s (green)
Total Blocking Time200 ms0 ms
Cumulative Layout Shift0.010
Fully loaded time2.669 s 1.294 s
HTTP requests2416

All the metrics are healthier, and my site even reached 100/100 on PSI! On top of that, WP Rocket allowed me to get all the performance warnings to the passed audit section. 

Passed Audits with WP Rocket - Source: PSI
Passed Audits with WP Rocket – Source: PSI

Wrapping Up

There are hundreds of WordPress themes available in the market, so we made things easier for you by running several performance audits with the big players. If you are still hesitating between Divi and Elementor, check our speed comparison. Or maybe you are trying to choose between Divi or Avada to build your next WordPress site? Then, check our performance comparison showcasing Divi and Avada. The same goes if you want to compare the speed of Divi and Astra

You’ll see that those performance audits have all one thing in common: WP Rocket has speeded up all the test sites and got us a green score on Google PageSpeed Insights. 

As you saw in this article, WP Rocket is an easy and reliable way to improve Divi’s speed and reach a great performance optimization goal. (We went from 84/100 to 100/100 on mobile).

And the best part is that you don’t take any risks by trying WP Rocket because the money-back guarantee covers you. Install WP Rocket on your WordPress site built with Divi and tell us what score you get on Google PageSpeed Insights in the comments!


Comments (54)

Did you try Divi builder on any of these pages? It would be interesting to see the results with heavy customizations using Divi builder.

How about the latest version of Headway Themes being v4 ?

Have to turn of lazyload if that page has Parallax background too

If you try to use the A/B testing feature of Divi it's the same: no pache caching possible.
So ET's expertise is NOT pagespeed, and this is exactly what almost all of designers do: ignore pagespeed and sell good looking stuff.
What's really a pity on the other hand because ET seem to be familiar with Javascript ...

But who cares, this is WP rockets business right? The unawareness regarding pagespeed is characteristic for themers.

Hi,

I'm using the Divi theme and found this article when searching for speed tips for Divi. I used to use WP-Rocket before, but I stopped using it when I switched hosting to FlyWheel, as they building caching into their hosting.

But I think WP-Rocket might still be useful for minification and a few other tweaks.

Can I suggest that you consider an article for anyone who has FlyWheel as their host? If not an article, do you have any general tips about compatibility between FlyWheel inherent caching and using WP-Rocket?

Cheers,

Aidan Sweeney

I would LOVE to see the speed and optimization tests on the Beaver Builder theme and page builder!!

Impreza please
https://themeforest.net/item/impreza-retina-responsive-wordpress-theme/6434280/comments

As you have covered Avada, The X ... what's about the great Enfold Theme ?

Awesome !

i am using divi theme in one of my site and surely gonna try wp rocket to boost site speed.
Thanks for this post

Regards
Chris

@Jonathan: you mean your TODO list, not mine right ? :)
Because i already use Enfold with WP Rocket.

Interesting test, I use all the mentioned themes, and looking to purchase your plugin.

One question, can you tell us how did you test the website speed (pingdoom, gtmetrix? or something else)
the location of the server and the location of the speed test server and show us a the actual demo website you have tested?

+1 for Beaver Builder Theme and Page Builder.

+1 for ENFOLD

How about flatsome? Very popular theme for WooCommerce.

Flatsome
Impreza
Upfront (wpmudev)

I have older client sites in Headway 2 & 3 as well as Pagelines DMS. I'm wondering if WPRocket will work well with them too. Thanks.

Great article. Would you please cover the Bridge theme by Qode? Thanks!

+1 for Enfold & Goodstore
+0.5 for Flatsome & Stockholm :-D

+1 for Beaver

Very interesting, I use Divi in lot of projects so I Would try your tips. Thanks!

+1 Enfold ;-)

For the sake of perspective, the Chris Lema post about "Divi Forever" referenced in this article is now 2 years old (despite the date at the top). He has since changed his views of Divi somewhat. In all fairness, though, there are still Divi detractors with current articles, just as with any theme. :)

I vote for testing Enfold - +1 Enfold!

We have been doing some tests on clients' websites built with Headway Themes. WP Rocket and HT go very well together, in case someone is interested.

Best,
Milena

This is a really great case study. I don't use the Divi Theme but I could see more of these studies for other WP Themes being helpful.

Very good article!

I also would appreciate some tests with pages that are created by the Divi Builder to see if the use of the builder has any impact on the page speed.

+ 1 for Beaver Builder

I'd love to see the Salient theme being reviewed. You can find it here: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266. It's one of the top sellers at Themeforest.net.

THNX

Just took over a DIVI themed website and looking to get the speed setup to fully optimise the website.

I'm not sure that DIVI is really that great of theme though with most things considered though.

I have couple of suggestions for speed test setup: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990 and https://themeforest.net/item/newspaper/5489609?s_rank=1

When you use the Divi Theme today (3.0 release) I believe it makes for a hell of a theme, almost like a framework. Adding WP Rocket to an already fast website hosted on Flywheel makes for an interesting case.

A quick note: that link to Chris Lema's post on Divi is an outdated one. He wrote that in 2014 and Divi has come a long way since then.

Ash

Thanks for sharing, its indeed really good

Hi,
Snyone had tried wp rocket with newspaper theme from TagDiv?
regards
midronepro.com

Will your plugin also speed up Newspaper theme?

Hi, interesting! I propose a genesis template based on the famework http://my.studiopress.com/themes/genesis/

Par example http://zigzagpress.com/portfolio/mindfulness-theme/ I recommand using the genesis framework with a good theme from studiopress itself of a third party supplier like zigzagpress.

Hope you can do a review of the benefits of WP rocket and genesis?

I loyal costumer...

Waiting for Themify Ultra theme

This is awesome case study! Will use divi theme for my other venture. Thanks :)

Hello! You should definitely test Uncode theme. It's one of the best ok the market right now!

Awesome idea :) i will try your plugin. Please test it on UNCODE theme from ThemeForest, they have beautiful design but poor performance.

can we say the same thing about EXTRA theme ?!

Hello,

Since the last update of Divi (3), a new and interesting feature have been released : CSS minification and built-in cache plugin. These two options may speed up Divi !

Hi, it would be valuable to get an updated article that shows the best configuration to use, plus comparison of results, now that Divi has been updated to provide CSS and JS minify.

I wish you could compare the top themes as of 2017. The theme of a website really matters in terms of speed. Also, things have really changed since 2015. Will really help everyone if the top themes are tested again as of 2017.

Genesis and any of the child themes, please!

CSS minification in Divi still not working good. On mobile Divi is very slow.

The objective downsides component of the story has been 'bought out' by Elegant Themes.

The link "Of course, there are downsides to using Divi" now redirects to DIVI sales page.

We have several websites created with Divi that are optimized with the WP-Rocket plugin. We are enthusiastic about WP-Rocket.
Now Elegantthemes promotes the Divi Rocket Plugin: https://www.elegantthemes.com/blog/divi-resources/divi-plugin-highlight-divi-rocket
Do you know this and have already done a feature comparison. At WP-Rocket we have an Infinite license for unlimited websites. We have the impression that with Divi Rocket a company wants to jump on the WP Rocket bandwagon with simple means

For the past 4 years our primary choice criterion is the page builder; everything else is secondary. We have moved exclusively to Elementor Pro, their minimal Hello theme, and extensive use of the built-in themeing capabilities. In this scenario, the theme is inconsequential; it's all about the page builder's performance.

With WP-Rocket and Elementor we consistently achieve excellent performance.

I use Divi with WP rocket and Siteground, and 99% of my pages are under 2 secondes, and most of them under 1 sec.

All my Divi sites (using divi theme) load under 2 seconds consistently without caching. I'm on DO droplets. I'm currently trying out a new image CDN service. The hater's narrative about Divi being slow is simply false! It's obvious that they don't know what they're talking about. I'm not satisfied with my current caching and image plugin. I'm actually looking into WP Rocket in combination with Bunny CDN as my new optimization stack.

I got divi and is great

Latest Articles of Themes & Plugins
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now