How to Optimize Divi for Free Using Our Smush and Hummingbird Plugins

When it comes to themes for WordPress, Divi needs no introduction. It’s only the most popular WordPress theme out there, created by one of the leading WordPress theme shops globally, Elegant Themes.

Considering its popularity, it’s worth demonstrating how to enhance Divi’s optimization as much as possible — which can be done (for free!) with our Smush and Hummingbird plugins.

Divi has over 203 WordPress layout packs and (at the moment) 1495 layouts that come with the theme. That makes an almost endless amount of photos, text, and features that can be optimized for maximum performance.

We’ll check out what our optimization duo, Smush and Hummingbird, can do to enhance your Divi site with a popular layout.

When it comes to optimization, Smush is our 5-star image optimization plugin with over 1+ million active installations. She’s able to optimize images, lazy load, resize, compress, and bulk smush all of your images for improved speed.

Smush is ready to help with Divi optimization!

Our other optimization plugin, Hummingbird, has a solid 4.5-star rating and over 100K active installs. She’s in charge of making your site run faster by adding ways to boost Google PageSpeed Insights with tweaked controls over file compression.

Also, she can minify for CSS & JS, lazy load images, cache, and more.

Hummingbird will help make your Divi site fly!

It’s always worth noting — again — that Smush and Hummingbird are both free to use!

(Spoiler alert!) You’ll see how we took our Divi website from a desktop GTmetrix grade “C” to an “A”! And improved our Google PageSpeed Insight score by 31.9% for desktop and 126% for mobile!

Additionally, this article will cover some basic tips on keeping your Divi site in tip-top shape for optimal speed and performance. We’ll explore:

• Divi Overview and Test Layout
• Optimization Test Set Up
• A Speed Test Without Optimization
• Divi Optimization
• Optimization with Divi and Smush
• Optimizing Divi with Hummingbird
• Further Optimization in Hummingbird and With Your Host
• More Tips to Enhance Divi Optimization

To follow along, you’ll need Divi (you can try it risk-free for 30-days here), Smush, and Hummingbird. Once you have those installed and activated, you’ll be ready to go.

By the end of this article, you’ll see how to implement all the tools at your disposal to make your Divi site run at peak performance!

Divi Overview and Test Layout

Without going into detail (since you’re probably familiar with it), Divi is pretty awesome. It cranks your typical WordPress theme up a notch by being a website-building platform that replaces the standard WordPress post editor with an amazing visual editor.

If you haven’t started using Divi yet, and want to, be sure to read our article about everything you need to know to get started with Divi. 

For the price, you can’t go wrong with Divi. It’s designed for ease and efficiency for programmers and newcomers alike. And considering over 2 million websites are built with this theme, it has a solid reputation.

That being said, this would be a rather lengthy article if we covered every premade layout that comes with Divi. So, as I mentioned earlier, we’re going to narrow it down and show you how to enhance your Divi site with Smush and Hummingbird using their Agency layout pack.

The Agency layout has a nice combination of text and photos. Plus, it’s one of the top layout packs that appear in Divi’s search.

You’ll more than likely be using a different layout (or not); however, the demonstration in this article can work for ANY layout — it just may require additional or less tweaking.

So, let’s get Divi set up and start moving!

Once you have Divi installed and activated, create a new page from the WordPress dashboard to access the Agency layout. You’ll then select to choose from a Premade Layout.

You’ll see there are a ton of options to choose from. At this moment, Agency is one of the top layouts on their list. If it’s not there, use their search bar to locate it.

Now that I have Agency installed, I’m going to get ready to test Divi, Hummingbird, and Smush. Of course, there’s a method to this madness. So, here’s…

Optimization Test Set Up

For this article, we’re going to start from scratch. The website I’m setting Divi up on has no installed plugins (except the WPMU DEV Dashboard plugin), themes, or pages beyond Agency. A close to an absolute clean slate.

It’s similar to our articles about optimization with Elementor and WPBakery in terms of the configurations.

As for the methodology used in this test, it includes:

• Using a site that’s hosted on our basic WPMU DEV Managed WordPress hosting plan (Bronze)
• WordPress version 5.7
• PHP version 8.0
• Page caching, Fast CGI (Static Server Caching), and CDN are disabled to start with
• The GTmetrix default server location (Vancouver, Canada, with Chrome (desktop) browser

Also, I’m going to make Agency my homepage. To do this from the WordPress admin, go to Appearance > Customize > Homepage Settings and select this landing page.

And finally, for how I’ll perform this test, it’s a 10-step process that looks like this:

1. Set up a WordPress site with Divi and the Agency layout
2. Run speed test with Google PageSpeed Insights and GTmetrix
3. Divi Optimization
4. Run another speed test
5. Activate Smush and set up recommendations
6. Run another speed test
7. Activate Hummingbird and set up recommendations
8. Run another speed test
9. Activate hosting features (e.g. FastCGI)
10. Run a final speed test

EVERY site is going to be a bit different. Variables include location, amount of images, your host, and other factors that can make a difference. However, this will give you a good idea of how to tweak your own Divi WordPress site for optimization.

Speed Test Without Optimization

WordPress site wiped clean? Check. Divi’s Agency layout installed and activated? Check. All the other variables (e.g. disabled page caching) are in place, too. We’re ready for a speed test and see what we’re looking at!

We’ll run our first speed on Google PageSpeed Insights. When entering the URL, here’s our Google PageSpeed Insights score for desktop:

And mobile:

Let’s have a look at what comes up on GTMetrix:

There’s room for improvement all-around. Now that we know our baseline score, let’s go ahead and optimize Divi.

Divi Optimization

If your theme offers built-in optimization features, we recommend starting with it, as this can often make a significant difference to your site’s overall performance. Divi allows you to optimize your theme layout right from the dashboard.

There are several areas to check out and ensure are optimized before proceeding with using our Smush and Hummingbird plugins.

A few adjustments I’m going to ensure are enabled consist of general optimization and displays.

In the General area of the Divi dashboard, you can make several of these tweaks. You can see I’ve enabled:

• Use excerpts when defined
• Responsive shortcodes
• Responsive Images
• Minify and Combine Javascript Files
• Minify and Combine CSS Files

Everything I’ve enabled is generally recommended adjustments to help site speed and display. There’s another optimization adjustment I made in Divi under Builder > Advanced. I enabled Static CSS File Generation.

The Static CSS File Generation means that custom design styles will no longer generate in-line CSS upon request. Instead, they will serve static files cached by the browser, leading to consuming fewer server resources and boosting load times for your users. These optimization adjustments should give us a boost.

Let’s check out what we score.

With Google PageSpeed Insights, we’re now at a 78.

And for mobile, it’s now up to 30.

GTmetrix has us up a grade with a “B” and a 79% Performance rating.

We set an excellent foundation for the rest of our optimization. Those minor adjustments in Divi itself helped a bit, but we can do better. Let’s move on to…

Optimization with Divi and Smush

I’ve already touched on what all Smush can do. She’s one of the highest-rated and popular image optimization plugins out there — so she’s definitely a good choice to help improve WordPress site speed.

We’ll go ahead and install and activate her first.

Instantly, she lets me know that 12 images are ready to be smushed. Let’s take care of that with Bulk Smushing. Bulk smushing can be done in one click with a tap of the Bulk Smush Now button.

In just a few moments after clicking Bulk Smush, here are the results:

As you can see, I have 909.1KB/27% total savings and 104 images Smushed (many from the initial activation). Let’s go ahead and run another speed test and see what we come up with. First, here’s Google PageSpeed Insights for desktop:

And here’s mobile:

Finally, here’s what GTMetrix has to say:

As you can see, the scores went up just by activating Smush. Google PagesSpeed Insights went from 78 to 82 on desktop and 30 to 51 on mobile. With GTMetrix, the score improved as well. It remains a B. However, the Performance percentage went up from 79% to 83%, and the Structure stayed the same.

It’s a great start, so let’s keep going.

Optimizing Divi with Hummingbird

Hummingbird is the perfect teammate for Smush, considering she handles the other areas of optimization with text compression, preload key requests, can eliminate render-blocking resources, and more things that I touched on earlier.

I’m going to keep Smush active and now install Hummingbird. The first thing she recommends is a Performance Test. You can do that by clicking Test My Website, and she’ll get to work.

After running the test, she came up with a Performance Score of 82/100 and had three opportunities to check out for improvement.

The opportunities for improvements consist of:

• Reduce initial server response time
• Eliminate render-blocking resources
• Remove unused CSS

Next, I’m going to run Hummingbird’s Asset Optimization test. We’ll run this with Page Caching and CDN disabled. This is done directly from Asset Optimization and then click Re-Check Files. Once completed, she then compiled a list of recommended fixes.

There are quite a few…

From this point, you can go through and manually implement each one of Hummingbird’s recommended fixes, or you can tackle them in bulk.

Let’s go ahead and bulk update the CSS and JavaScript. You can do this by clicking on the Bulk Update. From there, we’ll select Compress and Combine.

I also moved files to the footer, except for jquery-core and j-query migrate. This can be done from the Bulk Update area. After doing this, I ended up with a slight improvement. First, Google PageSpeed Insights desktop:

Then, Google PageSpeed Insights mobile…

And finally, GTmetrix…

After testing a few more times and getting a little bit better page speed, I decided to go with the experts’ advice and optimize the assets with the Automatic/Speedy option.

Depending on the time you have, with a few tweaks here and there, you might be able to improve your score better manually. Automatic optimization can help make this process easier.

Regardless, I wanted to see if there was a difference. When I tested it with automatic optimization, it was interesting to see. I had improvements all-around. With Google PageSpeed Insights for desktop:

Google PageSpeed for mobile…

And finally, GTmetrix…

Considering I was getting a better score with automated optimization, I left it on that. However, you may want to fine-tune yours and see what you come up with manually.

Asset optimization is a process that may take a while and varies depending on your site and theme. Hummingbird gets these recommendations straight from Google. You can find more about this in our documentation.

Next, we’ll end with Reduce Initial Server Response Time.

To do this, it’s just a matter of simply clicking Configure Page Caching from the recommendations. Then, it takes you to a point where you can activate it by clicking Activate.

And like that, we activated page caching.

As for the last recommendation mentioning upgrading SSD storage and RAM options via your hosting, we’ll leave that alone, too.

This website isn’t going to be getting a lot of traffic, and it’s not necessary to upgrade. However, if you DO have a Divi site with a lot of traffic (which is hopefully the case), upgrading SSD storage and RAM is highly recommended.

We can help with this through our hosting. Plus, our 24/7 support is always available to answer any questions.

Let’s see where we stand now that we activated page caching.

First, we’ll check out Google desktop:

And now Google PageSpeed Insight for mobile:

Finally, it’s on to GTmetrix:

For the most part, the scores keep going up and up! Google PagesSpeed Insights went from 87 to 90 on desktop and stayed at 59 on mobile. With GTMetrix, the score improved from a B (81% Performance and 98% Structure) to an A (96% Performance and 98% Structure).

I think now is a good time to touch on something. A question you may be asking yourself is:

What’s up with low mobile scores?

You can see that our score for mobile on Google PageSpeed Insight isn’t anything to write home about. So, what’s going on with that?

First off, this is going to vary for everyone, depending on your circumstances. The mobile connection is slower, so it’s a bit more challenging to get a good read from Google PageSpeed Insights.

There are other factors. For example, you may have 4G internet service instead of 5G, impacting speed.

Here are some other things to keep in mind:

• PageSpeed Insights stimulates the cell network at a reduced speed
• All Mobile devices have varying device-specific CSS rules

For more on this, I’ll refer you to Google. They offer some insight into their mobile analysis.

Further Optimization in Hummingbird and With Your Host

To ensure our Divi site is running at top speed, we’re going to make just a few additional tweaks in Hummingbird and with your host. This will enhance performance even further for our site.

A tweak you can make in Hummingbird is the CDN. It doesn’t matter whether you’re hosting with us or not. You can enable your hosts’ CDN with one-click right in Hummingbird under Asset Optimization.

One-click is all it takes.

A good CDN can improve a site’s speed by reducing server lag by storing static resources on a network of faster loading and better-located servers to your own. For more on CDNs and why they’re beneficial, be sure to check out this article.

If you are hosting with us, head into The Hub for another adjustment. We’re going to turn on Static Server Cache to use FastCGI. You can do this from The Hub by going to Tools and flipping it on with one-click.

With these tweaks from Hummingbird, Smush, the Divi dashboard, and hosting, we’re optimized for speed! Let’s run some final speed tests to see where we end up.

First, we’ll look at Google PageSpeed Insights for desktop:

By turning on our CDN and FastCGI, our score instantly increased a couple of points. We can probably adjust and test a few things in the Hummingbird Asset Optimization area to see if we can get closer to 100. Still, this is a passing grade that I’m happy with.

Let’s check out mobile:

So, though it’s gone up a LOT, it’s not the best number. However, again, there are a ton of variables that can affect this. This will vary depending on your location, internet speed, and more.

Though it would be nice to have a higher score on this, I have to keep in mind that this is different across the board.

With that being said, let’s have a look at GTmetrix:

We still have our “A,” which I’m pleased with. As you’ll recall, we started with a “C”! After all of our tweaks and adjustments with Hummingbird, Smush, Divi, and hosting — what’s the difference?

To sum up, our optimization performance, let’s take a look at what we started with from the very beginning and then what we ended up with.

Our Google PageSpeed Insights originally was:

• 72 for Desktop
• 27 for Mobile

And we ended up with:

• 95 for Desktop
• 61 for Mobile

A 23-point, 31.9% improvement for desktop and a 34-point, 126% improvement for mobile! Our GTmetrix Grade originally was:

• A grade C
• 71% Performance
• 96% Structure

And we ended up with:

• A grade A
• 96% Performance
• 98% Structure

That’s a three-grade improvement and a 25% increase in performance, and a 2% improved structure! Now that it’s all said and done, I can say the results speak for themselves.

Again, every website will be different. You may have to make some additional changes to improve performance (e.g. hosting, Hummingbird PageSpeed Insight suggestions, etc.); however, you can expect better optimization using the methods in this post.

More Tips to Enhance Divi Optimization

Beyond having Smush, Hummingbird, and good hosting, here are some other tips to enhance your Divi optimization for speed. Some of these touches on points mentioned already; however, it’s a quick rundown of ways to keep your Divi site optimized.

• Database Optimization and Cleanup: WordPress files are sorted in your database by tables. Whenever you add new data to your site (e.g. plugins), new tables and data are created. The more tables and data made, the messier it can get, slowing down your site. It’s essential to clean up your database. Find out more in our article, Optimizing Your WordPress Database — A Complete Guide.
• DNS Optimization: When a user visits your URL to your Divi site, the first thing to happen is called a DNS Lookup. Your page may have multiple domains that need to be accessed on your site to get the page to appear. To boost your DNS lookup speed, our hosting can help. We use DigitalOcean, which according to DNSPerf, ranks in the top 5 best-performing DNS providers on the web.
• Good Hosting: This is an obvious statement, but it’s vital to have a good host. The fully dedicated managed hosting we offer features object and page caching, IPv6 support, and our CDN sites fly. Whether you host with us or not, be sure your hosting provider has you set up for speed.
• TTFB Optimization: TTFB (Time to First Byte) is the time it takes the user to retrieve the first byte of website data from your host or server, making it the waiting period before any data is received. Ensuring it’s optimized is important. There’s a lot to TTFB optimization, so be sure to read more about it here.
• Caching: This is a broad category when it comes to optimization. There is page caching, browser caching, CDN caching, and object caching. We talked about how our hosting, Smush, and Hummingbird can help. For more information, be sure to read our article on the types of web cache and enhancing your site’s optimization.
• Minification and Aggregation: Minification will make your site files smaller. Aggregation consists of combining the site’s files to reduce the total requests on the page. This is where Hummingbird can help. Read our documentation for detailed information.
• Gzip Compression: Gzip Compression compresses your webpages and style sheets before sending them to your visitors’ browser, hence increasing loading time. Hummingbird takes care of this. You can find out more about Gzip Compression in our documentation.
• Quality Plugins: Be sure to use up-to-date, high-rated plugins with a good reputation. Plus, if you’re not using a specific plugin, delete it from your admin.
• Latest PHP Version: It’s recommended to have the latest PHP version for your Divi WordPress site. If you’re hosting with us, you can do that directly from The Hub. Also, find out more information in our article all about keeping your PHP up to date.
• Reduce Divi CLS (Cumulative Layout Shift) Scores: Our member, Lee, has a series about reducing CLS scores in Divi. CLS scores are an important metric for measuring visible stability. It assists with how often users experience unexpected layout shifts. A good score to have for this is 0.1 or less.

Troubleshooting

You may want to disable page caching in Divi if you’re using caching in Hummingbird if you experience one (or several) of the following issues:

• The Divi site quickly loses all styling and looks awful, however, it displays well when logged in.
• Sections and modules have incorrect spacing (padding and margin), but display correctly when using the visual builder
• WordPress site has lost styles, but refreshing it eight or nine times corrects the issue
• You get the error “et-core-unified-123.min.css not found” when accessing developer tools and viewing the JS console

The reason this can happen is when you enable Page Caching in Hummingbird, it caches the entire website’s HTML code. Plus, it will combine and minify most of the javascript and CSS code.

When you update Divi in any way, it will create a new stylesheet with a new name. The name may follow the same format (et-core-unified-123.min.css not found), however, the “1,2,3” part differs each time as it is generated by the date and time when it was created.

That means, when a user accesses your WordPress site, Hummingbird has a cached version of your HTML, but it is linked to the old CSS file. And that leads to not finding results in your site loading without any styling.

The fix is to go into Divi>Theme Options and scroll down to the bottom. Just about the Custom CSS, you’ll see the options to Minify and Combine Javascript Files and Combine CSS Files.

Disable both options, and then, scroll back up and go to Builder > Advanced> and disable Static CSS File Generation.

This should fix the issue if you have this problem occur and it’s a quick fix (and nothing to worry about). Of course, if there are still problems, you can always reach out to our 24/7 support and we can help.

Incorporate these tips, along with adding Smush and Hummingbird, and your Divi site will be as optimized for speed as you can get. For a more detailed look at optimization, you can find out more in their article about optimizing Divi.

Speed Optimization Divi-nity At Last!

Optimizing your Divi WordPress site for speed isn’t that difficult with the tools and resources in place. And as you just read, it can be optimized with a few clicks and adjustments with Smush and Hummingbird (for free!).

When you add in good hosting, your Divi site can reach maximum speed and in no time.

If you haven’t tried Divi, be sure to check them out with their risk-free yearly or lifetime membership.

Likewise, if you’re not a WPMU DEV member, give us a try with a 7-day free trial. With that, you also get immediate access to Smush Pro and Hummingbird Pro. The Pro options include advancements, such as 45 point image CDN, Super Smush – 2x compression, automated and white-labeled performance reports, advanced asset optimization, 24/7 support — and more!

The best part is, coming soon, Hummingbird Pro will automatically compress and optimize your Divi theme files with a click of a button!

Stay tuned for updates on this. In the meantime, enjoy your Divi’s site speed. It should be…Divi-ine.  

Contributors

This article was written in collaboration with:

Mike B. — DiviDuck. Mike loves playing around with Divi to see what it can do. Every now and then he stumbles upon something cool and thinks everyone needs to know about it. Today might be such a day.

***