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.
14 performance options to speed up WordPress and Divi
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 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.
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 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.
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
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:
- How to speed up WordPress
- Add a Divi header section to the top of your Single Post Pages
- Increase WordPress Page Speed using functions.php