How to Speed Up Your Divi Website (in 5 Steps)
It’s no secret that website speed is incredibly important and a fast website is becoming more and more crucial.
It’s also no secret that without proper optimizations, Divi can be sluggish when it comes to website speed performance compared to other themes. Divi is a page builder and comes loaded with so many incredible design tools and website building functionality. However, with great power comes great amounts of code that must be loaded in the browser.
However, with the right optimizations, you can have a screaming fast Divi website. And it’s not hard to implement either!
UPDATE 8/19/21: Elegant Themes just launched the highly anticipated performance update to Divi! This is great news and will drastically speed up Divi websites out of the box! However, it’s still highly recommended to follow these best practice steps to optimize your site fully, espeically for the components of your site that are outside of Divi (3rd party plugins, hosting, CDN, etc). Nick Roach himself still recommends these steps:
NOTE: This Tutorial will show you WHAT to do and WHY to do it, but it is not a step-by-step tutorial. We will be releasing an in-depth training that will show you how to optimize a REAL eCommerce website step-by-step. Subscribe to our email list to be notified when this is released.
Steps to Speed Up Divi
There’s lots of ways to speed up Divi, but these five steps will have the greatest impact on your website loading:
- Use Great Hosting
- Use Proper Caching
- Optimize Your Images
- Use Good Plugins (& only the plugins you need)
- Use a CDN (unless your traffic is purely local)
Those are the high level steps to speed your Divi website. Now we’re going to break down each step and offer some recommendations and additional insights.
Before we get started though, he’s some proof that these steps work:
While this is definitely a great score and fast speeds, we still have some room for improvement. But in keep in mind our website is a high functioning eCommerce website with a lot of plugins to power our store along with the licensing system for our products, affiliate system, support system, etc. And it connects to a lot of 3rd party services too.
We performed the same test but with our Divi Overlays demo site. It’s not connected to nearly as many 3rd party services, so we were able to get it even faster. It’s also worth noting that is has 65+ popups built with Divi Overlays on it!
Needless to say, if you follow the steps outlined in this article, you can have a very fast loading Divi website, and probably even beat our score too!
In fact, after we launched the new version of this tutorial with the new video above, I received this email from one of our Divi Life customers:
(published with permission)
And here’s Mikel’s speed test using several Divi Life products and Flywheel Hosting:
Disclaimer about the scores: by no means do we believe that getting a great score is the top priority. Scores and speed testing tools should be used as a guide only! The top priority should be on the content and the user experience of your site. However, a big part of user experience is site speed, and a great tool for measuring site speed, identifying weak points, and benchmarking is GTMetrix and other speed testing tools.
Now that you have seen some PROOF that this process works, let’s dive in and go over the proven steps to help you speed up your Divi website!
Step One: Use GREAT Hosting
Your host is your website’s home and where it lives online. It’s the digital equivalent of the building for a physical business.
If you owned a nice restaurant, you wouldn’t want your building to have leaks in the ceiling, poor plumbing, unreliable electricity, or no heating/cooling, right? A rundown building like that would drive business away so quickly no matter how great your food is.
It’s no different for your website. If your website’s building (the hosting/server) is performing poorly, it will drive visitors to the back button, no matter how great your content is.
Having a fast loading website that is reliable is extremely important. And GREAT hosting is one of the most crucial pieces of this speed optimization puzzle.
GREAT Divi Hosting We Recommend
For Divi Life we have quite a few different hosting accounts from different providers in order to power all of the demo websites for our Divi products. While we obviously haven’t tested every WordPress hosting company out there, we have tested a lot.
Here’s our three Recommendations for the Best Hosting for Divi:
- Siteground (low cost provider)
- Flywheel (mid level)
- WP Engine (top of the line— get 10 percent off with this link)
We are currently using all three of the companies above. We use Siteground to power the demo websites for our Divi Child Themes. We use Flywheel to power the demo websites for our Divi Plugins such as the Divi Popup and Divi Mega Menu demo websites. And we use WP Engine to power Divi Life (the website you’re on now).
The above links are affiliate links, which means we would get a small commission if you purchase after clicking the links, however as mentioned above we only recommend companies that we trust and have first hand experience using.
We will create a future post that will go more in depth about each of these hosting solutions and why we recommend them. In the meantime though, all three are very fast relable hosts for Divi. And WP Engine and Flywheel both include tools such as automatic daily backups, built-in security, one-click staging, and more.
Step Two: Use Proper Caching
WordPress websites store content in the database, and when one of your website visitors comes to your website to read a page or post, WordPress will perform what’s called the “WordPress loop” which means it goes to the database to fetch the content, then brings it back to display on the page (thus completing the loop).
But this loop is time consuming. It’s much faster to serve static content to the visitor instead of checking the database for each and every visitor AND each and every page that they load.
Page caching will create static versions of your pages/posts and serve those to the visitor instead, which will drastically speed up your website.
However, even with the built in server level caching, I still use a cache plugin for further optimization and to cover things that the server level caching doesn’t do.
WP Rocket is the best cache plugin I’ve ever used from both a performance/speed standpoint, but also from a usability standpoint. Most other cache plugins are clunky to use and hard to understand. WP Rocket makes it very easy to implement all the features, plus they have really great help articles integrated throughout the plugin to give you a good understanding of what you’re implementing.
WP Rocket is actually the only cache plugin that WP Engine and Flywheel allow on their hosting because WP Rocket went the extra mile to automatically deactivate certain features that would normally conflict with the server level caching.
If you simply activate the plugin with the default settings, you will see dramatic speed improvements. However, I highly recommend spending more time enabling more features and performing speed tests. Just be sure to test your website’s functionality after each feature you enable. In some cases, certain features can break website functionality. WP Rocket does have some great ways to exclude certain parts of your page or certain files from being included in the optimization. So you don’t always have to completely stay away from a optimization feature because one little things stops working. Instead you can just exclude it. For example, WP Rocket’s lazy load feature can sometimes conflict with Divi’s image animations. Rather than turn off the lazy loading, or the animations, you can simply add a CSS class to the images that you want excluded from the lazyload, and WP Rocket will keep it from being lazy loaded.
Regardless of what hosting you use, I highly recommend WP Rocket.
Step Three: Use Optimized Images (compressed & properly sized)
Images are a HUGE part of websites. And I mean that in both the importance of the role they play in the design and content on the page, but also in the size of the files compared to the rest of your website.
If you use zero images on your website then it will load signifcantly faster than if you use a lot images. Obviously, you need images though, so let’s just optimize them properly instead of ditching them altogether.
Before I can tell you HOW to optimize images, it’s important that I tell you WHAT image optimization is.
Image Optimization is essentially broken down into two parts:
1. Image Compression- uses complex algorythms to make the image lighter (smaller file size). It does this by grouping similar data or pixels together. There is “lossless” which means no quality degradation, and “lossy” which means the quality can be reduced.
2. Image Resizing- this is simply making your images smaller in width and height so they are no bigger than they need to be. If your image is being displayed on your page at 700px wide, then the image file DOES NOT need to be 5,000px wide.
My favorite tool for Image Optimization is Imagify.
Imagify, is the best image optimization tool out there. There used to be a different plugin that I recommended, however after testing Imagify against it, Imagify came out on top (and it wasn’t even close). Optimizing with Imagify instead of my previous recommendation resulted in significant speed improvements.
Imagify lets you “set it and forget it” which is super convenient. Once you get it set up and optimize your existing images, then you don’t have to think about it ever again. It will automatically compress and resize new images that you upload based on your existing settings that you configured.
Imagify also will create and serve Webp images for you. This will also help with load times as Webp images are signicantly smaller than .png/.jpg/etc.
Step Four: Use Good Plugins (& only the plugins you need)
It’s common to hear people say “using a lot of WordPress plugins will slow down your site.” While there is some truth to this, it isn’t anywhere near the full story.
There’s no magic number of plugins you should have on your website.
It’s more about the amount of code that the server has to process and the browser has to load when loading the website for the user. Some plugins are purely backend functionality and add zero scripts, styling, etc. to the front end of the website. And then there’s some seemingly small plugins that add heavy scripts or large CSS files, or a lot of PHP serverside processing— all which can really slow down your website.
So the number of plugins is irrelevant. It’s about the amount of code.
Some plugins can be “PHP heavy” and add a lot of PHP code that must be executed by the server. While this can slow down your website, it usually can be allevated with proper caching as outlined above.
However, if a plugin is adding large scripts or stylesheets, proper caching and file optimization can minimize performance impacts, but it won’t solve it altogether. The browser must still load the script one way or another. That’s why it’s important to only add plugins you need, and make sure they’re built with performance in mind. At Divi Life, we’re constantly improving our Divi plugins to perform better.
Step Five: Use a CDN (unless your traffic is purely local)
A CDN (content delivery network) will copy the heaviest parts of your website to servers around the world, and serve the visitor from the server that is geographically closest to them.
By getting your website physically closer to the user, it can dramatically speed up your website.
This is especially important if you have website visitors from all around the world, or different parts of the world. For example, here at Divi Life we have customers and website visitors across the world, so a CDN is crucial.
If your website is a local business though, and you don’t have traffic coming from other parts of the country or world, then you probably don’t need a CDN. You would be better off choosing a hosting company that has servers physically close to your audience.
Note: some hosting companies have servers in different datacenters across the country world. Some hosts let you choose what datacenter you want at signup, and other times it happens automatically. But it’s always best to figure out where your actual server is georgraphically, and find out if there’s a better option. In most cases, your hosting company will be happy to migrate you to the closer server for free.
Here’s the CDNs We Currently Use and Recommend:
- RocketCDN (Stackpath but integrated with WP Rocket— best choice for easiest set up!)
- Stackpath (formerly MaxCDN)
We currently use all the above. WP Engine hosting has Stackpath integrated for free which is great. WP Rocket has the ability to turn on their RocketCDN (which is Stackpath too) in a single click which is very very easy. It’s actually cheaper to use WP Rocket’s RocketCDN than to go to Stackpath directly.
BONUS: Make the Divi Visual Builder Run Smoother
I’ve seen Divi users blame Divi or their hosting for everything running slow while they’re building with Divi.
In some cases though Divi or the hosting isn’t the problem— it’s the user…
Okay not actually the user, but on the user’s end.
Divi is website building SOFTWARE and software needs the proper resources to run smoothly. Yes, that means resources on the hosting/server needs to be sufficent. But it also means the user’s computer needs to have sufficent resources too.
Here’s a few steps you can take to make Divi and the Visual Builder Run More Smoothly:
- Use a Computer with Signicant RAM
- Use a Modern Browser
- Close unecessarry tabs, windows, apps, etc
I hope this was helpful! The goal was to give you a rundown on the 5 things that will give you the biggest impact when it comes to speeding up your Divi website. To be clear, there’s a lot more things you can do to make Divi run faster. This list is by no means exhaustive. We’ll be creating more content with step by step tutorials on how to optimize your Divi website. Stay tuned!
Let us know in the comments below if you have any questions, or if there’s anything big we missed that you have found to help with Divi performance!
NOTE: This Tutorial showed you WHAT to do and WHY to do it, but it is not a step-by-step tutorial on HOW to optimize your Divi website. We will be releasing an in-depth training that will show you how to optimize a REAL eCommerce website step-by-step. Subscribe to our email list to be notified when this is released.