Divi improves its performance

divi theme builder update

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.

Scores obtained in a wordpress-hosting with CDN without having to resort to third-party performance plugins.

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.

Divi is included for free in our service Managed WordPress

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

A new Critical CSS system in Divi identifies the style libraries needed to render the visible part of the layout, deferring everything else. Since the "critical styles" are only needed when the page is first loaded, and since render-blocking assets play a huge role in loading speed, Divi's ability to automatically separate critical styles from non-critical ones provides a huge competitive advantage over its main competitors.

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.

Several speed boost options have been added in the new Divi with the aim of removing unnecessary resources and delaying render blocking requests.

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

Yes, Google fonts now are cached and summoned in line in the Header section. This eliminates a render lock request, as well as speeding up load times. Also added option to remove legacy font files to reduce load.

Goodbye to WordPress Emojis

As we all know, WordPress comes out of the factory with its native emojis, something unnecessary since current browsers, Firefox, Edge, Chrome and Safari, support emojis natively. In fact, such native emojis are cuter and better looking than the ones that WordPress brings. Divi allows us now disable WordPress to save on resources that they have no reason to be.

Gutenberg style sheet delay

By default, Divi loads in mode lazy (that is, it defers) the Gutenberg block style sheet on the pages where we use the Divi builder. The Gutenberg styles will be loaded, just in case, at the end of everything, but are no longer a page rendering blocker.

dynamic icons

The new Divi leaves the factory with icon fonts that load on demand depending on the modules and features being used. Nothing minor: managed to reduce the weight of the icon font file from 90 kb to 6 kb. The full set of icons will load only if needed.

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

As of this update, Divi will remove jQuery from header when not needed. As we imagined, it will load asynchronously in the footer to eliminate an extra request that blocks rendering, speeding up our site load.

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

Loading “inline” eliminates another typical render blocking request thus improving Google PageSpeed/GTMetrix scores. When the Critical CSS and Dynamic CSS inline style sheet options are enabled, all render-blocking CSS requests are removed.

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.

We take care of the maintenance of your site

We include Divi All In One with our Managed WordPress service

no comments on Divi improves its performance

back to blog

Duplika

Duplika

We are online, we are not a bot :)

I will be back soon

Duplika
Hi 👋
Select the prefered contact method to get in touch.
Connect via:
chat