Setting up Divi for Hummingbird

Did you know that years ago I once worked for WPMU DEV? That was and remains one of the best professional experiences of my life!  

In fact, I was a huge fan of their services even before I joined them, and I became their client immediately after starting my own company, continuing to use their services to this day.

Having established themselves with leading WP products used on tens of million websites, one of the products that WPMU DEV takes pride in is Hummingbird Pro, the ideal performance plugin to fine-tune the speed and effectiveness of your website.

But, if you want to set up Divi for Hummingbird, there are obstacles that may stop you from using the tool effectively. Without further ado, let’s discover them and set up the plugin successfully!

Table of Contents

The Hummingbird Plugin

Developed by WPMU Dev, Hummingbird does all the legwork when it comes to caching, making sure that you’ll be able to extract every ounce of your Divi website’s performance.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

The plugin’s framework improves website speed and performance by including top-of-the-range file compression and caching controls. Each feature is critical for making pages load faster than ever:

  • Scan and Fix: Scanning your Divi website, discovering what slows it down, and using one-click performance improvements for making critical speed improvements.
  • World-class caching: A full caching suite for loading pages faster with full-page, Gravatar, and browser caching tools.
  • Performance Reports: Excellent reports and tips for running your site at super speed.
  • Asset Optimization: Positioning, minifying, and combining JavaScript, CSS, and Google Font files for top performance.
  • GZIP Compression: Blazing-fast HTML, JavaScript, and stylesheet (CSS) transfer.
  • Configs: Setting your preferred performance settings, saving them as config, and instantly uploading them to any other site.

With more than 100K+ installs and 1K+ 5-star reviews on WordPress.org, Hummingbird is one of the most powerful all-in-one versatile website performance optimization plugins. It is incredibly intuitive to use, with lots of tooltips to help you use it effortlessly on your Divi website.

The Hummingbird-Divi Situation

As you may have noticed by now, most of the websites we run and maintain for us and our clients utilize Divi, widely regarded as the most versatile WordPress theme on the market.

It is incredible how powerful the Divi theme is and how it integrates effortlessly with some of the best online tools and WordPress plugins.

However, when combining Divi with the Hummingbird plugin, there can be some unforeseen issues that are particularly hard to locate.

Maybe you have already tried the same thing yourself and experienced some of the following:

  • The page suddenly loses all styles. But, 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 appears correct.
  • Your buttons show up wrong, with a default blue outline instead of the custom button style you gave them.
  • Visitors report that the layout is broken, but you cannot locate the problem when checking the page.
  • Sometimes the layout seems to be missing on the first page loads and you need to hit refresh several 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.

Believe me when I tell you that I have spent a lot of time debugging those issues, and I understand exactly what is going on!

Divi’s Built-in Caching System

As of June 2016, Divi announced a big “performance enhancement“ – Static CSS File Generation For Divi, which brought some long-awaited features and improvements to the popular page builder.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

In essence, the performance enhancements consisted of an integrated caching module that could:

  • (a) combine and minify Divis JavaScript and CSS files, and
  • (b) take the custom CSS rules from all sections/rows/modules of each page and write them to a page-specific CSS file instead of adding them inline in the HTML.

It was a great concept that indeed made Divi pages instantly load much faster!

The Conflict with Hummingbird

So, what happens after you try to use one of the most powerful caching plugins available on Divi?

After you go ahead and enable Hummingbird’s Page Caching module, OR you make certain changes in the Asset Optimization module, you will “randomly” encounter the symptoms mentioned above:

Styles not loading or wrong styles being applied. But… what happens exactly? And why is that the case?

As mentioned, Divi caches some CSS rules and combines most of the theme’s CSS and JavaScript files. Hummingbird caches the entire pages HTML code (when Asset Optimization is enabled), combining and minifying many of the 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, the problem is that Hummingbird is unaware of this file name change and still has the HTML page in its Page Cache that refers to the old CSS file name.

Thus, the page served by Hummingbird attempts to load the non-existent “et-core-unified” file, resulting in a 404 Error in the process.

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

How to Fix the Problem

In most cases, Divi’s caching approach is exceptional! However, when a specialized caching plugin (such as Hummingbird) optimizes our webpage, we want to leave all details to that caching plugin. Therefore, we simply must disable all caching features in Divi.

So, how can we do this exactly?

First, go to the Admin settings of your Divi website and scroll down. There, disable both the “Minify And Combine Javascript Files” and “Minify And Combine CSS Files“ options.

Setting up Divi for Hummingbird
Disable “Minify and Combine” options in Divi

Afterward, scroll back up, navigate to the “Builder > Advanced” tab, and disable the option “Static CSS File Generation”, then hit the Save button after you’re done with it.

Setting up Divi for Hummingbird
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.
Now, your page should be cached by Hummingbird, which guarantees that it’s always displayed fast and correctly.