Set up Divi for Hummingbird

Did you know that I worked for WPMU DEV a few years ago? However, I was a big fan of their services even before I joined them. And after I left them, I became a customer and continue to use their services to the current day.

The situation

Many websites that I run or maintain use Divi. And when combining Divi with the Hummingbird plugin, there can be some unforeseen and hard to find issues.

Maybe you have already tried yourself and know some of the following:

  • The page suddenly loses all styles. When you log in, it’s mysteriously fixed again.
  • Frequently sections or modules have the wrong padding or margin, but in the Visual Builder, everything is correct.
  • Your buttons show up wrong, with default blue outline instead of having the custom button style you gave them.
  • Visitors report that the layout is broken, but you cannot find a problem when checking the page.
  • Sometimes the layout seems to be missing on the first page loads and you need to hit refresh a few times to see the correct design.
  • The JS console shows errors like “et-core-unified-123.min.css not found.”

Those and other issues can occur when a caching plugin is not configured correctly. I have spent a lot of time to debug those issues and understand what is going on.

Divis built-in caching system

In June 2016 Divi announced a big “performance enhancement“, which brought some long-missing features to the popular page builder.

Those performance enhancements were basically an integrated caching module, that did
(a) combine and minify Divis Javascript and CSS files, and
(b) also took the custom CSS rules from all sections/rows/modules of each page and wrote them to a page-specific CSS file, instead of adding them inline in the HTML.

It was a great concept that indeed made pages load a lot faster!

The Conflict with Hummingbird

After you go ahead and enable Hummingbirds Page Caching module, OR make certain changes in the Asset Optimization module, you will “randomly” encounter the above mentioned symptoms: Styles not loading or wrong styles being applied.

But… what happens? And why?

As mentioned, Divi caches some CSS rules and combines most of the themes’ CSS and Javascript files. Hummingbird caches the entire pages HTML code and (when Asset Optimization is enabled) combine and minify many CSS and Javascript files of your webpage.
Eventually, Divi will re-create its stylesheet, and every time this happens, the stylesheet gets a new file name; its name is “et-core-unified-(timestamp).min.css”.

However, Hummingbird is not aware of this file-name-change and still has the HTML page in its Page Cache that refers to the old CSS file name. So the page served by Hummingbird tries to load the non-existent “et-core-unified” file, which fails with a 404 Error.

TL;DR: With Divis default settings and Hummingbird Page Caching/Asset Optimization you have two conflicting caching mechanisms

How to fix it

Divis’ caching approach is excellent in most cases. But when a specialized caching plugin (such as Hummingbird) optimizes our webpage, we want to leave all details to that caching plugin. We simply have to disable all caching features in Divi.

So first go to the Admin settings of Divi and scroll down. Disable both options “Minify And Combine Javascript Files” and “Minify And Combine CSS Files“.

Disable “Minify and Combine” options in Divi

Then scroll back up, go to the tab “Builder > Advanced.” Here, disable the option “Static CSS File Generation” and hit the Save button.

Disable the Static CSS File Generation in Divi

With those settings in place, go back to Hummingbird, enable Page Caching and clear the Cache once. Your page is now cached by Hummingbird which guarantees that it’s always displayed correctly.