Divi improves its performance

The new Divi update is announced as “massive”, going from being a heavy theme to an ultra light one. In this note we tell you all the features that increase performance and their specific details.

Divi Total Reconstruction

Divi, the famous drag-and-drop theme and builder plugin, has received a complete re-engineering. The objective? Accelerate your performance from every possible angle. The code was debugged, modernized, streamlined, many times rewritten from scratch. In fact, Divi is now capable of modular scaling without compromising the speed of our site.

Divi was transformed into a super lightweight theme after being modularized your PHP engine and all its resources. Now, only what our site uses is loaded and processed in a kind of rendering on-demand. They are not mere words: the Theme became intelligent, self conscious, so that can automatically identify critical CSS, thus deferring non-critical styles and reducing the css output of the Divi Builder by combining duplicate styles.

With speed in mind, a collection of new options have been introduced that automatically improve performance when cache and defer multiple render lock requests, successfully achieving remove unnecessary resources.

Strict Diet Code

In its test site the developers testify that render blocking resources were removed by 100%, CSS size was reduced by 94% while JavaScript by 50%. no more code bloat thanks to the following four strategies:

Dynamic PHP FrameWork

Divi's new Dynamic Framework renders only the resources needed to render the modules and features that are used per page. Namely, everything that is not used is not processed. If our page uses 5 of the total of 50 modules that Divi provides, then our site will only process those 5 modules, skipping all the others.

But also, if those 5 modules in the example don't use features like hover effects, animations, options sticky, border options, etc., then those functions are not processed either. Divi lost weight because it eliminates on the fly everything that our site does not use, removing it from the roots.

Dynamic Cascade

The same logic mentioned above applies to CSS. Divi's native library was modularized. Thus, on each page, small pieces of CSS are combined, giving birth to a single, precise style sheet, which has only the resources for modules, features and layout options used. The result of this mechanism is a considerable decrease in the size of the CSS file of each of the sites created with Divi. 0% bloat, because CSS that is not used is simply never loaded.

Smart Styles

The CSS generated by the Divi builder has also been optimized to reduce duplicate styling and overall file size. In the new version, Divi identifies redundant styles and combines selectors into a single list. Thanks to Divi Presets, we can create very light pages because each module that uses a preset does not need to have its own unique block of styles (instead, you can share your styles with other users of the preset).

JavaScript optimization

Again: most of the JS file used in Divi has been modularized. Similar to the previous cases, each JavaScript library is loaded on demand. In addition, several features of Divi were individualized, such as the options sticky and motion effects. Ergo, these resources are only loaded when they are needed.

The new Divi update also benefited from a good cleanup. Tried to remove unnecessary code managing to reduce the size of the JavaScript file a 50%.

Critical Cascade: What's New in Divi

Once it finishes rendering the CSS, Divi will figure out which little piece of CSS needs to be loaded first for the visible content of our site to appear instantly.. That's why Google favors sites made with the new Divi scores so high.

New Acceleration Options

Divi increased the speed-up options by looking to remove unnecessary resources and defer render lock requests. Among these improvements are:

Cache of Google Fonts

Goodbye to WordPress Emojis

Gutenberg style sheet delay

dynamic icons

The option is disabled by default if we are using a Child theme or a custom Divi module. In the event that our Child or third party Divi module uses the full set of Divi icons, then this option should remain disabled.

jQuery lag

If a script is enqueued in the header that requires jQuery, it will be moved back to the header to avoid conflicts. The option can be disabled if it causes any incompatibility.

online styles

By enabling dynamic CSS, the base.css file occupies a few kb.

Conclusions

It is a remarkable development effort that the Divi developers made, betting on a Theme + Builder that recovers some lost competitiveness against really fast options (such as Gutenberg). It is impossible not to admire the reconstruction of Divi and testify that they have really achieved an ultra light, powerful, flexible and well focused product on saving resources, server calls, blocking elements and large files. Divi has been renewed and goes out into the binary arena with a proposal that no one should go unnoticed.

The good news on a general level is that all Theme and Plugin developers seem to have fully understood that the bloat it is a common enemy. We admins are increasingly aware that our site must be agile and not burdened with unnecessary code or functions. The Internet is getting faster, mainly because of these efforts. And we all benefit, not only as site owners but also as Internet users.

Wishing you liked the note, we invite you to leave your impressions or doubts in the comments.