There is an idea out there that Divi is slow, and not only it is not true but every day that passes it is less so. In fact, it is currently the fastest and most optimized layout of all, at the same level of performance as a website made only with the WordPress block editor.
The problem of web overload and the Divi solution
What is web overload?
The overload of a website is the size of any static web page (the HTML) combined with all the other files it uses to style the page (CSS) and added complex features such as pop-up windows and motion effects (JavaScript).
But that’s not all. Sites created with WordPress themes (like Divi) process the HTML of a page dynamically using PHP files in the background. So when we talk about web overload, we have to consider the size and efficiency of these PHP files that dynamically process the HTML on a page.
To say that a website is overloaded usually means that the pages are:
- Loading and/or processing more than necessary.
- Loading and/or processing inefficiently.
How does overloading affect site speed?
When a website loads more than is necessary for a particular page, page load times suffer, resulting in a slower website.
For example, if you have a stylesheet with 5,000 lines of CSS and you load that stylesheet on a page that only uses 200 lines of CSS within the stylesheet, you have wasted time loading the other 4,800 lines of CSS that were never used.
In the same way, let’s say you’re referencing 5 external JavaScript libraries that run on each page.
If you have a page that only uses one of those 5 libraries, the site will waste time running 4 JavaScript libraries (with thousands of lines of code) for no reason when processing the page.
But there is more overload besides unused CSS and JS. Your website’s PHP files run tons of functions that determine what content is served on the page.
So if you have a functions.php file that has 50 lines of code with hundreds of functions, allowing your site to run the entire file before delivering content to a page is overkill, especially if the page only requires a few of those functions to run.
All this time spent checking unnecessary CSS, JS and PHP will undoubtedly affect the overall speed of your website.
How has Divi solved the overloading problem?
Due to the overwhelming amount of design features Divi has accumulated over the years, overloading became a problem that needed to be solved.
To solve the overloading problem, the Elegant Themes team has applied “anti-overloading” logic to new features that have made Divi’s overloading problem completely obsolete.
With these anti-overload features, Divi is now extremely efficient in processing and loading only what a page needs and nothing more.
With the implementation of these new features, there is NO overloading problem in Divi.
Divi’s anti-overload features
The 4 key features that solve the Divi overload problem are as follows:
- Dynamic Modules – This solves the PHP overload problem by optimizing PHP files so that only the functions needed to represent modules and added features on a page are executed. No additional functions are processed.
- Dynamic CSS – This solves the problem of CSS overload by creating a custom stylesheet dynamically that includes only the CSS needed for a page. No other CSS is loaded.
- Dynamic Icons – This decreases overload by loading a specific subset of icon fonts that a page uses instead of loading them all unnecessarily.
- JavaScript optimization with dynamic JavaScript libraries – This solves the JavaScript overload problem by optimizing Divi’s main script.js file (which is now half the size) and loading external JavaScript libraries dynamically on a page only if they need to be used. No other unnecessary JS libraries will be executed.
You can enable these features by navigating to Divi → Theme Options. Then, under the General tab, select the Performance subtab. There you will see all the available performance options, including the four mentioned above.
Now let’s go into a little more detail about how each of Divi’s anti-overload features increases the speed of your Divi website.
How Divi’s new anti-overload features increase speed
Dynamic module Framework: On-demand functions
The Dynamic Module Framework feature increases site speed in an efficient way by selecting and executing functions on demand.
Divi’s built-in anti-overload logic will execute only the functions needed to process the modules and features used on a page and nothing else.
Check before processing
PHP’s dynamic process of serving the content of your web files (the server side) to the web page (the client side) is extremely efficient.
It runs a quick initial check through the PHP files to determine if a module or feature has been used. Once done, the check is not run again for that page because it remembers which features the page needs to be executed.
No more running thousands of lines of unused code and hundreds of unnecessary functions before loading a page.
Tailor-made modules
This function has a new framework for dynamically loading modules on a page. Due to the anti-overload logic using PHP, Divi will only process the shortcode functions needed for the modules used on a page.
So if you have 3 modules on a page, Divi will only run the functions needed for those 3 modules instead of running all functions for all modules, regardless of which one is used.
Those 3 functions will process the shortcode/HTML for that module on the page without wasting processing time.
Tailor-made features
In the same way that Divi dynamically processes and loads modules on demand, Divi does the same for all features used on a page.
Instead of running functions for all possible features that could be used in the Divi element (scroll effects, animations, fixed option, border options, etc.), Divi only processes those feature functions that are actually being used in an element.
This feature does not apply only to modules, but to any Divi element including sections, rows and columns.
The quickest way to prepare a sandwich
If you were to go to the kitchen to prepare a sandwich, you would not spend time pulling everything out of the pantry before selecting the few ingredients you need.
Of course you wouldn’t. You’d take a quick look at the items in the pantry and then pull out just those three ingredients. Then, you prepare the sandwich.
In the same way, Divi will logically take a look at the functions you need in the PHP file (the pantry) and then use only those functions to deliver the modules and features (the ingredients) you need for your page (the sandwich).
Dynamic CSS
The same anti-overload logic used in PHP has also been applied to Divi’s stylesheet.
As you can imagine, Divi’s main stylesheet was quite large considering all the features it has.
But loading this large stylesheet on every page causes unnecessary overload and slower page load times.
Divi dynamically loads the CSS depending on each page layout
With dynamic CSS, every time a page loads, this is what happens:
- Divi’s base CSS is loaded, which includes only the CSS needed to style the Divi theme. This CSS is about 50kb.
- Divi also loads additional CSS dynamically based on what the page needs. So this CSS will only contain the styling needed for any modules, features or layout settings used on the page. With a simple home page layout, this CSS might only add another 30kb.
This solves the problem of CSS overload because now there is no CSS overload. There is no overload because no other CSS is loaded.
Before Dynamic CSS, the Divi stylesheet was about 900kb and loaded on all pages regardless of content.
Now, if you only need 80kb of CSS for the page, Dynamic CSS removes the 800kb+ that you don’t need to load the page. That means your page loads even faster.
Critical CSS
Divi’s critical CSS identifies the CSS needed to add the necessary styles to the above-the-fold content and defers everything else.
Since the critical styles are only needed when the page first loads, and since render-blocking assets play such an important role in page speed, Divi’s ability to automatically separate critical and non-critical styles gives it a huge advantage over other WordPress themes and layouts.
After Divi has finished rendering its CSS, there is hardly anything left in the header of the site, which means the content is displayed immediately, and that’s why Google gives Divi sites such high scores.
Critical threshold height
The critical threshold height option is related to critical CSS.
When critical CSS is enabled, Divi determines a “threshold above the fold” and defers all styling for elements below the fold.
However, this threshold is only an estimate and may vary on different devices. Increasing the height of the threshold will defer fewer styles, resulting in slightly slower load times, but less chance of cumulative layout shifts (CLS).
If you experience CLS problems, you can increase the threshold height.
Dynamic icons
Intelligent delivery of icon font subsets to load the fonts you need without having to load all icon fonts on every page.
There are three subsets of icon fonts that are used depending on what a page needs.
- Base – this subset includes all the icons that are used by default in the Divi theme and its modules.
- Social – this subset includes all base icons plus all social icons, which are loaded when using a social media tracking module.
- All – this is the set of icons used when using the icon selector in a Divi module to select a custom icon.
If you have a page that does not use a social media sharing module or a module with an icon added using the icon selector, the base icon font file size for that page will only be 6kb.
It’s good to know that if you don’t use icons on a page, it will be a little faster.
Dynamic JavaScript Libraries
To increase site speed, Divi has optimized its JavaScript to be more concise and modular. This allows Divi to load JavaScript dynamically on demand.
So, now, Divi can load JavaScript functions (such as pinning options) as well as external JavaScript libraries (such as Magnific Popup) only when they are needed by modules or features on a page.
The smaller base JavaScript file size, combined with the dynamic JavaScript libraries, will definitely increase site speed, simply because there is less code to process on each page load.
And, because this anti-overload logic happens on every page, if you have a fixed row on a page, you won’t have to worry about that fixed JavaScript loading on a page that doesn’t have it. That’s the beauty of Divi’s dynamic JavaScript.
Defer jQuery and jQuery Migrate
If the jQuery script loads too early (by default in the header), the HTML processing is paused until the script is executed. This slows down the rendering and display of your pages.
So, where possible, Divi will move jQuery and jQuery Migrate to the body of the HTML document to remove any requests that block display and speed up load times.
Load the integrated dynamic stylesheet
The option to load the integrated dynamic stylesheet is the latest CSS optimization that eliminates all CSS requests that block the display.
Thanks to dynamic CSS, the basic Divi stylesheet is now small enough to load directly on the page.
Loading this integrated CSS eliminates a display-blocking request and improves Google PageSpeed scores.
When the Critical CSS, Dynamic CSS and Load inline integrated dynamic stylesheet options are enabled, all display-blocking CSS requests are removed.
Improve loading of Google fonts
The option to improve the loading of Google fonts allows you to cache Google fonts and load them directly in the header. This reduces requests that block display and speeds up load times.
We have also added the option to limit the compatibility of Google Fonts with older browsers.
This basically removes legacy font files to reduce payload. Enabling this option will reduce the size of Google Fonts and improve load times, but will limit Google Fonts support in some very old browsers.
You can disable this option to increase compatibility with older browsers at a slight performance cost.
Disable WordPress emojis
WordPress includes a native emoji system, but it is no longer necessary due to the compatibility with native emojis of modern browsers. In fact, native emojis look much better than the WordPress version.
Divi gives you the option to disable WordPress native emojis, which eliminates unnecessary resources. And having fewer resources to process results in faster page loads.
Defer Gutenberg block CSS
By using the Divi Builder on a page, you are also choosing not to use the default WordPress block editor (Gutenberg). And since you won’t be using blocks to style your page, you don’t need Gutenberg’s CSS to block your Divi page from loading.
With the option to defer Gutenberg block CSS enabled, Divi will now (by default) defer loading Gutenberg block CSS on pages where you use the Divi Builder. It will still load just in case (in the footer), but it will no longer block display.
Are these Divi improvements noticeable?
You only have to update Divi if you already have a license (and if you don’t have it yet here you have it with a 20% discount) and you will see that all your pages improve in performance, speed and scores of the main web metrics.
Of course, as you will understand, it will depend a lot on the page the improvement you get.
Also, to check this, the Elegant Themes team has created identical websites using the most popular WordPress themes and layouts and put them to the test.
These test sites are hosted on SiteGround + CloudFlare, with no additional performance plugins or performance tweaks. The sites were tested with Google PageSpeed Insights. Each site was tested 6 times and the average of the top 5 scores was taken, removing the most discrepant.
And here is a video of the tests…
As you can see, the fight between the layout developers is still open, and it seems that Divi is still in the lead. In the end we all know that the winner will be the block editor Gutenberg, but it still has a long way to go to catch up with the current layout designers, not only Divi, but any of them.
This means that Divi still has years to go being the best option to design WordPress websites without having to program code, not only in terms of functionality and features, but also in terms of performance and speed.
