Divi Speed Optimization – The Ultimate Guide!

Today, it’s not a secret that website speed is one of the most essential factors to ensure a great user experience as well as ranking. And that’s why in this guide, I will discuss Divi speed optimization.

Divi is both a page builder and theme that comes with incredible website building functionalities and design tools. Though the Divi page builder is robust, and its theme is really lightweight and faster, it can be slowed down due to some of its underlying factors, which require proper optimization.

However, if you are using Divi, this guide can help you with the right optimization techniques to have a faster Divi site.Divi Speed Optimization – Ultimate Guide

Divi’s Speed Test (Without Optimization)

Before you start optimizing the site, it would be better to see how Divi performed initially. Here’s a performance result of Divi tested by WP Rocket for mobile devices. WP Rocket has used Google PageSpeed Insights and WebPageTest.org to conduct this speed test.

Here you can see the performance grade for the Core Web Vitals, Speed Index, Total Blocking Time, First Contentful Paint, Time To Interactive, Fully loaded time, and the number of HTTP requests.

KPIs (Mobile performance) Score
Overall grade 84/100
First Contentful Paint 2.5 s (orange)
Speed Index 4.7 s
Largest Contentful Paint 2.8 s (orange)
Time to Interactive 5.4 s
Total Blocking Time 200 ms
Cumulative Layout Shift 0.01
Fully loaded time 2.669 s
HTTP requests 24

Divi got an 84 out of 100 performance grades on another speed test on the lighthouse. These numbers are quite solid for pages that are built using Divi. However, you should keep in mind that when you start working on your website in full swing, install other plugins and do all the other necessary things, and your site loading time will be impacted.

Divi Speed Optimization Techniques

Now that you have seen the actual speed performance of Divi without any optimization, it’s time to see how you can optimize your site to have the greatest impact on the website loading speed.

1. Use Good Hosting

When it comes to getting a faster website loading speed, it all starts with using a good hosting provider. You need to choose the right hosting that works fast in terms of network connection and servers.

Otherwise, you can do everything possible to speed up your website, but nothing will really be worth it. Therefore, if you have a slow Divi site, make sure to upgrade to great hosting.

2. Customize Divi’s Performance Settings

Divi already has some great built-in speed and performance optimization features that will help you to speed up Divi.

You can customize the performance optimization features by navigating to Divi from your WordPress dashboard and then selecting Theme Options. Now, you will find the General tab; from here, choose the Performance sub-tab, and that’s it.

Customize Divi’s Performance Settings

In this tab, you will find all the necessary optimization features that will make it easier for you to build a super-fast Divi website.

  • Dynamic Module Framework: This feature is well known for powerfully boosting website speed. It also executes PHP functions on demand.

Divi executes all the logic for rendering the modules and features on each page only on the fly. And all the other things go out of the equation. Simply put, anything considered “bloat” is removed from the back-end. Therefore, you need to enable the dynamic module framework option.

  • Optimize CSS Delivery: The best part about Divi is that it identifies the critical CSS and optimizes CSS delivery automatically. In fact, it automatically defers all the non-critical styles, which helps in reducing the Divi Builder’s CSS output and loading time.

Like JavaScript optimization, only when you need a specific module or page, it will load the CSS. therefore, make sure to enable all the following features-

  • Dynamic CSS
  • Dynamic Icons
  • Load Dynamic Stylesheet In-Line
  • Critical CSS

This way, you can make Divi remove all the render-blocking CSS requests.

  • Critical Threshold Height: When you increase the height of the threshold, it will defer some styles which results in a slower load time but less likely to have an increasing Cumulative Layout Shifts (CLS). In that case, if your website experiences any CLS issues, simply increase the threshold height; otherwise, you can keep it medium.
  • Dynamic JavaScript Libraries: Enabling the dynamic JavaScript libraries helps Divi to be more consciously modularized and boost the site speed.

It loads and processes the JavaScript functions and external JavaScript libraries only when they require modules or features on a page. And when the smaller base JS file size combines with the dynamic JS libraries, it will automatically boost the site speed.

  • Disable WordPress Emojis: All modern browsers are now supported by native emojis; therefore there is no need to use the WordPress native emoji system. Fortunately, by enabling the “Disable WordPress Emojis” feature from Divi, you can keep this option disabled and remove unnecessary resources.
  • Defer Gutenberg Block CSS: As you’re using Divi, that means you are not going to use the Gutenberg (default WordPress block editor). So naturally, you don’t need to use Gutenberg blocks to style your page.

This is the reason you should enable “Defer Gutenberg Block CSS”. It will automatically lazy-load the Gutenberg Block CSS on those pages where Divi Builder is used. Remember that the Gutenberg Block CSS may still be loaded just in the footer, but it will no longer block your pages from loading.

Apart from all these, make sure to enable all the following options-

  • Improve Google Fonts Loading feature
  • Limit Google Fonts Support For Legacy Browser
  • Defer jQuery Compatibility Script and lastly,
  • Make the Defer Additional Third-Party Scripts.

So, this is how you can optimize Divi’s performance features and boost your website site speed.

3. Use a Caching Plugin

WordPress stores website content in a database, and when a visitor comes to your page or post, WordPress performs the “WordPress loop.”  This means it goes to the database to fetch the content and brings it back to display on the page or post. This is how it completes the loop which is time-consuming.

W3 Total Cache

You can avoid this time-consuming process by using page caching which will create a static version of your page or posts. It means it will store cached static HTML versions of your website’s page and ensure fast content delivery.

Apart from page caching, there are other three types of caching-

  • Browser Caching
  • CDN Caching
  • CDN Caching

Some hosting providers have caching at the server level, so make sure if your hosting provider offers it or not. However, you can use plugins for further optimization, and some of the best caching plugins are-

4. Optimize Time to First Byte (TTFB)

If you want to get a streaming fast website, make sure to reduce the TTFB for your WordPress site. You can do this in some easy steps, and these are –

  • Implementing a caching plugin,
  • Use the latest PHP version,
  • Using a CDN, and
  • Optimizing your WordPress database.
  • Remove unnecessary plugins or themes

We will discuss all these in this guide later.

5. Optimize Your Images

Images are essential for a great content strategy, but if your images are not optimized accurately, they can make your site load slowly. Thus, for all device types, you should choose the appropriate image format, compression level, and dimensions. The easiest way to do this is using an image optimization plugin like Imagify or a tool, for example, tiny PNG.

6. Lazy Loading On Images and Videos

When you apply lazy loading on your images or videos, it will delay the rendering until the visitor reaches the images and videos. In short, you prefer the image or code located in the user’s viewport.

However, to apply lazy-load on your website’s images and videos you can apply the following script.

<img src="image.jpg" alt="..." loading="lazy">

<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Or, if you are not comfortable in coding, you can use the plugin with a dedicated lazy load tab.

7. Use a CDN

CDN refers to a content delivery network, which is a geographically distributed group of servers. Usually, these servers work together to offer a quick web content delivery. You will find several ways to get a CDN, even some hosting companies include an option to deploy a CDN with their services. Some well-performed CDN platforms are-

Cloudflare CDN

8. Enable GZIP Compression

Enabling GZIP compression on your site allows compressing the HTML, CSS, and JavaScript content to make the file sent from the server to the client lighter or smaller. And this thing can boost the page loading time (up to 70% sometimes).

Though some hosting providers automatically enable GZIP compression, so you can check if your hosting provider has it or not. Apart from this, you can use plugins like W3 Total Cache, WP Rocket, or WP Super Cache to enable GZIP compression on your site.

9. Use WordPress Plugins Carefully

When installing a plugin on your website, make sure it comes in good quality. The fact is, if you have 10 quality plugins on your site, they won’t make your site slow, but a single bad quality plugin can make your site load really slow.

Also, make sure to remove all the unused or outdated plugins from your WordPress site. As they can be really harmful to your website performance as well as can cause serious security issues.

10. Clean Your Website’s Database

WordPress retrieves data stored in MySQL database using PHP to display that data onto a webpage. This process makes it easy for you to manage the site, but there is a downside to it. It takes longer to load the pages because before it can load the page it needs to locate the data in the database.

Also, the more themes and plugins you add to your site the more new tables and data will be created in your database. Even if you uninstall a plugin or start using another theme, not all of their data will be removed from the database. Plugins and the theme will leave some data there, which helps to slow down the loading speed of your site.

Therefore, ensuring a cleaning database is one of the best ways that can keep a Divi site as fast as possible. In that case, you can use a plugin like  WP-Optimize. Also, you can clean your data manually in MySQL.

Are You Ready to Get A Faster Divi Website?

With the built-in performance upgrade, Divi becomes faster than ever before. But, along with the great features and functions, there is also a lot of code that needs to be loaded into the browser.

After reading this guide so far, you must have realized that by optimizing properly, you can make Divi’s performance even better. The optimization techniques of this guide will definitely help you to boost your website speed.

So, this is all for this guide. I hope you find it useful. Let us know in the comments below if you have tried Divi speed optimization or not. Also, feel free to ask if you have any questions regarding this topic.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top