How To Speed Up Your Divi Website (Guide)

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!

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:

  • WooCommerce
  • Social Warfare (social share plugin)
  • Divi Supreme
  • 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 before optimization

GT Metrix Score Results (After Optimization):

GT Metrix after optimization

Pingdom Results (Before Optimization):

Pingdom before optimization

Pingdom Results (After Optimization):

Pingdom after optimization

Google Page Speed Desktop (Before Optimization):

Google page speed before optimization

Google Page Speed Desktop (After Optimization):

Google page speed 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.

To-Do List

  • 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.

Divi Settings

Let’s start with the low hanging fruits. It’s always a good idea to disable any Divi setting 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.

Which settings are good for you depends on what you need for your site. For example, I have disabled Enqueue Google Maps Script because I am not using Google maps for this site, but if you are using Google maps then you need to enable it. I have disabled Minify And Combine Javascript Files as well as Minify And Combine CSS Files.

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.

Divi theme options general settings

In Divi > Theme Options > Builder > Advanced I disabled Static CSS File Generation and Product Tour.

Disable product tour in Divi

To-Do List

  • 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:

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.

Optimized photo

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.

Compress photos with TinyPNG

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.

Image info window

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.

To-Do List

To-Do List

Plugins

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 bigger page size, 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 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:

  • WooCommerce
  • 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 manager 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 script manager plugin

Perfmatters is a paid plugin but it provides additional optimization options.

These are the settings that I use in Permatters general tab:

Perfmatters general settings

I am using WooCommerce so in the WooCommerce tab I use these settings:

Perfmatters woocommerce settings

To-Do List

  • 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

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.

To-Do List

  • Activate your caching at the server level or install a caching plugin (WP Rocket recommended).

File Optimization

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.

Including:

  • Minify CSS and JavaScript
  • Combine External CSS and JavaScript
  • Eliminate Render-Blocking JavaScript and CSS
  • Lazy-load Images and Videos
  • Enable Preloading

Minify CSS and JavaScript

Minification will allow us to remove all the white space and comments from the CSS and Javascript files. This will help us reduce the size of the files.

Go to WP Rocket and click on the “File optimization” tab so you can check Minify CSS Files and Minify JavaScript Files and the plugin will do this for you.

WP rocket file optimization

If you’re looking for a free solution, you can check out Autoptimize.

Combine External CSS and JavaScript

To reduce requests on your page, you can combine the CSS and Javascript files. It’s not recommended that your hosting is running on HTTP/2 because files can load at the same time. Click here to check if your website is running on HTTP/2.

In WP Rocket, you can combine the files in the “File optimization” tab as well. The option is right under Minify CSS Files and Minify JavaScript Files.

Eliminate Render-Blocking JavaScript and CSS

You will get this warning when files are keeping the page from loading as fast as possible.

In WP Rocket, you need to go to the “File Optimization” tab and check Optimize CSS Delivery and Load JavaScript Deferred.

WP rocket eliminate render blocking

For a free solution check out Autoptimize and Async JavaScript.

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.

WP rocket lazy load

For a free solution, you can try the a3 Lazy Load plugin.

Enable Preloading

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.

WP Rocket preloading

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:

Preload ET Icon fonts modules ttf for Divi

To solve this add this in the preload fonts field:

/wp-content/themes/Divi/core/admin/fonts/modules.ttf
preload fonts

To-Do List

  • Enable Minify CSS Files and Minify JavaScript Files.
  • Enable Optimize CSS Delivery and Load JavaScript Deferred.
  • 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.

Final Thoughts

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)”

  1. Hi Mark,

    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.

    Regards,

    Kevin

    Reply
  2. 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?

    Reply
    • 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.

      Reply
  3. 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.

    Reply
    • Hi,

      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.

      Reply
  4. Hi Mark

    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.

    Reply
    • Hi Andy,

      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.

      Reply
  5. 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

    Reply
  6. 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?!

    Reply
  7. 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?

    Reply
    • Thanks.

      You can create this table of contents just with a text module for Divi and then use the text list options to design it.

      Reply
  8. 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 || [];
    function gtag(){dataLayer.push(arguments);}
    gtag(‘js’, new Date());

    gtag(‘config’, ‘UA-150758594-1’);

    ………..) Thanks for help!

    Reply
    • Hi Chistina,

      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

      Reply
  9. Hello Mark,
    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?

    Reply
    • Hi Jim,

      Yes, WP Rocket and Perfmatters do have overlapping features. I use both and I have not encountered any problems. Just make sure that you only let one plugin handle a specific feature. For example, both can defer JavaScript so enable this for one of the plugins.

      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.

      Reply

Leave a Comment

19 Shares
Share19
Pin
Tweet