All Collections
Divi Release Tutorials
Divi Dynamic CSS & Frontend Performance Feature
Divi Dynamic CSS & Frontend Performance Feature

Divi now creates lightweight pages thanks to it's Dynamic Framework and Dynamic Assets along with other speed-boosting features

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

With Divi, it's now easy to create super-fast websites that score 100 on Google Page Speed and 100% on GTMetrix

The new version of Divi eliminates bloat and gives you the best of both worlds: the power of an expansive page builder with the nimbleness of a lightweight theme!

Chose the optimizations you need

All Divi improvements will be enabled by default - the settings to enable/disable them individually are in Divi Options > General > Performance tab:

Dynamic PHP Framework

Divi’s new Dynamic Framework only processes the logic needed to render the modules and features that you use on each page. Everything else is cut out of the equation. If your page only uses 5 of Divi’s 50+ modules, Divi only processes the functions needed for those 5 modules and it skips the rest. If those 5 modules don’t use some of Divi’s many features like Scroll Effects, Animations, Sticky Options, Border Options, etc, then it doesn’t process those functions either. Simple as that. Divi is now much leaner than it has ever been because it’s stripping away everything you aren’t using on the fly. In other words, anything that could be considered “bloat” is erased from the back-end.

Dynamic CSS

We applied that same anti-bloat logic to Divi’s stylesheet. We took Divi’s big CSS file and broke it up into hundreds of small components. On each page, these CSS components are combined to form a unique stylesheet that contains only the pieces needed to style that particular page based on the modules, module features, and theme layout options that you are using. The result is a dramatic decrease in the CSS file size on each page you build with Divi. There is no bloat because unused CSS is never loaded. In our test website from earlier, Divi’s CSS size was reduced from 860kb all the way down to a mere 54kb.

Smart Styles

Divi’s builder-generated CSS has also been optimized to reduce duplicate styles and overall file size. Now, Divi identifies duplicate styles and combines selectors into a single list. Using Divi Presets, you can create very lightweight pages because each module using a preset doesn’t need to have its own unique block of styles, but instead can share its styles with other users of the preset.

JavaScript Optimization

We modularized a huge portion of Divi’s JavaScript file, allowing Divi to load each JavaScript library on-demand only when it’s needed by the specific modules you are using on a page. We also broke out some of Divi’s features, such as Sticky Options and Motion Effects, loading those pieces only when necessary. On top of that, we were able to remove big chunks of unneeded code and, in the end, cut Divi’s base JavaScript file size in half.


Critical CSS

Divi’s new Critical CSS system identifies the CSS needed to style content above the fold, and it defers everything else. Since only the critical styles are needed when the page first loads, and since render-blocking assets play such a significant role in page speed, Divi’s ability to automatically separate critical and non-critical styles gives it a huge advantage over many other WordPress themes and builders.

After Divi is done processing its CSS, only a small part of the already small amount of CSS is actually factored into the website’s initial loading time, which means content shows up right away. That’s why Google gives Divi websites such high scores right out of the box.

Speed Boosters

We added several speed-boosting options to Divi with the goal of removing unneeded resources and deferring render-blocking requests:

Google Fonts Caching

Google fonts are now cached and printed in-line in the header. This removes a render-blocking request and speeds up load times. We also added the option to remove legacy font files to lessen the payload.

WordPress Emoji Removal

WordPress comes with a native emoji system, but this really isn’t needed anymore due to native emoji support in modern browsers. In fact, native emojis look much better than the WordPress version. Divi gives you the option to disable native WordPress emojis, which removes unneeded resources.

Gutenberg Stylesheet Deferral

By default, Divi will now lazy-load the Gutenberg block stylesheet on pages where you are using the Divi Builder instead. It will still load just in case, but it will no longer be render-blocking.

Dynamic Icons

Divi now ships with icon font subsets that are loaded on-demand based on the modules and features you are using. This decreases Divi’s base icon font size from 90kb all the way down to 6kb. The full icon set is loaded only when needed. This option is disabled by default if you are using a child theme or custom Divi module. If your child theme or third part Divi module uses the full Divi icon set, then this option should remain disabled.

jQuery Deferral

Divi will move jQuery out of the header and load it asynchronously in the footer when it’s not needed in the header. This removes a render-blocking request and speeds up load times. If a script is enqueued in the header that requires jQuery, it will be moved back to the header to avoid conflict. This option can be disabled if it causes problems.

In-Line Stylesheet

When Dynamic CSS is enabled, the base Divi style.css is tiny! Loading this in-line removes a render-blocking request and improves Google PageSpeed scores. When Critical CSS, Dynamic CSS ad In-Line Stylesheet options are enabled, all render-blocking CSS requests are removed.

Related Articles From Our Blog

Did this answer your question?