Explanation of Performance Settings

If you’re struggling to get your head around Divi’s new Performance settings it’s worth reading through the tool tips for each setting. They’re well written and give you a basic insight into their function. They’re a little bit hidden away in the Divi Theme version, so here they are:

** 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 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 deffer 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.

[original FB post]