We all know how important website speed is to succeed and in this step by step guide, I will cover all of the most important factors that will make your Divi website load faster than ever.
I have created a test site for this guide and I will be optimizing it step by step so you can tag along and follow the process.
For this guide, I will be using WP Rocket and Permatters for most of the optimizations. I will also provide free solutions whenever possible. However, using different plugins can create some conflict, which is why you should always try them on a test or staging environment.
Also, keep in mind that when you are installing different optimization plugins they can have overlapping features, so it’s important to use specific plugins for specific tasks.
Without further ado, let’s get started!
Table of Contents
The Test Website
The test website I will be optimizing was built using Divi and my free Localbiz layout pack, and it’s hosted on SiteGround. It’s common for speed optimization guides to use light websites as examples, which means they don’t have any plugins installed.
But let’s be honest, in most cases, you do need additional functionality for your website and if you’re not a coder, you won’t be able to provide that without using plugins.
That’s why I’ve installed 6 well-known plugins:
- Social Warfare (social share plugin)
- Divi Supreme (Divi plugin)
- Nextgen Gallery
- Contact Form 7
- Yoast SEO
First, I want to show you the before and after optimization results. Please refer to the images below.
GT Metrix Score Results (Before Optimization):
GT Metrix Score Results (After Optimization):
Pingdom Results (Before Optimization):
Pingdom Results (After Optimization):
Google Page Speed Desktop (Before Optimization):
Google Page Speed Desktop (After Optimization):
Google Page Speed Mobile (Before Optimization):
Google Page Speed Mobile (After Optimization):
How To Run a Proper Speed Test
Before you start optimizing your website, you need to perform a proper speed test. GT Metrix, Pingdom, and Google Page Speed are great speed test tools you can use.
Now, there are a couple of things that you need to keep in mind when running a speed test.
- When you run a speed test, make sure that you choose a location that is close to your hosting. If you use GT Metrix you need to create a free account in order to choose a different location than Vancouver, Canada. If you use Pingdom, you can choose one from the dropdown menu, free of charge.
- Make sure you always run a few tests to get an average result and this will also allow you to make sure you’re getting the cache version of the page.
- The loading times, page size, and requests are the most important factors to look at, the grades are arbitrary and will fluctuate a lot. This means you can have a low rating but fast loading times and vice versa.
- The loading times of Pingdom and GT Metrix will be different because they use different measurements, so keep that in mind.
- Run multiple tests on your website with GT Metrix and Pingdom to have a benchmark to work from.
- Run a couple of tests through Google Page speed to determine your average score.
Let’s start with the low-hanging fruits. It’s always a good idea to disable any Divi settings and plugins if you are not using them for your website. This will reduce the number of requests and decrease the scripts that will be loaded. You need to go to Divi > Theme Options > General. As you can see in the image below, I’ve disabled most of the settings.
I will be using a plugin that will do this + the rest of the site. The options in Divi will only do this for the Divi builder.
In Divi > Theme Options > Builder > Advanced I disabled Static CSS File Generation and Product Tour.
- Go through your Divi settings and disable any function that you won’t be needing for your website.
- Do the same for your plugins.
Optimize Your Images
Optimizing your images is all about reducing the size of the image while maintaining the quality. Doing this will reduce the size of your page significantly, which will lead to faster loading times.
There are great plugins or tools that can help you do this, including:
- TinyPNG (free)
Let’s see how you can optimize an image and how much space it can save. To show you how this is done, let’s optimize the image below. The original size of the image is 1.9 MB, but once we optimize it, it will be reduced to only 15.07 KB and it will have the same quality.
The first thing I do is drop this 1.9 MB image into tinypng which provides a huge saving of 92% by lowering the image size to 145.5 KB.
I can reduce the size of the image even further by reducing the original dimensions from 1999x1333px to 680x453px by using Photoshop or any other photo editing program.
Thanks to all these changes, my image size went from 1.9 MB to 15.07 KB.
Using plugins like ShortPixel or Imagify will allow you to automate the process I explained above and all the images on your site will be optimized automatically.
For a more comprehensive selection, don’t miss Elegant Themes’ expertly curated roundup of the best image optimization plugins. This resourceful list ensures you find the perfect plugin to enhance your website’s visual appeal and performance.
- Optimize your images manually with TinyPNG or with the help of a plugin like ShortPixel or Imagify.
Does the amount of plugins you use impact the performance of your website? The answer is yes and no. More plugins installed means more requests and a bigger page sizes, but there is a way to disable plugins on a page/post basis with a script manager plugin.
When you want to install a new plugin, you should always ask yourself the following question: Do I really need this plugin or can I code it myself?
Let’s say you are using Google Analytics in Divi and you have a plugin that helps you insert the tag. However, you can easily copy that tag from the Google Analytics dashboard and paste it into Divi > Theme Options > Integration. If you do this, you won’t need that plugin.
When you install a new plugin, check the GT Metrix waterfall chart to see if it doesn’t slow down your website too much. Some plugins are badly coded and can really slow down your site, so you need to keep an eye on that.
Use a Script Manager Plugin
Now, don’t get me wrong. You do need plugins for your website, but you probably don’t need every single plugin to be activated on each page. When you activate a plugin it will be loaded on each page of your website even if you are not using its functionality on that page. Let me explain…
I’m using the following plugins on my test website:
- Social Warfare (social share plugin)
- Divi Supreme
- Nextgen Gallery
- Contact Form 7
- Yoast SEO
The only plugin that I actually need for the home page is Yoast SEO, but all the other plugins still load (except for Divi Supreme) even if I’m not using them on the home page. So, how can you disable plugins on a page or post basis? Well, you can use a script managers plugin like Perfmatters or Asset CleanUp.
I am using Perfmatters and when I open the script manager for the home page I can disable the plugins that don’t need to be loaded. Instead of having 5 plugins loaded on one page, I can just have the one I need.
Imagine that you have 30 or more plugins installed. With a script manager, you can disable them per page/post and this can reduce your page loading speed significantly.
This website has 35 plugins installed, but with Perfmatters I can disable them on pages I do not need them.
Perfmatters is a paid plugin but it provides additional optimization options.
These are the settings that I use in Permatters General tab:
I am using WooCommerce so in the WooCommerce tab I use these settings:
- Remove the plugins you do not need.
- Remove or find a replacement for slow plugins.
- Use a script manager plugin like Perfmatters or Asset CleanUp to disable plugins on a page/post basis.
Caching is very important to speed up your website. With caching you will be able to store a copy of your web page in a temporary caching location so it can be accessed by the end-user more quickly.
There are 2 types of caching:
- Caching at the server level
- Caching with a plugin
Catching at the server level means your hosting provider will handle the caching for you, as long as they provide that service.
My test website is hosted by SiteGround and they have their own caching plugin for their customers.
For the purpose of this guide, I’m using the plugin WP Rocket because it doesn’t only handle caching, it also provides many more optimization options, which I’ll explain later in this guide.
If you are already on SiteGround then I do not recommend using WP Rocket but instead, use their SG Optimizer plugin. Check out my comparison between WP Rocket and SG Optimizer.
Just install and activate WP Rocket on your site and it will start caching. You can also try W3 Total Cache, which is free.
- Activate your caching at the server level or install a caching plugin (WP Rocket recommended).
There are many different issues that can affect your speed test results and in this section of the guide, we are going to address and solve the most common issues.
- Lazy-load Images and Videos
- Enable Preloading
If you’re looking for a free solution, you can check out Autoptimize.
You will get this warning when files are keeping the page from loading as fast as possible.
Lazy-load Images and Videos
Lazy-loading means that the images and videos on a page will only be loaded when the user scrolls to where the image or video is located on the page.
To enable lazy loading in WP Rocket, go to the “Media” tab and check enable for Images. If you have Iframes and videos on your page, you can also enable that option.
I also enable “Add missing image dimensions” because it can reduce the cumulative layout shift on the site.
For a free solution, you can try the a3 Lazy Load plugin.
If you enable preloading, you will be able to load certain files early on. I have activated the cache preloading on my page and I can check that option because I’ve installed SEO Yoast as well.
On the “Preload Links” section, make sure you check the “Enable Link Preloading” option. This is an amazing feature and even though it will not increase your speed rating, it will create the feeling the page is loading instantly. It also improves the perceived load time by downloading a page when the user hovers over the link.
If you are hosting fonts locally on your server, you can preload them in the “Preload Fonts” tab and use them on your site.
Under preload fonts you can assign the fonts that need to be downloaded right away to avoid render-blocking.
You might get this waring in Google page speed:
To solve this add this in the preload fonts field:
- Enable Lazy-load Images and Videos.
- Enable Preloading and Preload Links.
Hosting and CDN
Good hosting is an absolute must if you want your site to perform well and have good speed. I can recommend SiteGround, Kinsta and Cloudways because I’ve used them a lot and I have a lot of experience with these hosts. I use SiteGround for most of my websites, and Kinsta for websites that need a better performance, such as this one.
CDN is short for Content Delivery Network and it’s a network of servers around the world that stores a copy of your website. For example, if your hosting is in the US and someone from England visits your site, they will be redirected to the closest server available instead of the US server so the page can load a lot quicker.
Improving the speed of your Divi website is not difficult to accomplish once you know what you should do. That’s why I created this simple guide and I hope it can be useful to you! The steps are super easy to follow, which proves that you don’t have to know how to code to improve the performance of your site. You only need a good guide and the right tools, so don’t hesitate to give this a try and make your site the best it can be.
20 thoughts on “How To Speed Up Your Divi Website (Guide)”
Thanks for this guide. It is always a challenge to optimize Divi for speed. I only miss the Google Pagespeed results split for mobile and desktop. Why are these not both included? Especially because nowadays most traffic comes via mobile on an average website.
I made the mobile screenshots but forgot to add them in the guide. They are now added.
I use Siteground for our website and I use the SG Optimizer plug-in they offer and it does many of the items that you show WP Rocket does. Do you feel that WP Rocket is better than using SG Optimizer?
I notice that SG Optimizer has a lot more options now than back in the days. I will be making a comparison next week for SG Optimizer and WP Rocket to see if WP Rocket is still beneficial if you are already on SiteGround. Good chance that you won’t need WP Rocket then.
Hi thanks a lot for so great information. I use my web with Divi Theme and my knowledge of programming is very short. An experience person has optimize it but the values that gives with speed og Google or Pingdom are really good. But with gtmetrix are really bad. Do you think I need to solve something or is quite good as it is now? The web is https://nosunelanube.com (hope you understand my english, i promise to learn a little bit more) Kindly.
I would not worry too much about those ratings. I checked your site and it is incredibly fast.
The important speed timings of your site on GT Metrix such as TTFB and first paint are really good.
You can check out this article from WPJohnny about speed tests.
Good post with useful info, but I noticed that you say that SiteGround don’t provide caching at the server level. I get great results with their SG Optimizer Plugin which integrates with their caching features, Dynamic Caching & Memcached, plus controls browser caching and minifying, compression and combining etc. You mention it in your SiteGround review so was just curious why you didn’t mention it here.
You are right I thought that was only for the highest plan and I was not clear about that in the guide. I have made it more clear now.
Thanks for the heads up.
How come that if I check my domain’s IP address with http I get almost 100/100 but when I check the domain directly which is linked to the exact same IP/website and has https I get a 30/100
This is because of DNS lookup. When you visit a website then a DNS lookup has to be made.
You can read more about it here:
I have Standard B2s (2 vcpus, 4 GiB memory) and my TTFB is still 4.5ms which is horrible.
A low TTFB can have different causes. Check this article from WP Rocket to identify what is causing it for you.
Thank you Mark, very useful and clear guide. What do you think of WP Fastest Cache instead of W3? Less options but also lighter, isn’t it?!
In my opinion, WP fastest Cache is easier to use. I am planning to create a test with the most popular free caching plugins to see how they score.
Take a look at this one https://wordpress.org/plugins/swift-performance-lite/
I have heard really good things from others about this one.
Thanks for the guide Mark! I’ve seen so many guides but don’t actually prove it. I checked yours through gtmetrix and it’s through the roof!!!
I’m curious about your table of contents. Is that a plugin or you designed it with Divi?
You can create this table of contents just with a text module for Divi and then use the text list options to design it.
Thanks very much for this guide! I have a couple of question: in Divi do I have to disable Static CSS File Generation if I use WP Rocket? And if I don’t use WPR its better to leave it? When you talk about copy Google analytics code and copy it to Divi integration, do I have to copy the simple ID (UA-1234567-1) or the hall code (
window.dataLayer = window.dataLayer || ;
gtag(‘js’, new Date());
………..) Thanks for help!
If you use WP Rocket I would disable Static CSS File Generation. WP Rocket will do this then for you.
If you do not use WP Rocket or any other plugin that handles this then enable this function in Divi.
For Google Analytics you need the whole code with the opening and closing
Nice guide. Appreciate your putting this together. Many of the suggestions I have been doing or using plugins like WP Rocket. I have not used Perfmatters and am intrigued to see if it will help the sites I manage and work on. Question: It looks like Perfmatters has some features that duplicate some features of WP Rocket; have you found any conflicts or problems in using both?
The main reason for taking Perfmatters is the script manager. With this, you can disable plugins for certain pages. For example, if you are using a social share plugin for your blog, you can disable that for the rest of your site, or using Woocommerce, you can disable that on all pages except for your shop pages.