CSS optimization plugins promise faster loading times and better PageSpeed scores for every website.
But enabling these features on a Divi website sometimes makes pages load much slower than before. This frustrating outcome happens because Divi already optimizes its own CSS files quite aggressively. Adding another layer of optimization on top of Divi’s system creates conflicts and duplicate work. The two systems fight each other instead of working together to improve loading performance. Divi generates dynamic CSS based on module settings and theme options chosen by the designer. That CSS gets combined, minified, and cached by Divi itself without any additional plugins required.
When a caching plugin tries to optimize that same CSS again, the file size can actually increase. The plugin may also break Divi’s CSS loading order and cause layout problems on the website. Broken layouts force browsers to work harder to render the page, which slows everything down.
Here are the recommended CSS optimization settings for Divi websites.
- Disable CSS minification in caching plugins and let Divi handle its own CSS files
- Disable CSS combination in caching plugins to avoid breaking Divi’s loading order
- Enable Divi’s built-in CSS options under Theme Options → Builder → Advanced
- Use “Inline Critical CSS” only if testing confirms that it actually improves performance
- Exclude Divi CSS files from any additional optimization in caching plugins
Here is a comparison of CSS optimization approaches for Divi websites.
| Optimization approach | Works with Divi | Potential issues |
|---|---|---|
| Divi built-in CSS optimization | Yes (recommended) | None when configured correctly |
| Plugin CSS minification | Sometimes | Can break layout and increase file size |
| Plugin CSS combination | Rarely | Almost always breaks Divi layouts |
| Critical CSS generation | Yes (with caution) | May need manual adjustment for some pages |
| CSS preloading | Yes | Minor improvement, easy to implement |
For more information about performance optimization for Divi websites, visit the WP Rocket page on wpwizzy.com.
Here is how to configure Divi’s built-in CSS optimization for best performance.
- Navigate to Divi Theme Options and click on the Builder tab in the left sidebar menu.
- Look for the Advanced section and find the option labeled “Static CSS File Generation”.
- Enable this feature to make Divi generate static CSS files instead of dynamic ones.
- Static files load faster because the server does not need to generate them on every page request.
- Next, enable the option called “Combine CSS Files” to reduce the number of HTTP requests.
- Fewer requests mean faster loading times for visitors on slow internet connections.
- Finally, enable “Inline Critical CSS” to load above-the-fold styles immediately during page rendering.
This makes the visible part of the page appear much faster while the rest loads in the background. After enabling these settings, clear all caches and test the website speed using Google PageSpeed Insights. The score should improve significantly without any help from external caching plugins. Keep caching plugins active for page caching, database optimization, and image compression features , but disable CSS and JavaScript optimization features inside those plugins to avoid conflicts with Divi.