The Ultimate Beginners Guide to Speed Up Divi

How to speed up Divi is always a hot topic, just as any other WordPress page builders or themes.

Divi Builder is a top-rated page builder plugin and multipurpose theme and is exceptionally flexible.

You can create stunning, custom-looking designs using Divi Builder or the themes on offer. This is crucial to remember when comparing Divi with lighter weight themes. 

Divi includes 125+ layout packages that you can import into your website to make it fit any niche.

It’s easy for people to find support and third-party plugins and their price offering.

It is a lot more appealing than Elementor Pro.

But let’s look at how we can improve the Divi page builder’s performance and page load speed to improve your:

  • Bounce Rate
  • Increase Conversions
  • SEO and Credibility

Speed Up Divi – The Divi Speed Test

Divi isn’t the fastest WordPress theme, but it is more than sufficient and offers a lot of flexibility when you look at the Divi Builder.

The page load times for Divi Builder pages and Divi theme pages are very fast on a good server. If you combine Divi with these techniques, you’ll have a highly efficient site.

Divi Mobile Page Speed – Before & After

Divi Theme Page Speed – Before & After

The Built-In Divi Speed Plugin

Although this is not the right solution, it is an excellent way to start. Before the Built-in Divi Speed plugin upgrade, all the CSS generated by Divi Builder was placed in-line at a page’s footer.

You can access them on the Divi setting page.

They included the following features in this upgrade.

Static CSS File Generation

The Divi Builder CSS created is added to the Theme Customizer and Theme Options and is served as a static CSS file. They are automatically minified. This allows you to reduce the page’s size, and the browser can serve a cached copy of the static CSS file to speed up page loading.

CSS & JavaScript File Minification

Divi will automatically combine all JavaScript and theme CSS files. This reduces the page’s size and improves load times.

How to Avoid Possible Conflict with Divi’s Built-in Performance Optimizations and Third-Party Plugins

This can also be done with third-party plugins like Perfmatters and WP Rocket.

Only one plugin must be used for file minification and you can’t duplicate the same feature across multiple plugins.

You may encounter conflicts when using a third-party plugin for minification.

It is possible that the Divi module doesn’t display correctly or that Javascript files don’t render correctly.

These conflicts can be avoided by disabling Divi’s built-in optimizations. Instead, let the third-party plugin do it.

The three options you will want to disable are:

  1. Static CSS File Generation
  2. Minify and Combine Javascript Files
  3. Minify and Combine CSS Files

You can disable the option for static CSS file generation under Theme Options > Builder > Advanced.

You can disable the options to minify and combine Javascript and CSS files by going to Theme Options > General tab.

Optimizing with WP Rocket

Using WP Rocket right out of the box, we can see a significant change in the Google Page Speed Insights test.

While Impressive, there is still more we can do and get those numbers into the green with a few more plugins and tweaking.

Keeping in mind, this is on SiteGrounds GoGeek hosting plan (Which we don’t recommend), but it sets a reasonably even playing field.

If you want proper performance, it’s recommended to invest in a cloud-hosted solution.

Which you will find it’s cheaper than SiteGround and easy to use.

Divi Mobile Speed Test – Before & After WP Rocket Install

Before WP Rocket Install
After WP Rocket Install

Divi Desktop Speed Test – Before & After WP Rocket Install

Before WP Rocket Install
After WP Rocket Install

WP Rocket Settings

If you are starting out and don’t want to step into advanced WordPress optimization, WP Rocket is the plugin for you.

WP Rocket will apply 80% web performance best practices automatically.

All you have to do is check a few boxes, and it’s done. Below is the most common setting to apply if you want to get into some more advanced tweaking. You can take a look at our guide on optimizing WP Rocket for the best result for any hosting.

NOTE: Remember to disable any other caching plugin such as SiteGround Optimizer or Divi’s built-in optimizations & minification plugins to avoid conflict.

We recommend using WP Rocket it will save you time. WP Rocket will apply 80% web performance best practices automatically.

There are no settings to adjust! Instant improvements in speed and PageSpeed Insights scores will be apparent.

Learn More

Image Optimization and Compression

The right image type and optimisation makes a difference to page load on your WordPress site.

Page Speed Test Before ShortPixel
Page Speed Test After ShortPixel

Typical image file types are.

JPEG: Images are smaller file sizes and a go-to file type for most images/photographs you use on your website without losing image quality. 

SVG: A vector format that delivers exceptionally sharp detail using HTML often used for logos, icons, and other vector animations. 

PNG: One to Avoid unless you require a transparent background.

Compress and optimize your JPEG, PNG and (animated) GIF files

ShortPixel Image Optimizer WordPress plugin allows you to manage image optimization easily. Images are automatically processed and compress images and speed up your website’s loading time.

Shortpixel does more than compress and optimizes your image, and you can add additional services to the plugin for better speed optimization.

Smart Cropping: It automatically detects the focal point and crops it in any image. The smart cropping tool will save you hours of editing. 

Responsive Design: Render a perfect image on all screen sizes and devices on all your web pages.

Image CDN: If you want an all in one solution, they also provide an Image CDN service delivering images at the nearest CDN points to your visitors.

WebP: Get even smaller images by converting JPEG and PNG images into WebP format and provide them to the correct browsers.

Want to learn more about Image Optimization and Compression? Please read our complete guide and for more advanced tips.

Learn More

Use Gutenberg With Divi Blocks

This feature is perhaps the most overlooked and can have a significant impact on page loading speed.

The Divi Layout block combines the power of Divi and Gutenberg. It allows you to import Divi layouts and create new Divi layouts directly from Gutenberg.

You can easily toggle between Gutenberg or the Divi Builder while creating pages. The Divi Layout Block works in the same way as the Divi Builder but is smaller.

You can load a pre-made layout or a library item saved to the page by adding a Divi Layout block. After a Divi layout has been added to the page, you can modify it with the Divi Builder interface.

It can be used to create complex layouts. You can add as many Divi Layout Blocks to your page as you like. You can match Divi Modules with Gutenberg Blocks for almost any design.

It takes just a few clicks to access the Divi Builder backend.

Navigate to Divi > Theme options from your WordPress Dashboard.

  1. Click the Builder tab once you are there.
  2. Click the Advanced tab under the Builder options.

You will see the options to enable Divi Builder and the Classic (WordPress Editor) Editor. To enjoy the Divi Builder backend, you will need to enable these options.

Next, click Save Changes.

Before you start:

  1. Make sure Gutenberg is enabled on your WordPress installation.
  2. Disable the Classic Editor plugin if you have it enabled.
  3. Go to Divi > Theme Options > Builder > Advanced to disable the Enable Classic Editor option.

Next open:

A new page with Gutenberg enabled.

  1. Then, click the “Add Block” button
  2. Search & Select the Divi Layout block.

A clean database is one way to ensure your Divi site runs as fast as possible

Tables in your database organize your WordPress site files.

Every time you add new data to your website (like themes or plugins), new tables are created and added.

As you might expect, the more complicated your database will be, the slower the website results.

Speed up your Divi website with a Content delivery network

Your WordPress hosting company will generally serve your website from one location. Visitors to your website access the same server.

A content delivery network (CDN) is an excellent option for speed today:

  • CND reduces the load on your web server.
  • They speed up delivering your content to your visitors, making their experience more enjoyable by caching your server’s static resources like stylesheets, javascript and images.

CDNs are not WordPress hosting services.

You will still require a WordPress hosting provider to host your website. Instead, the Static content is served by a network server located in various geographical locations worldwide.

Every user request is processed by the server nearest to their location, speeding up page loading and makes your website much more user-friendly.

Compress File Size with Gzip

What is Gzip Compression and how does it work? 

Enabling Gzip on your webserver optimizes HTML, CSS, and JavaScript delivery by compiling and compressing files before sending them to browsers.

Decreasing your data download size by between 1/3 to 1/2 and up to 90% making your website load faster by serving smaller files.

Remove Unused Divi CSS + JavaScript

Divi adds additional CSS and JavaScript to your website, the same as any other Plugins, fonts and other assets.

These assets can load across your entire website even if they aren’t being used. Unloading unused assets improve the load time of JavaScript and CSS (an item in PageSpeed Insights).

I prefer using Perfmatters because it’s easier to use and allows you to disable assets “everywhere except posts” (good for social sharing plugins).

Perfmatters costs $25/year.

Select a plugin and then go to the script manager. You will see scripts/styles displayed on the page and options to disable them at specific locations for assets that aren’t required to load sitewide.

Disabling assets that are being used can break your Divi site – test carefully!

Try disabling other scripts/plugins as well:

  • Disable contact forms everywhere but contact page
  • Disable social sharing plugins everywhere but posts
  • Disable table plugins everywhere but content with tables
  • Disable rich snippet plugins everywhere but content with rich snippets
  • Disable WooCommerce scripts & styles except on non-eCommerce pages
  • Disable fonts everywhere except certain areas (if you use multiple fonts)

Divi System Support

Reduce TTFB With Faster Cloud Hosting