PhilippDid you know that years ago, I worked for WPMU DEV? That was and remains one of the best professional experiences of my life!
In fact, I was a massive 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 millions of 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, some obstacles 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
- The Hummingbird-Divi Situation
- Divi’s Built-in Caching System
- The Conflict with Hummingbird
- How to Fix the Problem
- Wrapping Up
The Hummingbird Plugin
Developed by WPMU Dev, Hummingbird does all the legwork when it comes to caching, ensuring that you’ll be able to extract every ounce of your Divi website’s performance.
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 over 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, 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, which is 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, some unforeseen issues can be challenging 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
In 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.
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 page’s 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.
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.
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.
Recommended Reading: Case Study: Divi with WP Smush and Hummingbird
Wrapping Up
By following the steps outlined in this tutorial, you have learned how to harness the combined power of Divi and Hummingbird to create a fast, efficient, and visually captivating website.
Remember to periodically assess your site’s performance and make adjustments as necessary to ensure that it continues to meet the highest standards of speed and user experience.
With your newfound knowledge, you can confidently embark on your website optimization journey and take your Divi website to new heights. Happy optimizing!
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
