Divi page speed performance update, a transformational Divi Performance update, that turns Divi into a super fast lightweight WordPress Theme. Introducing Critical CSS For Divi.

As of august 2021 Divi made a big update to their Theme with version 4.10.3 and added a performance tab to the Divi Theme options settings page. Here you can tune the performance of all the new functions to make Divi lighter and faster with automatic generation of critical CSS.

I installed the latest Divi update and run a speed test on GTmetrix and saw in the waterfall a lot of scripts that were not there before. The performance score was 100% for performance and structure.

I checked the Divi Options page and indeed 2 options are gone: Minify And Combine Javascript Files and Minify And Combine CSS Files.

14 performance options to speed up WordPress and Divi

The performance tab contains 14 new options to speed up your website. By default Divi does not combine CSS and Javascript anymore. When using HTTP/2 it is not recommended anymore to combine scripts.

Dynamic Module Framework

Enable this to allow the Divi Framework to only load the modules that are used on the page, and process the logic for the features in use.

Dynamic CSS

Dynamic CSS greatly reduces CSS file size by dynamically generating only the assets necessary for the features and modules you use. This eliminates all file bloat and greatly improves load times.

Dynamic Icons

The Divi icon font is broken up into various subsets. These subsets are loaded only when needed based on the modules and features used on each page. If you need access to the entire icon font on all pages (for example, if you are using our icon font in your child theme), then you can disable this option and load the entire icon font library on all pages.

Load Dynamic Stylesheet In-line

This option dequeues the Divi style.css file and prints the contents in-line. This removes a render blocking request and improves the PageSpeed scores of individual pages. However, it also prevents the style.css file from being cached. Since the stylesheet is small, it’s recommended to keep this option enabled.

Critical CSS

Critical CSS greatly improves website load times and Google PageSpeed scores by deferring non-critical styles and eliminating render-blocking CSS requests.

Critical Threshold Height

When Critical CSS is enabled, Divi determines an “above the fold threshold” and defers all styles for elements below the fold. However, this threshold is just a estimate and can vary on different devices. Increasing threshold height will defer fewer styles, resulting in slightly slower load times but less of a chance for Cumulative Layout Shifts to occur. If you are experiencing CLS issues you can increase the threshold height.

Dynamic JavaScript Libraries

Only load external JavaScript libraries when they are needed by a specific Divi modules on the page. This removes unused JavaScript from the main scripts bundle and improves load times.

Disable WordPress Emojis

WordPress loads it’s own WordPress emojis. Modern browsers support native emojis, making WordPress’s emojis unnecessary in most cases. Removing WordPress emojis removes unneeded assets and improves performance.

Defer Gutenberg Block CSS

If a page is built with the Divi Builder, the Gutenberg block CSS file is moved from the header to the footer. Since the file is most likely not used, we can load it later. This removes a render blocking request and improving performance.

Improve Google Fonts Loading

Enable caching of Google Fonts and load them inline. This reduces render-blocking requests and improves page load times.

Limit Google Fonts Support For Legacy Browsers

Enabling this option will lower the size of Google Fonts and improve load times, however it will limit Google Fonts support in some very old browsers. You can turn this off to increase support for older browsers at a slight cost to performance.

Defer jQuery And jQuery Migrate

When possible, jQuery and jQuery Migrate will be moved to the body to speed up load times. If a third party plugin registers jQuery as a dependency, it will be moved back to the head.

Enqueue jQuery Compatibility Script

Some third party scripts may be incorrectly enqueued without declaring jQuery as dependency. If jQuery is deferred, these scripts could break. If you are experiencing console errors after enabling the “Defer jQuery And jQuery Migrate” option, you can enable this option, which will load an additional compatibility script that will attempt to solve the issue. You can turn this feature off if everything is working fine without it.

Defer Additional Third Party Scripts

Warning: This can cause JavaScript errors in some cases and should be used with care. When enabled, scripts registered by plugins and themes will be deferred to improve performance and jQuery will always be loaded in the body.

Conclusion

From heavyweight to lightweight and a near-perfect pagespeed scores out of the box. According to the the Divi website, regarding the Divi performance update.

This website is optimized for speed with all basic performance best practises in place and was loading between 0.9 and 1 second. After the new performance update it was loading in 0.8 seconds.

After the update is installed, the default settings of the performance tab options page are good to go. Without changing anything, that is good as not everybody is so technical to investigate your settings after an update.

Before Divi was loading only a few scripts where the main script has about 98% unused code, now we have about 57 scripts that are loaded by Divi. However all the scripts are in use, according to the Chrome developer coverage tool. With HTTP/2 (SSL) it is not necessary or recommended to combine scripts anymore.

Divi is opening the way to become one of the fastest WordPress Themes in the world. The current Divi performance update already gives better grades in Google Page Speed Insights and GTmetrix.

More interesting articles: