Divi Speed Optimization Guide: 13 Expert Ways

Divi is not just any page builder. It’s a complete web design system that allows you to visually design every part of your website.

With Divi, you get features that make your website faster and work better, like Dynamic Module Framework, Dynamic CSS, and Dynamic JavaScript Libraries. Even though Divi is powerful and doesn’t weigh your website down, there are still some things you can do to make it work even faster.

This article will give you a complete Divi speed optimization guide. It will discuss the additional optimizations and settings you can implement to speed up your Divi website.

Let’s dig in!

Choose High-Performing Web Hosting

A slow-loading website can drive visitors away, no matter how good your content is. That’s why picking a good hosting service is important. This will help you to optimize the speed of your slow Divi site, so you don’t have to worry about it. 

If you want great hosting for your WordPress site with Divi, Divi hosting is the way to go. It’s a Managed WordPress Hosting, making it easy to up your Divi website speed.

Divi hosting benefits you with regular updates and support. It comes with an automatic installation, so you don’t need to hassle with the adjustments. Further, it integrates with fast and modern hosting infrastructure by using tools like caching and CDNs. 

In conclusion, Divi hosting is an all-around tool that knows WordPress inside and out. That’s why it can provide a hassle-free hosting solution.

However, if you still need clarification on which hosting to choose, read through our best Divi hosting to know which Divi hosting suits you best.

Configure Your Server For Optimal Performance

After choosing a hosting, it’s crucial to ensure your server is optimized and meets the correct requirements for running a Divi site.

Thankfully, Elegant Themes (the creators of Divi) have suggested server settings to keep your site running smoothly. Apply the settings or check reports to see if adjustments are needed.

To do this, go to your WordPress dashboard, then click on Divi > Support Center. Here, you’ll find the system status, which shows if your PHP settings match the recommendations.

The recommended server settings from Elegant Themes are:

• File Permissions 755
• PHP Version 7.2
• Post_max_size 64M
• Max_execution_time 180
• Upload_max_filesize 64M
• Max_input_vars 3000

Note: The report only highlights settings that need fixing, marked with a red dot. Click ‘See Full Report’ to view all settings. Green dots indicate settings that match recommendations. Click ‘Learn More’ for details on each setting and how to adjust them.

Optimize Time to First Byte (TTFB)

The time to first byte (TTFB) indicates the responsiveness of a web server or other network resource. But sometimes, TTFB can be slow for a few reasons. Like when the dynamic content of a webpage doesn’t work well with the browser’s cache, slowing things down. Or when hosting providers can’t handle a lot of traffic. Also, if the web server settings aren’t set up right through the hosting service, it can slow things down too.

So, how can we fix these issues?

The best way to make TTFB faster is to use a cache plugin. This makes the server take less time to process requests, resulting in faster page loading. Additionally, optimizing the WordPress database, updating PHP, and implementing a CDN improves TTFB and overall website performance.

Note: Typically, a favorable TTFB falls between 200 milliseconds (ms) and 500 ms (.2 and .5 seconds). Of course, the lower the number, the better. Anything above 600 ms is considered a poor score.

Leverage Divi’s Built-in Speed Optimization Settings

Back in August 2021, Divi underwent an extensive performance and speed optimization update. As a result, it now works faster right out of the box. They have added built-in performance settings and a dynamic framework, reducing Divi’s “bloat” by only utilizing the necessary components.

Simply, navigate to Divi > Theme Options > General > Performance in your WordPress admin dashboard to access the Divi performance settings.

Here are the built-in Divi speed optimization options –

• Dynamic Module Framework: Executes only necessary background code for the modules and features used on a page
• Dynamic CSS: Reduces the CSS file size by generating assets only for the features and modules that are actually used, making the page load faster.
• Dynamic Icons: Loads only the Divi icon font needed for the modules and features on each page, reducing unnecessary loading of other fonts.
• Load Dynamic Stylesheet In-line: The style.css file contents are printed in-line, improving PageSpeed scores by eliminating a render-blocking request.
• Critical CSS: Delays loading non-essential styles and CSS requests, making the website load faster and improving scores on Google PageSpeed.
• Critical Threshold Height: Calculates the “above-the-fold threshold” for deferred styles, adjusting it to balance load times and layout consistency over time.
• Dynamic JavaScript Libraries: Loads external JavaScript libraries only when specific Divi modules need them, which speeds up loading by not loading unnecessary JavaScript.
• Disable WordPress Emojis: Get rid of WordPress emojis to improve performance since modern browsers can handle emojis without extra help.
• Defer Gutenberg Block CSS: Defers the Gutenberg block CSS file from the header to the footer on Divi Builder pages to improve performance by delaying its loading.
• Improve Google Fonts Loading: Stores and loads Google Fonts directly in the page code to make them load faster and reduce the time it takes for the page to render.
• Limit Google Fonts Support: Reduces the size and loading time of Google Fonts, though very old browsers might not fully support them.
• Defer jQuery And jQuery Migrate: Moves jQuery and jQuery Migrate to load later in the page, speeding up load times, unless a third-party plugin requires jQuery to load earlier.

Some options in the list are turned ON by default. You have to toggle them ON/OFF according to your needs.

Optimize Images for Faster Loading

The large, unoptimized images are a common cause of slow page loading. Even a small number of these images can have a significant effect. 

That’s why image optimization is crucial. If you optimize the image before and after uploading it to Divi, it will result in a faster website. 

To optimize images, you can follow these methods – 

#1. Image File Formats:

The file format of an image affects how quickly it loads. 

For most images and photos on your website, use JPG. It does not compromise quality for size in comparison to PNGs or GIFs. However, PNG is also the best choice for images with transparent backgrounds as JPG does not support it. 

You can try the WEBP format, which has a smaller image size than JPEG. Additionally, SVG is a vector format, suitable for logos, icons, and vector animations, and it delivers sharp detail.

#2. Resizing Images:

Resizing images smaller in length and width reduces the resources needed to load them. Bigger images with more pixels take longer to load.

For example, if you only need a logo with a width of 100px, don’t upload one that’s 5000px wide and rely on Divi to resize it. This will unnecessarily increase page load time. 

#3. Compressing Images:

When you compress images, you make them smaller in file size without changing how they look. This helps websites load faster because smaller files are quicker to load.

You can do this using third-party websites like TinyPNG.com or Compressor.io. They use clever techniques to shrink file sizes while maintaining much quality.

#4. Image Manipulation: 

It’s good to use JPEGs, GIFs, and PNGs on websites, but they often contain extra information that’s not necessary.

You can remove this extra info using image manipulation to make them even smaller. Software like GIMP or Adobe Photoshop can help with this.

#5. Use Responsive Images: 

Create multiple versions of images and use them for different devices. Use larger images for PCs or laptops and smaller ones for mobile devices.

Tips: For overall image optimization, Cloudflare Mirage/Polish is recommended. You can also read our full Divi Image Optimization Guide to learn more!

Apply Lazy-loading Images and Videos

Lazy loading is a common technique that only loads the scripts of an element (in our case, images and videos) when necessary instead of loading them upon page load. It doesn’t shrink files or load faster for users. Instead, it delays loading each file until you scroll to the part of the page where that image/video is.

This method makes pages load quicker because it only brings in stuff when you actually need it, saving time a lot.

However, Divi does not support lazy load background images or video options, since they are loaded by CSS. This can cause errors and make the initial page load slower. 

One way to fix this is by using plugins like FlyingPress or Perfmatters, which provide special classes that you can add to your background images or videos to enable lazy loading. These plugins make it easier to implement lazy loading even if your browser doesn’t support the attribute used by WordPress.

Enable GZIP Compression

We often compress or zip files (or folders) to make the contents of the file (or folder) smaller on our computer. Gzip compression does the same thing for websites. It makes files smaller so that they can be uploaded and downloaded faster.

However, you can turn on GZIP manually by adding a special code to your .htaccess file. Or the server software like Apache or Nginx can do it for you. Alternatively, you can use a plugin that helps with caching and supports GZIP compression. Some hosting services might even do it automatically.

Gzip compression is the most widely used compression algorithm and Divi claims that, in some cases, it can boost your Divi site speed by up to 70%.

Tips: If you use a plugin for GZIP compression, ensure that you have configured that correctly. If not, it has a chance to negatively impact the performance of your website.

Use Website Caching

When visitors access your website, the WordPress loop retrieves content from the database to display on the page. However, this loop can be a time-consuming process. 

This is where website caching comes into play. The caching process speeds up delivery of content by creating static versions of your pages.

There are four caching types out there –

• Page Caching: Stores cached static HTML versions of your pages for faster delivery.
• Browser Caching: Determines what content the browser caches and for how long.
• CDN Caching: Serves cached website pages/files from a CDN closest to your users.
• Object Caching: Saves repeated query results to retrieve data faster from the database.

Divi does perform caching when serving up Divi’s JS and CSS files behind the scenes. This is mostly for the Divi theme to function smoothly with its builder.

So, it’s wise to use caching for your entire website. Cloudflare’s CDN is a great way to add caching on your Divi site. Plus, using caching plugins such as WP Rocket, W3 Total Cache, and W3 Super Cache for WordPress can further enhance your site’s performance.

Minify CSS & JavaScript

Minification makes website files smaller by getting rid of extra stuff like whitespace, strips comments, combines files, line-breaks, and more from the code. This reduces the load time of a page content in a browser.

However, Divi automatically minifies and combines JavaScript and CSS. So, you don’t need to use another tool to do this. But yes, Divi doesn’t minify HTML output. You have to use a third-party plugin to minify (and cache) the entire HTML of a page.

For a solution, Cloudflare is a way to minify your entire site’s HTML, JS, and CSS. It uses Auto Minify to reduce the file size of all source code on your website. Plus, it comes standard with the free version.

Also you can try bunches of third-party plugins including Autoptimize, WP Rocket, W3 Total Cache, and more to optimize them.. 

Optimize Your Divi Site’s Database

As the Divi website grows older, it collects a lot of data in its database. 

When we uninstall themes and plugins, there remains some leftover data that just takes up space. Also, the database holds onto a lot of old stuff you don’t need anymore, like every old version of your posts, comments, spam, and more.

All this unnecessary data takes up space and can make your website slow because it takes longer for your server to find what it needs.

So, to make your Divi site’s database work better, we suggest some top WordPress optimization plugins to use like WP Optimize, WP-DB Manager, and Advanced Database Cleaner.

Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of interconnected servers that caches content near end users. That means if a person sends a request for content (by visiting your website), the server (or PoP) closest to the person will deliver the content. 

For example, if your website files originate from Bangladesh and someone in Canada opens your site, a CDN can send the data from the Canada server in half the time. The farther you are from the server, the slower the website will load on your browser. This is helpful, especially if people from different countries are visiting your site.

However, you can consider many CDN platforms out of the market. Among them, Cloudflare, Google Cloud CDN, and KeyCDN are recommended.

Note: When choosing a CDN, prioritize unlimited data usage and ensure that all your files are served over HTTPS (with the SSL traffic included). 

Use Necessary Plugins

WordPress plugins are great, but you shouldn’t overuse them, as they could negatively impact your website. Installing a plugin takes space for the number of requests and page sizes, potentially impacting performance. 

That’s why, before installing a new plugin, think twice. Is this plugin really necessary, or can you achieve the same functionality through custom coding?

For an instant solution, you can use a script manager plugin like Perfmatters or Asset CleanUp to turn off the installed plugins on a page or post basis. 

Here are some of the plugin usage tips –

• Use Quality Plugins: Select plugins with a good reputation, positive reviews, and a history of reliability. Test them before and after you add them to your site to ensure they don’t slow it down.
• Remove Unused or Outdated Plugins: Get rid of any plugins you don’t use anymore or that are outdated. Using these tools may cause your site to be slower and less secure. Try to have as few tools as possible to make your site faster.
• Look out for Render-Blocking Errors: Check for render-blocking issues caused by plugins. If this happens, probably it’s due to a plugin, not Divi itself. Consider finding alternative plugins that don’t have render-blocking scripts if you run into them on your site.

Mobile Optimization for Divi

Nowadays, Divi website optimization for mobile is no longer an option – it’s a necessity. Mobile users expect fast loading times, smooth navigation, and intuitive user experiences.

Here are the methods for how you can optimize Divi site for mobile –

• Responsive Designs: Divi’s responsive design capabilities allow your website to adapt seamlessly to different screen sizes and orientations. But be careful with your site design, as some choices can make it slower on mobile.
• Mobile-Friendly Page Speed: Check how your site performs on mobile using the tool like ‘Google’s Mobile-Friendly Test’. Make your site faster on mobile by optimizing images and using Divi lazy loading.
• Easy Touch Interaction: Mobile users navigate websites using touch gestures. Ensure that interactive elements on your Divi site, such as buttons and menus, are easily tappable and responsive to touch.
• Minimize Pop-ups and Intrusive Elements: If you use pop-ups, ensure they’re easy to close and don’t cover important stuff. Consider using smaller ones that maintain a positive user experience.

Wrapping Up

Divi Speed optimization is an ongoing process, and it’s crucial to monitor and fine-tune your site’s performance regularly.

There are many things that can help speed up your Divi website, but start with great hosting, optimize images, add caching and a CDN and you will be well on the way to a fast website.

So, how fast is your website? 

Let’s share your Google PageSpeed Insights and GTMetrix test results in the comments!