The notion that using Divi results in slow websites is a common misconception. It’s certainly possible to create slow sites with Divi, but the same can be said of any platform. In fact, Divi comes with powerful built-in performance features, and as a web designer, your job is to learn how to use them most effectively!

Read on to explore how to accurately measure your site’s performance, make the most of Divi’s native speed settings, and employ third-party tools for consistently fast websites. By the end of this article, you’ll know precisely how to make the most of Divi’s full-speed potential by harmonizing both Divi-specific and WordPress-level optimizations for the ultimate performance improvements.

Key points

• Learn how to use Divi’s built-in tools like dynamic asset loading and critical CSS generation to boost speed.
• Ensure your site performs well on mobile devices, given most online sessions start there.
• Select lightweight plugins that work with Divi’s architecture to improve functionality without slowing down your site.
• Upgrade to premium hosting with server-side caching for better performance.
• Convert images to WebP format for better compression and faster load times.

How to effectively test your Divi website speed

Testing your Divi website’s speed will help you identify performance bottlenecks and optimize User Experience (UX), but getting an accurate reading is everything. Here’s how:

1. Use PageSpeed Insights: Google’s PageSpeed Insights tool provides insights into real-world user experience metrics. Use it to analyze Core Web Vitals for pages built with complex Divi modules like sliders, galleries, and forms.

2. Test critical pages: Check the performance of critical template pages such as blog archives, product pages, and heavily customized layouts. These pages often reflect the most common user interactions, so it’s important that they perform in line with user expectations.

3. Measure performance before and after enabling specific features: Enable Divi’s built-in performance features and measure the impact on page load times. This will help you understand how effective these features are.

4. Mobile vs desktop comparison: Compare performance scores between mobile and desktop devices, focusing on Divi’s responsive layouts. With so many online sessions coming from mobile, this platform needs to perform just as well as your desktop version.

5. Module impact analysis: Document how different Divi modules (e.g. dynamic content, conditional logic, custom code) affect page speed. This helps in optimizing resource-intensive elements.

6. Cached vs uncached pages: Test both cached and uncached pages to understand Divi’s dynamic asset loading and caching behavior.

Divi-specific speed optimizations

Divi offers powerful performance features, but maximizing speed requires correct configuration and understanding. Key tools include dynamic asset loading, critical CSS generation, and JavaScript optimization – these work in tandem with WordPress-level improvements to improve page load times.

Using Divi’s native performance settings

To optimize Divi’s native performance, navigate to Divi > Theme Options > General > Performance in your WordPress dashboard. Here, you can configure several settings:

• Dynamic CSS generation: This reduces CSS file size by generating only necessary assets. Set a proper cache-clearing schedule to maintain performance.
• Critical CSS: Enable this to load essential styles above the fold, deferring non-critical styles for faster initial loads. Use fallback stylesheets for more complex layouts.
• JavaScript optimization: Defer JavaScript loading except for interaction-critical scripts to prevent render-blocking requests.
• Dynamic module loading: Preload crucial above-the-fold content to boost perceived load times.
• Google fonts: Load fonts locally in WOFF2 format with proper subsetting to reduce external requests.

Here’s a full set of available native Divi Performance settings:

For more detailed information on these settings, refer to our Divi Core Web Vitals implementation guide.

Best practices for building speed-friendly pages

Optimizing Divi pages for speed involves several advanced techniques:

• Conditional loading: Structure dynamic content areas using Divi’s conditional loading to ensure that only necessary elements are loaded. Access this option by clicking the ‘Add Condition’ button in any section, row, or module settings. You can create date/time conditions for promotional content that appears only during specific periods.
• Selective module loading: Implement selective module loading through advanced row settings to reduce unnecessary assets appearing. You can enable this feature via Divi > Theme Options > Performance tab. This cuts processing time by eliminating unused module code, reducing a page’s overall weight.
• Global elements: Use global elements to minimize your CSS and JavaScript footprint. For more on using global elements effectively, check out our article on How to Use the Divi Builder in WordPress. You’ll discover everything you need to know about working in Divi’s frontend view, like this…

…and about working in Divi’s backend view, like this…

• Module-specific settings: Configure performance settings for heavy elements like sliders and galleries to optimize their impact on page speed. To set fixed heights for gallery sliders use the following code snippet via Theme Options > General > Custom CSS:

Switch to Divi 5 when it’s out

As Nick Roach, the founder of Elegant Themes, emphasizes:

“Divi 5 is designed to be the fastest and most performant version of Divi yet. Divi users who want to prioritize speed should make the switch as soon as it’s released.” 

This upcoming release promises significant speed improvements due to several key changes:

• Faster front-end rendering: Divi 5’s front-end server rendering is twice as fast as Divi 4, making for a much-improved UX.
• Efficient layout handling: It handles complex layouts and multiple modules without performance degradation, ensuring smoother interactions all around.
• Optimized asset loading: Server-side processing and asset loading are optimized for faster load times, making it ideal for speed-conscious users.
• Architectural rebuild: The complete architectural rebuild focuses on speed and efficiency, setting a new standard for page builders.

For more details on Divi 5’s performance enhancements, check out our dedicated Divi 5 article.

Use performance-friendly Divi extensions

While overloading your site with plugins can impact site speed, some are necessary to improve functionality beyond Divi’s native capabilities. Custom code can achieve similar results, but plugins offer ease and versatility, especially for designers and agencies building multiple sites to tight timescales.

The trick is to use plugins that are lightweight and compatible with Divi’s architecture. This ensures they work in harmony with Divi’s built-in performance features. Our own suite of plugins at Divi Life has been designed with performance in mind, providing valuable functionalities without slowing down your site. 

Notable examples include Divi Modules Pro, which features dynamic asset loading, loading module assets only on pages where they’re used. With our plugin, you’ll gain a host of advanced modules like a before-and-after slider, carousel, and masonry gallery, allowing you to create much greater designs than you can with native Divi – and it will only speed your site up!

Consider also checking out the All Access Pass for unlimited access to these plugins and more, ideal for professionals managing multiple sites. Our All Access Pass includes over 21 plugins, 39 child themes, and 1,000 layouts, along with eCommerce solutions for Divi and WooCommerce. You’ll also gain access to future products, updates, and support, offering major savings compared to purchasing individual products!

WordPress-specific best practices for speeding up your Divi site

While native Divi comes with some tasty performance features of its own, optimizing your WordPress foundation is equally important for achieving a faster overall site. Here are five major areas to focus on:

Upgrade hosting 

Premium WordPress hosting is a must for optimizing Divi performance. When selecting a host, ensure they support PHP 8.0 or higher, as this version offers major performance improvements over older versions. 

When shopping around, look for hosts with built-in server-side caching capabilities to reduce the load on your server. Proper memory limits and PHP worker configurations will also help your site handle traffic more efficiently. Implementing Redis or Memcached for object caching can further improve performance by reducing database queries.

As a final consideration, using LiteSpeed or NGINX servers is recommended, as they are optimized for Divi performance. Combine these recs and you’ll have the foundation of an extremely fast and efficient site!

Use a CDN for caching and DNS optimization

Content Delivery Networks (CDNs) can help distribute traffic in a more manageable way, reducing server load and improving overall site reliability. Using a CDN reduces latency, and so increases speed. For sites looking to attract visitors from across the globe – without being affected by random traffic spikes – CDNs can make a valuable contribution to overall performance.

To get the most from a CDN, configure asset delivery through reputable enterprise networks like Cloudflare. You can also enable DNS pre-fetching for critical resources to reduce initial load times, ensuring faster access to essential assets. 

Consider implementing page rule configurations for static content to optimize caching, so that frequently accessed assets are readily available. Proper cache headers and control settings also help to ensure optimized asset delivery. 

Optimize media

Media optimization improves Core Web Vitals scores and makes for a better UX. 

In native Divi, you can implement responsive image delivery using srcset attributes to ensure images are optimized for different screen sizes and devices. Set this via Divi > Theme Options > General > Enable Responsive Images. Other media optimization will require a little extra handiwork.

Convert images to WebP format with fallbacks for older browsers, as WebP offers better compression than traditional formats like JPEG and PNG. You should also configure lazy loading boundaries for below-fold media to delay loading until these elements come into view, reducing initial page load times. 

Finally, set up automated image optimization workflows to improve the process and ensure consistent optimization across your site. Tools like WPvivid Image Optimization can automate these tasks, making it easier to maintain optimal media performance.

Remove unused plugins

It’s easy to forget about those plugins you once loved but no longer need. But chances are, their very presence could be making your site a far heavier affair than it needs to be. 

Begin by removing any plugins you no longer use – there’s simply no need to save them for a rainy day! Once you’ve had a good clean-out, move on to auditing plugin resource loading patterns to identify which of your remaining plugins are consuming the most resources. If any are particularly heavy, look for more lightweight alternatives.

As an alternative, you can configure asset loading conditions to ensure that plugins only load necessary assets on specific pages or conditions. Depending on the tool, you may be able to implement plugin-specific performance tweaks, such as disabling unnecessary scripts or optimizing database queries. 

Regularly reviewing and optimizing your plugin suite helps prevent bloat and ensures that your site remains fast and responsive at all times.

Optimize databases

Database optimization will also help you improve query performance and overall site speed. Implement scheduled cleanup routines to remove unnecessary data, such as old post revisions, spam comments, and unused tables. Monitor and optimize query performance regularly to identify bottlenecks and implement targeted improvements. Schedule this like you would a spring clean, only with a little more regularity! 

Configure table indexing strategies to speed up query execution, so your database can efficiently retrieve data. You can also set up automated optimization schedules using tools like WP Optimize or Advanced Database Cleaner to maintain a clean and efficient database at all times.

Take your Divi speed from slow to pro with Divi Speed Pro 

Now you’re equipped with essential Divi speed testing and optimization techniques, such knowledge will make a huge difference to your future site builds!

Remember though that mastering website performance requires a deeper understanding of both technical foundations and strategic implementation. And that’s where our Divi Speed Pro course is worth its weight in gold! 

We designed this course as THE comprehensive solution for optimizing site speed and performance, from initial testing to implementing fixes. Our course covers a three-step framework addressing hosting, asset optimization, and fine-tuning. Students learn to diagnose issues and apply targeted solutions, unlocking a business opportunity to package and sell optimization services. 

With ongoing support through weekly coaching calls and a vibrant student community, you can transform slow sites into high-performing ones, and improve your own design service offering. Learn more about our Divi Speed Pro course and get ready to take your Divi sites into a different gear today!