The Divi Speed Update Review & Safe Update Guide

It has finally happened folks! The Divi developers have finally released its much-anticipated Divi Speed Update for the Divi Theme and we couldn’t be more excited for this positive change. So much so, that we are going to briefly touch on each of the enhancements, then also show you the impact this has had on one of our sites, and how you can squeeze even more speed out of your Divi websites.

Of course, we are not stopping there, we will also share the steps we took to make sure that this feature Divi update did not break our site, so get your thinking caps out, we are about to do some good old-fashioned learning today!

Video Tutorial

3 Key Divi Theme Speed Improvements

So without repeating everything the official post on the Elegant Themes blog said, we do want to highlight some of the biggest changes with the Divi 4.10 Update because it really is amazing what they were able to achieve here.

Dynamic PHP Framework

It was not a very well-kept joke secret in the web development community that Divi was a bit husky and tended to slow some websites down if you did not have great hosting.

This feature should really be called the Dynamic Module Framework because what Divi used to do was to load every module in the Divi Theme on every single page and post whether you used it or not. This creates a ton of bloat which slowed down websites for basically no reason.

No more!

As of Divi 4.10, Divi will now ONLY load the code for the modules that are actually being used on your pages and posts!

Dynamic CSS

To further reduce that unsightly bloat, Divi will now recognize for example when you have a bunch of Blurb Modules on the same page with the same settings. It will no longer have repeat copies of that CSS and will instead apply one block of CSS code to the various instances of the Blurb Modules.

Less CSS, even if it is the exact same, means faster load times for Divi websites.

WooCommerce Checkout with No Order Bump

New Performance Options

After updating to Divi 4.10 you’ll notice a new “Performance” tab in the Divi Theme Options where you can easily switch most of these speed enhancements ON or OFF if you find that you are running into any issues.

For a full write-up of what these various settings do, check out the official post on the Elegant Themes blog.

WooCommerce Checkout with No Order Bump

Our Experience So Far

In our initial testing, our results were a bit varied, but after a few refreshes showed some speed increases. Let’s take a look at what that looked like with our Divi Ajax Filters demo page.

Order Bump Loop Layout Thumbnail Settings

Before Divi Speed Update

Order Bump Loop Layout Thumbnail Settings

After Divi Speed Update

As you can see we had huge gains (the good kind) in performance without any specific optimizations which are pretty insane if you figure we basically just updated our theme here.

With that said, there have been many reports of plugin conflicts and layout issues that have come up after folks have updated and we’ll talk about how to prevent these issues on live sites in the next section of this post, but we also experienced some of these minor layout issues.

Order Bump Loop Layout Thumbnail Settings

Broken CSS

Order Bump Loop Layout Thumbnail Settings

Fixed CSS

We easily fixed this by simply disabling the Dynamic CSS feature in the Divi Speed Update. We recommend you try this as a first step if you have any issues after updating to Divi 4.10.

To disable Dynamic CSS, just head to Divi > Theme Options > Performance > Dynamic CSS > Disabled.

WooCommerce Checkout with No Order Bump

Other than another small issue that affected some of our plugins (which have since been fixed with Divi 4.10.3, we have had a very pleasant experience with the Divi Speed Update.

Definitely don’t expect your completed production site to see the near-perfect scores the Elegant Themes team mentions in their blog post because these are still early days and I’m sure there will be some plugin conflicts as developers update to support the newest Divi features, but this is a great start!

NOTE: If you do find any issues concerning one of our plugins after updating to Divi 4.10, please contact our support team so that we can troubleshoot the issue with you! Contact Support

Safely Update Divi

We all know the cliche, prevention is better than the cure, and so if prevention before the client calls you screaming.

Check out these steps you can take to prevent any collateral damage when updating your site to the latest version of Divi.

Wait

As we mentioned earlier in this post, when big feature updates drop, there are bound to be some issues that could not have been anticipated. As of posting, Divi 4.10 is actually already on 4.10.3 to fix many of the issues that came up. It goes to show that it might be better to wait a week or so to avoid any of the potential issues that will be fixed by these rapid incremental updates…it might just save you a few gray hairs.

Backup

Before you do any major updates for your plugins or themes on a production site, make sure to make a backup right before you do those updates.

This will make it easy for you to roll your entire site back to a state where it was working perfectly.

If you are using Cloudways, the steps to create a Backup are super easy.

Cloudways Backup Instructions

Log into your Cloudways Account.

Select the WordPress install with that you will be updating Divi on.

Click on “Backup & Restore“.

Click on “Take Backup Now“.

WooCommerce Checkout with No Order Bump

Test on Staging Site

If you are paying that little bit extra for a great hosting provider, you should have the ability to create a staging clone of your production site. Because the staging site is an exact copy of your production site, any updates to themes or plugins should act the same, so you will know with a fair amount of certainty whether this new Divi update will break anything or not.

If you are using Cloudways, the steps to create a Staging Site are super easy.

Cloudways Staging Site Instructions

Log into your Cloudways Account and click on Applications.

Find the Divi WordPress install with that you will be creating a Staging Site for.

Click on the “Three Dots“ to the right.

Click on “Clone App/Create Staging“.

Create Divi Staging Site on Cloudways

Purge Cache

Most hosting providers worth their salt will have the option to utilize a server caching solution. Still, as with the aforementioned steps, this can lead to some issues after a major update because of outdated cache files.

Depending on your hosting provider and which solution they offer, the steps will differ, so if you are uncertain, contact their support team, and they should be able to sort you out in no time.

Cloudways utilizes Varnish, so all we need to do is log into our Cloudways Account > Select our Server > Server Management > Manage Services > Varnish > Purge.

Create Divi Staging Site on Cloudways

Generally, this should sort out any caching issues, but it could be necessary to purge any plugin or browser cache that might have been built up if you have any issues that persist or show up.

Our post on 7 Things to Try When the Divi Builder is Not Loading covers just that!

NOTE: If you do find any issues after updating to Divi 4.10, please first check out our post on How to Fix the WordPress White Screen of Death and 7 Things to Try When the Divi Builder is Not Loading as they would solve the most common issues with Divi and WordPress. If you think it might be an issue specific to one of our plugins, please contact our support team so that we can troubleshoot the issue with you! Contact Support

Further Speed Improvements

As you saw, the new Divi Speed Update already has our site clocking in way better scores than before the update, but that does not mean it is not possible to speed up our site even more with little effort.

3 great ways to speed up your Divi site even further, are to utilize a Caching Plugin, a Content Delivery Network, and one of our plugins designed especially for Divi, Divi Nitro.

Let’s take a quick look at all 3.

Caching Plugin

While we generally do not encourage Divi users to have a caching plugin activated while you’re building a Divi site, it could be a great way to squeeze a few extra points out of those Google PageSpeed scores. The only issue with these at times is that they are not specifically optimized for Divi, so can sometimes cause issues like the Divi Builder not to load or some other CSS or layout issues.

If you choose to use one of the free caching plugins, we recommend you use WP Fastest Cache, just disable it while working on your Divi site.

Content Delivery Network

A Content Delivery Network is basically taking your website files from the server where they live and distributing them to various servers around the world to increase the time it takes for your visitors to load those files on their devices. You can see how this might speed up the time it takes to load up your site.

You can choose to either use a paid CDN which will add some additional features, but if the budget is a bit tight, we recommend the FREE tier over at Cloudflare.

We have a whole tutorial on how to Speed up your Divi website with Content Delivery Network that will walk you through how to set that up using Cloudflare.

Divi Nitro

Divi Nitro is our answer to slow Divi Websites and a fun fact around Divi Nitro is that we almost built some of the features into it which Elegant Themes released with Divi 4.10, but we heard this awesome was on its way, so we focussed our energy into improving our plugins instead.

There are a few flagship features you’ll find in Divi Nitro that will get your Divi sites closer to the green PageSpeed score holy grail.

Divi Nitro Features

Javascript Minification & Combination

Any website runs on code, but sometimes this code is filled with a bunch of spaces and punctuation that just takes up space which eventually leads to slower load times for your Divi site. By removing these, we can greatly improve how fast our Divi site loads, and this is where Divi Nitro can help.

Divi Nitro allows the minification of JavaScript, CSS, and HTML. Because this can sometimes cause issues with the way your Divi site is displayed or functions, we have built a handy tool into Divi Nitro to help you exclude certain files to prevent that from happening.

Speed up Divi with Divi Nitro

Before Divi Nitro

Speed up Divi with Divi Nitro

After Divi Nitro

Defer Media

Using elements like Youtube videos or images are fantastic ways to engage your Divi site visitors, but it comes at a price when it comes to how fast your site loads. With Divi Nitro, it is possible to also load these resources in the background if they are not immediately needed to display something on the part of your site that is in the viewport.

The result when doing so is content that is painted to the screen much faster than with traditional rendering methods and your SEO will love you for it. The best part, your site visitors will probably not even notice that it has happened it is that seamless.

All the fast with none of the furious, congrats!

Changing your Divi site URL - The End

Conclusion

If it was not clear yet, we LOVE the new Divi update and all the performance-enhancing features it brings to our favorite page builder. It is maybe one of the biggest steps forward for the entire Divi eco-system since the introduction of the Visual Builder. Just make sure that BEFORE you take the plunge, that you take the right steps to prevent catastrophe when updating.

And if you are interested in further improving the performance of your Divi site, check out the FULL list of features you’ll find in Divi Nitro.

We hope this post on The Divi Speed Update Review & Safe Update Guide was helpful and definitely comment below to let us know what you thought!

1 Comment

  1. Great round up. I’m one of those people who updated too soon and had lots of ugliness happening. Thankfully they were more responsive in the chat support this time!

Submit a Comment

Explore more from Divi Engine