Divi Speed Optimization: Boost Your Website Performance

Divi, a popular website builder known for its flexibility and ease of use, has gained a significant user base. In today’s era, where website speed plays a crucial role in optimization and ranking factors, it is imperative to improve the speed of your Divi WordPress website without compromising conversions.

Fortunately, Divi includes built-in speed and performance optimization settings to improve your site’s speed. With features like Dynamic Module Framework, Dynamic CSS, Dynamic JavaScript Libraries, and more, Divi combines a powerful page builder with a lightweight theme.

However, there are additional factors to consider in order to fully optimize the speed of your Divi site. In this article, we will explore these settings and delve into additional optimizations you can implement to speed up your Divi website.

Let’s dig in!

Divi’s Built-in Performance and Speed Optimization Settings

Back in August 2021, Divi underwent a significant speed and performance optimization update, resulting in improved out-of-the-box speed. It introduced built-in performance settings and a dynamic framework, reducing the “bloat” of Divi by only utilizing necessary components.

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

The available options include:

• Dynamic Module Framework: Loads only the necessary modules and processes the logic for the features used on the page.
• Dynamic CSS: Reduces CSS file size by generating assets dynamically for the utilized features and modules, improving load times.
• Dynamic Icons: Loads subsets of the Divi icon font based on the modules and features used on each page, reducing unnecessary font loading.
• Load Dynamic Stylesheet In-line: Prints the style.css file contents in-line, improving PageSpeed scores by eliminating a render-blocking request.
• Critical CSS: Defers non-critical styles and eliminates render-blocking CSS requests, enhancing website load times and Google PageSpeed scores.
• Critical Threshold Height: Determines the “above-the-fold threshold” for deferring styles, adjusting the threshold height to balance load times and Cumulative Layout Shifts.
• Dynamic JavaScript Libraries: Loads external JavaScript libraries only when required by specific Divi modules, improving load times by removing unused JavaScript.
• Disable WordPress Emojis: Removes WordPress emojis to eliminate unneeded assets and enhance performance, as modern browsers support native emojis.
• Defer Gutenberg Block CSS: Moves the Gutenberg block CSS file from the header to the footer for Divi Builder-built pages, improving performance by delaying its loading.
• Improve Google Fonts Loading: Caches and loads Google Fonts inline to reduce render-blocking requests and improve page load times.
• Limit Google Fonts Support For Legacy Browsers: Reduces Google Fonts’ size and load times but may limit support for very old browsers.
• Defer jQuery And jQuery Migrate: Moves jQuery and jQuery Migrate to the body to speed up load times, except when a third-party plugin requires jQuery in the head.

11 Ways to Speed Up Your Divi Website in 2024

1. Upgrade to High-Performing Web Hosting

When it comes to speeding up your Divi website, upgrading to high-performing web hosting is a critical step. Think of your web hosting provider as the home where your website lives online. 

Just like a physical business would want something other than a rundown building with leaks, poor plumbing, or unreliable electricity, your website’s performance is greatly affected by the quality of your hosting.

A slow-loading website can drive visitors away, regardless of how great your content is. That’s why having a fast and reliable hosting provider is essential for optimal website speed and performance.

Best Hosting for Your Divi Site

While choosing the best hosting for your Divi site, prioritize providers with performance optimizations and necessary features such as server infrastructure, speed optimizations, customer support, and scalability. 

Take the time to compare plans, read reviews, and evaluate the specific needs of your website to make an informed decision. Remember, selecting the right hosting provider is an essential investment in the speed and performance of your Divi website.

Here are some of the options for you,

• SiteGround: SiteGround, known for excellent performance and support, offers managed WordPress hosting with SSD storage, advanced caching, and a built-in CDN.
• Bluehost: Bluehost, recommended by WordPress.org, provides user-friendly hosting plans, including shared and managed WordPress, with integrated Divi compatibility and a free CDN. 
• WP Engine: WP Engine specializes in managed WordPress hosting, offering automatic caching, CDN integration, and scalability. 
• Cloudways: Cloudways offers cloud-based hosting with multiple providers, server-level caching, and a user-friendly interface. 
• Kinsta: Kinsta delivers exceptional speed and reliability using the Google Cloud Platform, server-level caching, automatic scaling, and a built-in CDN.
• Flywheel: Flywheel focuses on user experience with a friendly dashboard, staging sites, server-level caching, a global CDN, and PHP 7 support.

Looking to learn more about divi hosting? Check out our best divi hosting provider review to power up your website in 2024.

Recommended Divi Hosting Settings

• PHP Version = 7.4 minimum (8.0+ recommended)
• memory_limit = 128M
• post_max_size = 64M
• upload_max_filesize = 64M
• max_execution_time = 120
• max_input_time = 60
• max_input_vars = 1000
• display_errors = 0
• Divi Version = latest
• WordPress Version = 5.3 or higher
• Database = MySQL version 5.7 or higher; MariaDB version 10.2 or higher

2. Optimize Time to First Byte (TTFB)

The Time to First Byte (TTFB) refers to the duration it takes for the user to receive the first byte of website data from the host/server. It represents the waiting period before any data is received by the browser when a user requests a webpage. 

The best way to reduce the time to the first byte (TTFB) is to use a cache plugin as it decreases server processing time, leading to faster page loading. Additionally, optimizing the WordPress database, utilizing the latest PHP version, and implementing a CDN also contribute to improving TTFB and overall website performance.

What Causes a Slow TTFB?

• The volume of dynamic content requiring reception.
• The amount of server traffic during that period.
• The configuration of your web server.

3. Implement Caching

When visitors access your website, the WordPress loop is triggered, retrieving content from the database to fulfill the request and display it on the page. However, this loop can be time-consuming. Implementing caching allows you to create static versions of your pages, significantly speeding up the delivery of content to visitors.

There are four main types of caching to speed up your site:

• Page Caching: Stores cached static HTML versions of your pages for fast delivery.
• Browser Caching: Allows control over what content is cached by the browser and for how long.
• CDN Caching: Serves cached website pages/files from a CDN closest to your users.
• Object Caching: Caches repeated query results to retrieve data from the database and serve it faster to users.

WordPress caching plugins play a crucial role in enhancing website speed by generating and storing static HTML files derived from your WordPress site. These files are served to users when they request a page, eliminating the need for processing PHP files or accessing the database each time.

Best Caching Plugin Solutions for Divi

• WP Rocket: A premium plugin with user-friendly features like page caching, minification, and GZIP compression.
• W3 Total Cache: A comprehensive plugin offering page caching, object caching, and database caching, along with minification and CDN integration.
• WP Super Cache: A free plugin generating static HTML files to improve page load times.
• LiteSpeed Cache: Designed for LiteSpeed web servers, it offers advanced caching, image optimization, and support for HTTP/2 and QUIC protocols.
• Cache Enabler: A lightweight plugin that generates static HTML files, suitable for single-site and multisite installations.

4. Optimize Your Divi Site’s Database

WordPress, being a dynamic CMS, uses PHP to fetch data from a MySQL database and display it on web pages. This results in longer page load times compared to static HTML sites, which don’t require database retrieval.

To maintain optimal speed in Divi sites, it’s important to have a clean database. As you add themes and plugins, new tables and data accumulate, making it harder to locate data and slowing down the website. Even after uninstalling plugins, some leftover data remains, causing clutter and decreased performance.

Tips: It is advisable to clean up your database on a regular schedule.

Best WordPress Database Optimization Plugins

• WP Optimize: User-friendly plugin for cleaning up and optimizing your database.
• WP-DB Manager: Provides features like optimization, repair, backup, and restoration.
• Advanced Database Cleaner: Efficiently cleans and optimizes your database, including scheduled cleanups.
• Optimize Database after Deleting Revisions: Focuses on optimizing the database by removing post revisions.
• WP-Sweep: Cleans up various types of data, providing detailed space-saving information.

5. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a group of servers distributed globally to deliver web content quickly. It improves rendering speed for visitors by serving content from the server closest to them. Especially for international visitors, this is much needed.

For example, if your site files are in San Francisco and someone in London accesses your site, a CDN can deliver the data from a London server in half the time. That’s a big difference! The more distant you are from the server, the slower the website content will be delivered to your browser and vice versa.

Tips: When selecting a CDN, prioritize unlimited bandwidth and ensure all files are served over HTTPS for secure traffic.

Best CDN Platforms to Consider

You can obtain a CDN for your site through hosting companies or network platforms like Cloudflare and StackPath, which provide CDN capabilities along with performance and security features.

Here are some of the best CDN platforms,

• Cloudflare: Offers a wide range of performance and security features with a large network of servers worldwide.
• Fastly: Focuses on delivering content at high speeds with advanced caching options and flexible customization options.
• Akamai: One of the oldest, large, and most reliable CDN providers with global coverage.
• Amazon CloudFront: Scalable CDN integrates seamlessly with other Amazon Web Services.
• StackPath: A user-friendly CDN platform is known for its simplicity and speed. Previously known as MaxCDN.

6. Minify CSS and JavaScript

Minification is a process that reduces the size of site files by removing unnecessary characters like spaces and page breaks, resulting in smaller file sizes. This improves page load time significantly. 

Divi automatically minifies and combines JavaScript and CSS, but it doesn’t minify HTML output. In that case, you can use a third-party plugin to minify and cache the entire HTML of your pages for additional optimization.

Best Speed Optimization Plugins to Minify Site Files

• WP Rocket: A popular caching plugin that offers minification of CSS, JavaScript, and HTML files. It also provides advanced caching features and optimization options.
• Autoptimize: This plugin focuses on optimizing your site’s performance by minifying CSS, JavaScript, and HTML files. It also allows you to defer CSS and JavaScript loading for faster page rendering.
• W3 Total Cache: Along with caching, W3 Total Cache offers minification options for CSS, JavaScript, and HTML files. It supports integration with content delivery networks (CDNs) for enhanced performance.
• WP Super Minify: This lightweight plugin combines and minifies JavaScript and CSS files to improve page load speed. It offers easy configuration options for quick optimization.
• Fast Velocity Minify: Designed specifically for minification, this plugin can optimize your site by minifying CSS, JavaScript, and HTML files. It also supports advanced caching options.

7. Image Optimization

Image optimization is critical for speeding up your Divi website. Large, unoptimized images are a common cause of slow page loading. Even a small number of these images can have a significant effect. 

Since websites typically contain numerous images, it’s important to choose the appropriate image format for each device, compress them effectively, use the right dimensions, and consider using the next-gen WebP format. These measures will greatly contribute to improving page load speed and overall site performance.

Here are some of the tips you can follow, 

• Use the right file type: Use JPG for most images and photographs on your website as it provides good image quality at a smaller file size compared to PNGs or GIFs. Reserve PNG for images that require a transparent background, as JPG does not support transparency. SVG is a vector format suitable for logos, icons, and vector animations, delivering sharp detail using HTML code.
• Resize and crop your images: Avoid uploading images with larger dimensions than necessary. For example, if you only need a logo with a width of 100px, do not upload a logo with a width of 5000px and rely on Divi to resize it. This unnecessarily increases page load time. 
• Compress file size: Reduce the file size of your images while maintaining acceptable quality through image compression. Popular tools like Photoshop offer a “Save for Web” option to optimize images. You can also utilize third-party websites like TinyPNG.com or Compressor.io, which employ lossless and smart lossy compression techniques to minimize file size without significant quality loss.
• Take advantage of image optimization tools and plugins: Utilize image compression plugins like Imagify or Smush Image Compression and Optimization, which can compress existing images on your site and automatically optimize newly uploaded images. Additionally, consider using dedicated image optimization websites such as Compressor.io or Tinypng.com for further optimization options.

Tips: Use the WebP image format for better compression and reduced file sizes, recommended by Google for faster page loading.

8. Lazy-load Images and Videos

Lazy-loading images are the practice of loading images or videos on a website only when they are about to be displayed in the user’s browser window. This method improves page load time by loading content as needed, rather than all at once during the initial page load. 

By default, Divi does not have built-in support for lazy loading background images, as they are loaded from CSS. This can result in “defer offscreen images” errors and increased initial page load size, as plugins typically do not support lazy loading for CSS.

To overcome this limitation, you can use optimization plugins like FlyingPress (with the “lazy-bg” class) or Perfmatters (with the “perfmatters-lazy-css-bg” class). These plugins offer helper classes that can be added to the CSS class of the background image under the Advanced tab in Divi.

9. Enable GZIP Compression

Enabling Gzip compression on your Divi Site can significantly enhance speed, with potential improvements of up to 70%. Gzip compression works by compressing files into smaller versions, allowing them to be served to clients more quickly. It is a crucial step for Divi speed optimization and can greatly boost page load speed.

Some hosting providers and WordPress performance plugins offer automatic Gzip compression options, but you can also manually enable it by adding a code block to your .htaccess file. Gzip compression is a crucial optimization step for Divi speed optimization.

10. Use Plugins that You Actually Need

Do plugins affect website performance? The answer is both yes and no. Installing more plugins can increase the number of requests and page sizes, potentially impacting performance. However, you can selectively disable plugins on specific pages or posts using a script manager plugin.

Before installing a new plugin, ask yourself if it is truly necessary or if you can achieve the same functionality through custom coding.

When adding a new plugin, monitor your website’s performance using tools like GT Metrix’s waterfall chart. Some poorly coded plugins can significantly slow down your site, so it’s important to be vigilant in evaluating their impact.

You can also use a script managers plugin like Perfmatters or Asset CleanUp to disable plugins on a page or post basis. 

Here are some of the tips to follow,

• Use Quality Plugins: Select plugins that have a good reputation, positive reviews, and a history of reliability. Test their impact on website performance before and after installation to ensure they don’t slow down your site.
• Remove Unused or Outdated Plugins: Eliminate any plugins that you no longer use or that are outdated. These plugins can negatively affect your website’s performance and pose security risks. Keep the number of plugins to a minimum to reduce resource usage and improve page load times.
• Look out for Render-Blocking Errors: Check for render-blocking issues caused by plugins. Divi itself doesn’t have render-blocking assets, so any such errors are likely due to plugins. If you encounter significant render-blocking scripts that hamper site speed, consider finding alternative plugins that don’t have this issue.

Bonus Tips

• Disable Gutenberg: Disable Gutenberg to eliminate the loading of an unnecessary CSS file across your site.
• Host Fonts Locally: Use plugins such as FlyingPress, Perfmatters, LiteSpeed Cache, or OMGF to host fonts locally, convert them to woff2 format, and remove unused font families/weights. Preloading the fonts will further optimize your website’s performance.
• Avoid excessive calls: Avoid excessive calls to external services, as they can slow down page load.
• Perform speed tests regularly: Perform speed tests o a regular basis using tools like GTMetrics, Google Page Insights, and Chrome Dev Tools to identify areas for further optimization. The results of these tests will guide your efforts in optimizing your Divi site for faster load times.
• Optimize video: Consider using third-party services or storage platforms like YouTube, Vimeo, or Amazon S3 to host and optimize video content. Reduce video file size using tools like Handbrake for faster loading.

11. Using Other Third-Party Performance Plugins

Divi’s built-in performance optimizations reduce bloat and improve site speed, but you can also use third-party performance plugins to further enhance your site’s speed alongside Divi’s optimizations.

While Divi is already optimized, using third-party performance plugins can potentially create conflicts. For instance, these plugins may minify or relocate JavaScript files in a manner that could lead to errors or issues.

However, it is still recommended to utilize performance plugins like caching and a CDN to enhance the speed of your Divi-built site.

Wrapping Up

Speed optimization is an ongoing process, and it’s crucial to monitor and fine-tune your site’s performance regularly. By implementing the optimizations outlined in this guide and staying updated with the latest best practices, you can ensure that your Divi website remains at the forefront of speed and performance.