“A Step-by-Step Guide to Enhancing WPBakery Sites with Free Smush and Hummingbird Plugins”

Discover how to enhance and accelerate your website’s functionality with the widely-used WPBakery WordPress page builder.

In this guide, I will demonstrate how we transformed a website that utilized WPBakery from its original state…

To this, using our free plugins Smush and Hummingbird…

And finally to this, after some additional tweaking*…

I’ll also talk about a new integration feature for WPBakery available in our award-winning image optimization plugin, Smush, and testing it along with everything else.

In this post, I’ll take you briefly through each of the following stages of my testing process so you can replicate this on your own site:

1. WPBakery Overview
2. Methodology
3. WPBakery Site Setup
4. WPBakery and Smush
5. WPBakery and Smush with WPBakery Integration
6. WPBakery, Smush, and Hummingbird
7. WPBakery, Smush Pro, and Hummingbird
8. WPBakery Optimization Remarks

Just follow the recipe below to speed up and improve your site’s performance with WPBakery.

Let’s start preparing some food…

1. WPBakery Overview

While there are over a dozen page builders for WordPress, WPBakery remains one of the world’s most popular WordPress page builder plugins.

In fact, according to BuiltWith.com, WPBakery is a “mega” technology. It is used on over 3.6 million websites around the world and it’s the 5th most used WordPress plugin.

As many of our members use the WPBakery page builder plugin on their sites, we decided to look at ways to help improve site speed and performance.

Basic Optimization Tips for WPBakery WordPress Sites

Before we get into optimizing a WPBakery site using free plugins, let’s go over some basic optimization points.

Page Builders and Additional Code

A common characteristic of almost all page builders is that they add codes to your web pages’ main HTML file and additional files (e.g. CSS and JS files).

While these codes all help you “build nicer pages” using flexible layouts, a range of styling options, and wonderful design elements, they also affect your website speed, as it makes your pages heavier and slower to load in users’ web browsers.

The additional codes that page builders insert may not be essential for loading individual pages on your site and typically only amount to a few hundred kilobytes, but they are crucial for the overall functionality of your website.

The accumulated effect of these additional codes can increase your web page load time anywhere from a few hundred milliseconds to a few seconds, as web browsers not only have to download these additional codes but also execute them in order to display your pages to visitors.

If you plan to use WPBakery, you will want to stick with it for a very long time, as deactivating the plugin on your site will leave behind a long mess of shortcodes that you will need to remove from your posts and pages.

As you will see shortly, we will try to optimize WPBakery to reduce the additional load time caused by these extra codes using our Hummingbird plugins to minify our site’s HTML, CSS, and JS files.

Minification is the process of removing white space, carriage returns, and unnecessary characters. This results in smaller files which help your site load faster.

Theme

One of the best ways to start optimizing sites is by optimizing your theme first.

Certain themes offer a plethora of customization options, and adjusting these settings can result in significant improvements.

If you use a theme like Avada, for example, there is a whole section of options to help improve performance (Avada > Options > Performance).

Review the documentation for your theme and adjust the performance optimization settings if they are offered. The impact of these changes can be significant.

Hosting

Your hosting setup has a huge impact on your site’s speed and performance.

It’s not rocket science to figure out that choosing a fast web host can significantly decrease your page loading times.

Something you may not be aware of, however, is that Google recently updated PageSpeed Insights to improve scores based on the faster HTTP/2 protocol.

So, make sure that your server supports the HTTP/2 protocol if you want faster site performance and better speed test scores.

CDN

A CDN, or Content Distribution Network, can help decrease your website’s loading time by delivering your site’s content from various data centers that are located closer to your visitors.

As we are testing with our free plugins first and CDN is a feature of the “Pro” versions, we’ll keep CDN disabled during the initial test phase. We’ll turn it back on later when we look at ways to further optimize our test site.

Caching

Additional ways to further reduce your page load time include caching.

However, it should be pointed out that caching can skew the results of page loading tests, as it presents users with a pre-saved version of the website’s page. Therefore, any tests that have caching enabled are not accurately assessing the delivery of a page from the initial request to the server where the site is hosted.

For this reason, we’ll start our testing with Page caching disabled. We’ll then enable page caching later on just to see what kind of a difference in overall performance it can make to our test site with WPBakery installed.

Image Optimization

Compressing images helps your pages load faster and your site perform better by reducing image size without loss of image resolution.

We’ll be testing our site using our free image compression and optimization plugin, Smush.

Remove Unnecessary Elements

Some additional things that can affect the speed and performance of a WordPress site using WPBakery include removing any unnecessary elements like widgets, fonts, plugins, themes, etc.

For example, social media widgets often load an excessive amount of JavaScript and CSS files, which can slow down your server.

Optimizing widgets involves eliminating those that are not needed and also ensuring they are not displayed in areas where they are not required (for example, include widgets on your blog posts, but do not display them on pages such as your home page, contact us page, and about us page).

Additionally, make sure that you are using the most up-to-date version of WPBakery and that your site, theme, and plugins are also all up-to-date. Outdated themes and plugins can conflict and slow down WPBakery performance.

Now that we have looked at various factors that can affect site optimization, let’s look at the specific methodology used to test our WordPress WP Bakery site.

2. Methodology

This article focuses on accelerating the process, so I will omit the sections on setting up hosting for your website, configuring our Smush and Hummingbird plugins, and utilizing page speed testing tools such as GTmetrix and Google PageSpeed Insights. This will allow us to quickly move on to our testing outcomes.

For assistance with the above information, refer to our detailed tutorials provided below:

• Hosting: If you’re just starting out, check out our guide to choosing the right type of hosting for your needs. Undecided about where to host your site? We offer blazing-fast hosting and unbeatable value for money. If you are an experienced WordPress user, then check out our much raved about test and comparison of different managed WordPress hosting providers (hint: we didn’t win!) Also, see the methodology we used to test the hosting speed of our new data centers.
• Smush: Check out our tutorial series on how to get the most out of Smush.
• Hummingbird: Additionally, take a look at our instructional series on maximizing the benefits of using Hummingbird.
• Speeding Up WordPress: If you need to get up to speed with ways to speed up WordPress, check out our ultimate guide to speeding up WordPress and our tutorials on page speed tools like using GTmetrix and this post on the challenges of getting a perfect score using Google PageSpeed Insights.

Additionally…

Please go through the sections on this post before optimizing your WPBakery sites: We recently published a tutorial on how to optimize Elementor sites. It contains a detailed walkthrough of all the steps we recommend using to configure and optimize our Smush and Hummingbird plugins.

Now, to the methodology used in this test:

• I established a fresh WordPress setup on our entry-level WPMU DEV Managed WordPress hosting package (Bronze).
• WordPress version = 5.6.2
• PHP version = 8.0
• The only plugins we’ll install on our test site are Smush and Hummingbird (Note: The WPMU DEV Dashboard plugin is installed automatically on sites hosted with WPMU DEV).
• Page caching and hosting and Pro plugin optimization features like Static server caching (Fast CGI) and CDN were disabled during our initial test phase.
• The same WordPress theme (Shopkeeper) and theme configurations and options were used throughout all tests. Note: This theme doesn’t have its own optimization settings, so this will be done using the plugins.
• WPBakery Builder plugin version = 6.5.0 (note: the plugin came bundled with the theme and that was the highest version of the plugin I could update to.)
• The same GTmetrix default server location and browser were used throughout the test (test server location = Vancouver, Canada. Browser = Chrome (Desktop) 86.0.4240.193, Lighthouse 6.3.0).

Basically, there were no significant changes throughout the experiment. I gradually activated additional features before conducting another test, as outlined in the following results section.

Additional Notes and Disclaimer:

• The site is hosted on WPMU DEV hosting, so installing Smush and Hummingbird using WPMU DEV’s Dashboard (a members-only feature) automatically upgrades all plugins to Pro. I performed my initial tests with Pro features disabled to simulate using our free plugin versions.
• Hummingbird enhances website performance through various caching methods such as Page caching, Browser caching, RSS caching, and Gravatar caching, along with compression techniques like GZip compression. As previously stated, we began with Page caching turned off. Additionally, we deactivated Gravatar caching and RSS caching. Typically, Browser caching and gzip compression are enabled by default on the majority of hosting services. Disabling these features would require alterations to the web server settings, so they remained active throughout the testing period.
• As our developers like to continually remind us, many variables can affect the performance and results of testing sites. This includes using different themes, plugins, hosting environments, configurations, the alignment of the planets, etc. We’ll discuss this a little more at the end of this post.
• If you want, you can create a full backup of your site, but it’s not necessary, as Smush and Hummingbird will not break your website.

[Editor’s note: The tests below were done with earlier versions of Smush and Hummingbird. Our plugins have been redesigned to allow for white labeling and reselling].

Now, for the test results.

3. WPBakery Site Setup

As stated, All tests were performed on a brand new WordPress installation on WPMU DEV’s managed WordPress hosting.

I then uploaded the Shopkeeper eCommerce theme.

Although WPBakery is a standalone premium plugin, many themes come bundled with the plugin (including Shopkeeper).

I then imported the theme’s demo content, as I wanted loads of pages and large images.

I have successfully installed and activated the WPBakery plugin and imported the content of my demo store, making my test site prepared for testing.

Before touching anything, I ran some page speed tests on my site using Google PageSpeed Insights and GTmetrix.

Here are my initial Google PageSpeed mobile test results…

My initial Google PageSpeed desktop test results…

And my initial test results on GTmetrix.

With these initial benchmarks recorded, the next step was to install our free Smush and Hummingbird plugins.

We’ll do it one at a time and see how these affect my site’s scores.

4. WP Bakery and Smush

[Editor’s note: Since this post was written, we’ve made significant improvements to our Smush plugin and introduced new features like Ultra Smush for even better performance.]

I started by activating Smush, WPMU DEV’s image optimization and compression plugin.

After installing Smush, I ran a check to see if any images needed compressing.

Smush automatically compressed over 2,300 images and detected additional attachments that needed re-smushing.

After Bulk smushing all images, the test site was ready for another round of page speed testing.

By simply turning on Smush and leaving everything else on the site untouched, I got a slightly better score on Google PageSpeed Insights’ mobile test results.

And an increase in my Google PageSpeed Insights’ desktop score (plus the score has gone from red to yellow…yay!).

My GTmetrix grade has also gone up from “D” to “C”.

Okay, that wasn’t bad for just turning on Smush.

Let’s activate a new feature designed for WPBakery plugin users in Smush before we incorporate Hummingbird.

5. WPBakery and Smush WPBakery Integration

In WPBakery, certain themes let you add custom image sizes.

Smush auto optimizes images in the WordPress media library. Since WPBakery’s custom-sized images are not your typical registered WordPress thumbnails, we have developed an integration to hook into the image resize functionality in WPBakery.

To enable this feature in Smush and allow the plugin to smush images resized in WPBakery’s editor, head over to the Integrations screen and simply toggle the switch on.

Note: After enabling the WPBakery integration in Smush, you may see additional images that need bulk smushing.

I bulk smushed WPBakery’s custom-sized images, then ran the speed tests again.

The mobile score for PageSpeed Insights increased by one point.

As did my PageSpeed Insights desktop test results.

My GTmetrix results also showed a slight improvement.

After activating Smush and the WPBakery integration feature, I noticed a slight improvement in my scores, but there is still work to be done.

Leaving the features of Smush Pro disabled for now, let’s activate Hummingbird on the site.

6. WPBakery, Smush, and Hummingbird

[Editor’s note: Since this post was written, we’ve also made significant improvements to our Hummingbird plugin and introduced new performance-boosting features like Using Delay JavaScript Execution and  Eliminate Render Blocking Resources and Critical CSS.]

Just like any other free WordPress plugin, Hummingbird can be installed directly from your WordPress dashboard.

In my case, however, as I have the WPMU DEV dashboard installed on my site, I’ll just activate the plugin there.

As you can see, the WPMU DEV dashboard plugin detected that I am a member and automatically installed Hummingbird Pro.

To simulate the free plugin version, however, I’ve ignored time-saving Pro features like automated scanning and left uptime monitoring disabled.

We’ll also leave Hummingbird Pro’s CDN hosted minification disabled, as we are not enabling the CDN at this stage.

Notes:

• Hummingbird Pro offers an improved minify compression feature that offers twice the optimization of the free version of Hummingbird. I was unable to turn off this feature without altering my entire testing setup, so we will proceed with it.
• Hummingbird Pro works seamlessly with Smush Pro’s image optimization. This, however, won’t affect our results right now as we are leaving all Smush Pro features disabled until later in the test.

With these explanations out of the way, let’s return to the test.

Initial Hummingbird Performance Test

After installing and activating Hummingbird, I ran the plugin’s Performance Test to get detailed insights on ways to improve the site’s performance.

You can run a performance test from the plugin’s dashboard or go to Hummingbird > Performance Test and click on either the Run Test or New Test buttons.

Here are the results of my initial test.

Initial Hummingbird Asset Optimization Test

After the Performance Test, I ran Hummingbird’s Asset Optimization test.

This was done with Page caching and CDN disabled.

Suggestion: It’s a good idea to review Hummingbird’s user guide, particularly the section on Asset Optimization advice. If you intend to utilize Hummingbird’s sophisticated optimization capabilities, I advise starting with that section.

After the Asset Optimization test, Hummingbird returned a list of recommended fixes.

Better tell my secretary to hold my calls and cancel all bookings for the week so I can get through this list of recommended fixes!

At first, I began to manually apply each of the suggested improvements from Hummingbird.

The recommended way to optimize assets manually is to fix one item at a time and constantly check your site to make sure that everything is working correctly.

So, that’s what I did. After every few fixes, I ran another set of Performance Tests in Hummingbird plus new Google PageSpeed and GTmetrix tests.

I continued to persevere and observed a steady increase in my performance scores.

For example, here is my Hummingbird Performance Test result after some additional tweaking…

Here is my mobile score for Google PageSpeed Insights after some more Hummingbird magic…

My desktop score…

And my GTmetrix score…

Note: Occasionally, one of the recommended fixes would break up the site.

Luckily, the suggested solutions provided by Hummingbird will not result in any lasting harm to your website, especially if you adhere to these pieces of advice:

• If you are optimizing a lot of assets, give Hummingbird time to process everything. Tweaking assets can take up to 5 minutes for results to kick in.
• If you are implementing optimization fixes one at a time as recommended and something causes an issue, go back and undo the last tweak you made. Your site should return to normal.
• If you find yourself in a situation where things have gone wrong, remain calm. Begin by resetting the settings of the module, followed by deactivating the module causing issues. If these steps do not resolve the problem, deactivate the plugin to return your site to its original state and reach out to our support team for assistance. Be sure to also consult the troubleshooting section of Hummingbird’s documentation for additional guidance.

The best tip Hummingbird’s developers gave me as I manually worked through the list of optimization fixes was to stop optimizing files manually and switch to the automated options. Specifically, I was instructed to switch to ‘Auto-Speedy’ mode, so that’s what I  did.

If you’re not opting for a personalized configuration with delayed and embedded assets, opt for one of Hummingbird’s preset choices: Speedy or Basic. To understand how each of these choices functions, click on the “How Does it Work?” link.

My Optimized WPBakery Site Is Now Ready To Serve, BUT…

So far, I’ve only optimized the WPBakery site using the free optimization features of Smush and Hummingbird.

If you’re content with the current state and just want to add the complimentary plugins to your WPBakery website, you’ll notice an enhancement in your site’s loading speed and overall functionality.

For example, here are the results with my test site:

With Google PageSpeed Insights, my site’s scores went from…

• 27 -> 41 (mobile) = 52% improvement.
• 46 -> 79 (desktop) = 72% improvement.

With GTmetrix, my site’s scores went from…

• D -> B grade.
• 58 -> 82 (performance) = 41% improvement.
• 89 -> 96 (structure) = 8% improvement.

If you are hungry for some WPBakery site optimization using free plugins (and with Smush and Hummingbird there IS such a thing as a Free lunch!) then these results are quite healthy.

I prefer my website optimization to be thoroughly executed without any incomplete efforts.

So, let’s turn up the thermostat and see if we take things even further.

7. WPBakery Site, Smush Pro, and Hummingbird

I was eager to find out the extent to which I could enhance my WP Bakery site using the added functionalities of Smush Pro and Hummingbird Pro, given that everything was already in place.

After all, all’s fair in love, war, and optimizing sites for speed, am I right?

So, I activated the Smush CDN…

I also enabled the option to serve WebP versions of my site’s images on supported browsers.

Since my website is hosted by WPMU DEV, the plugin already set up WebP conversion for me. All I needed to do was click the Bulk Smush button.

Note: If you’re not hosted with WPMU DEV, you will need to configure server rules for your host. For more details, see our WebP documentation section.

Quick Recap

With Smush, I:

• Activated Smush CDN.
• Enabled WebP images, and
• Checked other settings to make sure I’m getting the most out of Smush Pro.

With Hummingbird, I:

• Switched to Auto-Speedy mode to manage the optimization of the website’s assets.
• Enabled Page caching.
• Switched on the recommended features in Hummingbird’s Advanced Tools screen.

My Final Test Results

Here are screenshots from my final test results using Smush Pro, Hummingbird Pro, and WPMU DEV’s hosting…with everything turned up to “11”:

Hummingbird Performance Test

Desktop…

Mobile…

Google PageSpeed Insights

Desktop…

Mobile…

GTmetrix

8. WPBakery Optimization Takeaway

Wow, we’ve definitely put in some hard work using WPBakery in my test kitchen, but the results speak for themselves.

With Google PageSpeed Insights, my site’s scores went from…

• 27 -> 69 (mobile) = 156% improvement.
• 46 -> 93 (desktop) = 102% improvement.

With GTmetrix, my site’s scores went from…

• D -> A grade.
• 58 -> 92 (performance) = 59% improvement.
• 89 -> 99 (structure) = 11% improvement.

With Hummingbird’s Performance Test, my site’s scores went from…

• 45 -> 80 (Desktop) = 78% improvement.

The chart below shows the difference in improvement in my WPBakery WordPress site using the Free vs Pro versions of Smush and Hummingbird.

Individuals who tend to bite off more than they can chew will easily observe that the aforementioned formula is effective for enhancing any website, regardless of the theme utilized. It is not exclusively applicable to WP Bakery.

The only extra ingredient added here was the Smush WP Bakery integration.

Whether your site uses WPBakery, Elementor, or any other page builder, add Smush and Hummingbird to your site optimization mix and you should see some nice speed and performance improvements. Just remember that results can and will vary depending on your hosting set up, plugins, themes, site configuration, etc.

If you’re aiming for maximum efficiency and want to experience the intensity, activate Smush and Hummingbird’s advanced options. For even more speed and functionality, think about opting for our managed WordPress hosting, which includes perks such as CDN and server caching. You’ll also benefit from round-the-clock support that’s delivered quickly, efficiently, and with enthusiasm.

All of this is baked-in with a WPMUDEV membership.

Bon appetit!

Note from the editor: This article was first published in March 2021 and has been revised for precision in December 2023.

WordPress is one of the most popular content management systems in the world, powering millions of websites. WPBakery is a popular page builder plugin for WordPress that allows users to create beautiful, responsive websites with ease. However, as with any website, it’s important to optimize your site for speed and performance. This is where the free Smush and Hummingbird plugins come in.

Smush is a free image optimization plugin that compresses and optimizes your images without sacrificing quality. This can significantly reduce the file size of your images, which in turn can improve your website’s loading times. Hummingbird is a free performance optimization plugin that scans your site for potential speed improvements and provides recommendations on how to fix them.

Here’s a step-by-step guide on how to optimize your WPBakery site with Smush and Hummingbird:

Step 1: Install and Activate Smush and Hummingbird
The first step is to install and activate the Smush and Hummingbird plugins. You can do this by going to the WordPress dashboard, clicking on “Plugins” and then “Add New”. Search for “Smush” and “Hummingbird” and click “Install Now” for each plugin. Once installed, click “Activate” to enable the plugins.

Step 2: Optimize Your Images with Smush
Once Smush is activated, go to the Smush dashboard and click on “Bulk Smush”. This will compress all of the images on your site in one go. You can also set Smush to automatically compress any new images that you upload to your site.

Step 3: Run a Performance Scan with Hummingbird
Next, go to the Hummingbird dashboard and click on “Performance Test”. This will run a scan of your site and provide you with a performance score and recommendations on how to improve it. Some common recommendations include enabling browser caching, minifying CSS and JavaScript files, and optimizing your database.

Step 4: Implement Hummingbird’s Recommendations
Once you have your performance recommendations, it’s time to implement them. Hummingbird makes this easy by providing one-click fixes for many of the recommendations. For example, you can enable browser caching and minify your CSS and JavaScript files with just a few clicks.

Step 5: Monitor Your Site’s Performance
After you’ve implemented Hummingbird’s recommendations, it’s important to monitor your site’s performance to ensure that it’s running smoothly. You can do this by running regular performance tests with Hummingbird and keeping an eye on your site’s loading times.

By following these steps, you can optimize your WPBakery site with Smush and Hummingbird to improve its speed and performance. This can lead to a better user experience, higher search engine rankings, and increased conversions. So why not give it a try?