If you’re encountering challenges when trying to optimize client sites for Google’s Core Web Vitals, you’re not alone! Getting high scores on three key metrics – Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) – is essential when it comes to SEO and UX, but getting them in line is far easier said than done. 

Despite common criticisms that Divi can be slow, its amazing features don’t have to mean poor performance. Recent updates have included the likes of dynamic asset loading and critical CSS, effectively dispelling the myth of Divi’s slowness. So it all comes down to what you know!

In this guide, we’ll dive into Divi’s native performance optimization settings and essential techniques applicable to all WordPress sites. We’ll explore how to use Divi’s built-in capabilities alongside best practices like optimizing your hosting, caching, and images. Come the close, you’ll be able to unlock Divi’s full potential for creating fast, efficient websites and achieve optimal Core Web Vitals’ scores.

Key takeaways

• Correct configuration of critical native Divi settings to maximize performance and reduce conflicts. 
• Wider WordPress optimization strategies including hosting, caching, plugin audits, and font optimization.
• The importance of removing unused features and freeing up available resources.
• JavaScript and CSS optimization.
• Going beyond speed with a complete framework for performance gains.

Core Web Vitals: A quick reminder

As we know, optimized Core Web Vitals can give your site an edge over competitors with similar content but a poorer UX. Before we jump into optimization, here’s a handy table to refer to regarding key metrics – now you’ll never get your LCP mixed up with your INP ever again!

Optimizing Divi’s critical settings: Dynamic CSS, jQuery body, and load methods 

Maximizing your Divi theme’s performance means understanding and correctly configuring the built-in settings available. These are found under Divi > Theme Options > General > Performance:

• Dynamic CSS: Enable this feature for sure! Dynamic CSS reduces your stylesheet size by generating CSS assets only for the modules and features that you’re actively using on each page. With this setting, CSS size can be reduced by as much as 94%, reducing file bloat and improving load times.
• Dynamic module framework: Another setting that should most definitely be enabled! This framework ensures that Divi only loads the necessary modules and processes logic for features used on each page. Naturally, this reduces initial loading times and improves overall site performance.
• Critical CSS: We’d recommend you exercise caution here. Divi’s critical CSS system identifies and loads CSS needed to style above-the-fold content, deferring the rest. 

However, if your caching plugin – such as WP Rocket – already handles critical CSS, disable Divi’s Critical CSS to avoid conflicts, given there are enough of those in the world already! Using both simultaneously can lead to layout issues or broken styling.

• Dynamic icons: Enable this feature to load only the specific Divi icon subsets required for the modules and features on each page. This reduces unnecessary font loading and improves speed.
• Load dynamic stylesheet inline: It’s generally advisable to disable this option. Although it can remove render-blocking requests, it may cause layout problems.
• Dynamic JavaScript libraries: Enable this setting to ensure Divi loads JavaScript on-demand, only when needed by specific modules or features on a page. This reduces the JavaScript footprint and boosts page loading times – any unused scripts are simply stripped away.
• Defer jQuery and jQuery migrate: Be cautious with this setting. While deferring jQuery can improve initial load times by moving jQuery to the footer, it often causes conflicts with plugins that rely on it. Unless you’re specifically testing for compatibility and are 100% sure it won’t break anything, it’s best to leave this one in hibernation.
• Defer additional third-party scripts: It’s generally better to manage the deferral of third-party scripts through your caching plugin instead of enabling this option. You’ll have better overall control and likely avoid potential conflicts.

Essential strategies for improving Divi Core Web Vitals

Although Divi’s built-in performance features offer a solid foundation, they’re often not enough to make a notable impact on your Core Web Vitals’ scores. Like any WordPress website, achieving optimal performance requires implementing a series of proven best practices. The following strategies are nothing less than downright essential!

1. Choosing the right hosting solution

Web hosting is the real bedrock of your WordPress website’s performance. The quality of your hosting directly influences server response time, resource allocation, and overall site speed. 

Opting for VPS hosting provides dedicated resources and superior performance compared to shared hosting environments. When selecting a hosting package, carefully consider key metrics such as CPU cores, RAM allocation, and bandwidth limits. For optimal performance, seek hosting providers offering server-side caching, SSD storage, and support for PHP 8.0 or higher.

“Choosing the right hosting provider is make or break for those wanting fast site speed and reliable performance. The best hosting will offer fast loading times, guarantee uptime, be secure, and scale with the needs of your business. Host performance contributes to overall UX, and even has a bearing on the likes of bounce rates and time-on-page.”

– Jennifer Rodriguez, Lead Developer at Divi Life

2. Implementing effective caching solutions

Caching reduces server load and accelerates page load times by storing static versions of your content. Browser caching stores resources locally on visitors’ devices, while server-side caching saves database queries and PHP processing time. 

Modern caching solutions often integrate with CDNs to deliver content from edge locations worldwide, reducing latency. Popular caching plugins include WP Rocket, W3 Total Cache, and LiteSpeed Cache, each offering a range of optimization features.

3. Conducting regular plugin audits

Unused or poorly optimized plugins can trample on your site’s performance by adding unnecessary database queries, JavaScript, and CSS files. Regular audits help identify and remove redundant tools that are clogging up your site, so add one to your maintenance schedule. Try to stick to essential plugins and choose lightweight alternatives wherever possible.

When it comes to essential plugins, Divi designers often need specific tools that extend the native options available. At Divi Life, we offer designers all the tools they could possibly need to build fantastic websites in the Divi theme. All of our plugins, layouts, and child themes have been built to put the light in lightweight! 

For example, our Divi Modules Pro add-on uses dynamic asset loading, which only loads the module assets you are actively using on each page. You can also gain a host of amazing tools and extensions with our All Access Pass – some of which you can’t get anywhere else! With our pass in your pocket, you can make some serious savings, while making some serious gains.

4. Optimizing image delivery

Proper image optimization is a major contributor to good Core Web Vitals scores, so be sure to take the time to get this sorted! Image delivery impacts LCP, CLS, and INP. 

Employ techniques like using modern formats such as WebP and AVIF to reduce file size without compromising quality. Be sure to compress your images using tools like TinyPNG, JPEG Optimizer, or Squoosh. 

Implement lazy loading for images below the fold, and consider using adaptive images. These are delivered via specialized CDNs like Cloudinary, Akamai Image Manager, Fastly, and Imgix, which automatically adjust image size and format based on the user’s device and network conditions. 

5. Managing font loading

Local font hosting improves First Contentful Paint (FCP) scores by removing external requests. When you rely on external font services like Google Fonts, each font request adds latency and delays rendering. Consider disabling Google Fonts in Divi and then downloading and locally storing only the fonts that you use. 

As a further measure, convert fonts to WOFF2 format for optimal compression and browser compatibility. Implement font preloading for critical typefaces, so they load early in the rendering process. Also, consider subsetting fonts to include only the necessary characters, as this can reduce font file sizes. Finally, properly configure font-display settings (swap, fallback, optional) to prevent layout shifts during page loading.

6. Removing unnecessary bloat 

Remove unnecessary features like Gutenberg if you’re exclusively using the Divi Builder – unused devices simply take up valuable space and resources. Disable emojis, embeds, and other WordPress features that aren’t essential for your site. 

Clean up your database regularly by removing post revisions, transients, and other accumulated data – unnecessary fluff only slows down your digital operations.

7. Optimizing JavaScript and CSS

Reduce render-blocking resources by deferring non-critical JavaScript and CSS. These resources delay page rendering until they’re downloaded and processed. Deferring these resources allows the browser to render the visible content first, improving perceived performance. 

Implement critical CSS for above-the-fold content to improve FCP times. Critical CSS extracts the CSS needed to style the content visible on the initial page load and inlines it directly into the HTML. 

Consider using asset optimization features to combine and minify files, reducing HTTP requests. Combining multiple CSS and JavaScript files into fewer files reduces the number of requests the browser has to make. 

“Don’t forget to evaluate third-party scripts and remove those that aren’t providing significant value to your site’s overall functionality. Every script adds overhead, so stick to those you need the most.”

– Jennifer Rodriguez, Lead Developer at Divi Life

Join Divi Speed Pro to master website optimization!

While implementing individual optimization techniques can offer incremental improvements, truly mastering Divi performance requires understanding a complete optimization framework. That’s where our Divi Speed Pro course comes in uber-handy!

Divi Speed Pro teaches a proven 3-step optimization process that goes beyond chasing basic speed scores, focusing on delivering real, tangible performance improvements for your website. Our students learn how to diagnose performance bottlenecks and implement systematic solutions that work for any Divi site.

But it doesn’t stop there! Our course also shows you how to monetize your expertise through speed optimization services, including how to effectively package and price these services. As Graham MacKim – one of our many design graduates – shared:

“We have found the course with Tim to be very effective in our management of speed optimisation for our DIVI clients… We feel very confident to be able to start charging our customers for our optimisation after taking this course.”

If you’re feeling ready to take your Divi skills to the next level, it’s time to unlock the secrets to lightning-fast Divi websites. Boost your clients’ performance and grow your own business services by enrolling in Divi Speed Pro today!