How To Optimize WPBakery Sites Using Free Smush And Hummingbird Plugins

No Comments

WPBakery is one of the world’s most popular WordPress page builders. Learn how to speed up and improve your site’s performance with the WPBakery plugin installed.

In this tutorial, I’ll show you how we took a site using WPBakery from this…

GTmetrix report.
GTmetrix results for WPBakery site before optimization.

To this, using our free plugins Smush and Hummingbird

GTmetrix report
GTmetrix results for WPBakery site using free Smush and Hummingbird plugins.

And finally to this, after some additional tweaking*…

GTmetrix report.
GTmetrix results after full optimization. * These results include using Smush Pro features.

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.

It’s time to get cooking…

1. WPBakery Overview

While there are over a dozen page builders for WordPress, WPBakery (formerly Visual Composer) 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.

BuiltWith.com - WPBakery usage statistics.
Don’t think big…think Mega! WPBakery usage statistics source: BuiltWith.com

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.

While the extra codes added by page builders may not be necessary to load specific pages on your site and are generally only a few hundred kilobytes, they are necessary for your website as a whole.

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.

Page with WPBakery deactivated.
Yiikes…who’s gonna clean this up?

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.

Some themes provide loads of optimization settings and tweaking these can make a massive difference.

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

Avada WordPress Theme - Performance Options.
Optimizing your theme can make a huge difference to your site’s performance.

Go through your theme’s documentation and optimize its performance settings if available. And they do make a massive difference.

Hosting

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

You don’t have to be a rocket scientist to work out that can reduce your page loading times significantly by choosing a fast web host.

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.

Hummingbird - Your server is runng the HTTP/2 protocol notification.
HTTP/2 servers provide a performance boost to sites and improve Google PageSpeed Insights scores.

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

CDN

A Content Distribution Network or CDN can further reduce your page load time by serving your site’s files from multiple data centers that are closer to your users.

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.

It’s important to note, however, that caching distorts page loading test results because it serves users a stored version of the site’s page, so any tests using caching turned on are not actually measuring the delivery of a page from an initial request to the original server where the site is stored.

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.

Widget optimization includes not only deleting unnecessary widgets that you don’t need but also removing them from places where they don’t need to appear (e.g. include widgets on your blog posts but remove them from pages like your home page, contact us, about us page, etc.)

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

As this post is all about speeding things up, I’ll skip the parts where we show you how to set up hosting for your site, how to fully configure our Smush and Hummingbird plugins, and how to use page speed testing tools like GTmetrix and Google PageSpeed Insights to save time and get to our testing results faster.

If you need help with the above, see our in-depth tutorials below:

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 set up a brand new WordPress installation hosted on our basic WPMU DEV Managed WordPress hosting plan (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).

Essentially, everything remained the same through the test. I simply turned on more options incrementally before re-testing, as detailed in the results section below.

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 optimizes sites using different caching types (e.g. Page caching, Browser caching, RSS caching, and Gravatar caching) and compression features (e.g. GZip compression). As mentioned earlier, we started with Page caching disabled. We also disabled Gravatar caching and RSS caching. Browser caching and gzip compression are turned on by default on most hosts. There’s no easy way to turn these off without modifying web server configurations, so these were left on for the duration of the test
  • 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.

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.

Brand New WordPress Installation
My brand new WPBakery site…hot and fresh out of the WordPress oven!

I then uploaded the Shopkeeper eCommerce theme.

Shopkeeper - eCommerce Theme for WordPress.
Shopkeeper is a popular WPBakery eCommerce Theme for WordPress.

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

Shopkeeper Installation Wizard.
WPBakery comes bundled with this theme.

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

Shopkeeper Demo Content Import screen.
Let’s import everything into the site and push this baby to the max!

With the WPBakery plugin installed and activated and my demo store’s content imported, my test site was now ready for testing.

Shopkeeper demo content.
Toss in lots of pages with loads of images…now we’re cooking!

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…

Google PageSpeed Insights - Initial Mobile results.
My initial PSI mobile results.

My initial Google PageSpeed desktop test results…

Google PageSpeed Insights - Initial Desktop results.
My initial PSI desktop results.

And my initial test results on GTmetrix.

GTmetrix report
What GTmetrix thinks of my non-optimized site.

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

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

Smush Setup
Hey Smush, thanks for offering to do the heavy lifting, but let’s keep it simple for now.

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.

Smush Dashboard after setup.
I’ll just bulk smush these few additional attachments.

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

Smush dashboard - all images are smushed.
Over 2330 images smushed. Nice work, Smush!

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.

Google PageSpeed Insights - Mobile results after setup.
According to Google’s mobile PSI score, I’ve reached my 30s.

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

Google PageSpeed Insights - Desktop results after setup.
And thanks to Google’s desktop PSI score, I’m now into my early 50s…

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

GTmetrix results after initial setup.
That looks more like a C+to me!

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

Before adding Hummingbird to the mix, let’s enable a new Smush feature created especially for WPBakery plugin users.

5. WPBakery and Smush WPBakery Integration

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

WPBakery - Custom sized images.
Some themes that use WPBakery let you add custom-sized images.

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.

Smush WPBakery integration.
Got special image requirements? Smush offers WPBakery integration for custom-sized images.

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

Bulk Smush images after WPBakery integration.
Turning on the WPBakery integration brought up 85 images that needed resmushing.

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

The PageSpeed Insights mobile score improved by one point.

Google PageSpeed Insights - Mobile results after Smush WPBakery integration.
There is a point to be made for enabling Smush’s WPBakery integration feature.

As did my PageSpeed Insights desktop test results.

Google PageSpeed Insights - Desktop results after Smush WPBakery integration.
Here’s another point worth making…remember to turn on the Smush WPBakery integration feature!

My GTmetrix results also showed a slight improvement.

GTmetrix results after Smush WPBakery integration.
I see a C and that’s no B.S. (B Score).

My scores are slightly better after turning on Smush and the WPBakery integration feature, but we’re not done yet.

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

6. WPBakery, Smush, and Hummingbird

Hummingbird installs from your WordPress dashboard just like every other free WordPress plugin.

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

Hummingbird activated in WordPress site.
WPBakery with activated Hummingbird and a side of Smush. DevMan, give my compliments to the chef!

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 provides enhanced minify compression (with 2x the regular optimization of Hummingbird Free). I couldn’t disable this feature without changing my entire testing configuration, so we’ll just run 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.

Hummingbird Dashboard- Run Performance Test.
Click the button in Hummingbird’s Dashboard to run a Performance Test.

Here are the results of my initial test.

Hummingbird dashboard - Performance test results.
My Performance Test results immediately after installing Hummingbird.

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.

Hummingbird Asset Optimization with CDN disabled.
Look, Mom, no CDN!

Tip: Make sure to check Hummingbird’s documentation. It has an excellent section on Asset Optimization tips. I recommend reading that section first if you plan to use Hummingbird’s advanced optimization features.

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!

Initially, I went through and started to manually implement each of Hummingbird’s recommended fixes.

Hummingbird - Asset Optimization
I’m fixing to get through this list.

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 kept going and noticed my scores gradually improving.

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

Hummingbird Perfornance test results.
Speaking of tweaking… my score’s freakin’ peaking!

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

PageSpeed Insights mobile score.
Girl, we couldn’t get much higher…or could we?

My desktop score…

Google PageSpeed Insights desktop score.
C’mon baby, light my fire.

And my GTmetrix score…

GTmetrix report
Try to set my site on….fi-aaaarr!

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

Over tweaking sites can break up code on pages.
Uh oh…I wonder if anyone is going to notice that my home page looks different.

Fortunately, Hummingbird’s recommended fixes cannot cause permanent damage to your site, especially if you follow these tips:

  • 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 somehow truly stuff up, don’t panic. Start by resetting module settings, then try disabling the problematic module. If these measures don’t fix the issue, simply disable the plugin to restore your site to its pre-optimized state and contact our support team. They will help you troubleshoot any issues (make sure to also read the plugin’s documentation section on troubleshooting issues with Hummingbird.)

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.

Hummingbird automatic asset optimization settings.
Hummingbird’s developers recommend using Auto-Speedy to optimize your site’s assets.

Unless you are going for a custom setup with deferring and inlining of assets, choose one of Hummingbird’s automated options: Speedy or Basic. You can read how each of these options works by clicking 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 happy to leave things at that and simply install the free plugins on your WPBakery site, you can see that these will improve your site’s speed and performance.

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.
Optimizing WPBakery Site with Free Smush and Hummingbird.
These are tasty improvements!

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.

However, I like my site optimization really well done with no half-baked measures.

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

7. WPBakery Site, Smush Pro, and Hummingbird

Because everything was already set up, I was curious to see just how far I could optimize my WP Bakery site with the additional features of Smush Pro and Hummingbird Pro.

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

So, I activated the Smush CDN

Smush CDN - Get started screen.
Multiply speed and savings? Yes, please!

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

Smush - WebP activation screen.
Even faster streaming? I’ve gotta go WebP!

As I’m hosted with WPMU DEV, the plugin automatically preconfigured WebP conversion on my site. All I had to do was hit the Bulk Smush button.

Smush Dashboard.
One-click bulk smush optimization…I’m lovin’ it!

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:

With Hummingbird, I:

  • Left Auto-Speedy mode to handle all of the site’s asset optimization.
  • Enabled Page caching.
  • Switched on the recommended features in Hummingbird’s Advanced Tools screen.
Hummingbird Advanced Tools - General tab.
Follow General tab’s instructions to reduce page load times and soldier on!

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…

Hummingbird Performance Test - Desktop.
Tweaking fantastic!

Mobile…

Hummingbird Performance Test - Mobile.
Not bad…could use a pinch more!

Google PageSpeed Insights

Desktop…

Google PageSpeed Insights Score - Desktop.
I love my greens!

Mobile…

Google PageSpeed Insights Score - Mobile.
Sixty-nine and feeling fine!

GTmetrix

GTmetrix Performance Report.
Sweet…

8. WPBakery Optimization Takeaway

Whew…we’ve worked up quite a sweat here working away with WPBakery on my testing kitchen, but I think the proof is in the pudding.

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.

Optimizing WPBakery Site with Smush and Hummingbird.
WPBakery site optimized with the whole enchilada!

Anyone with eyes bigger than their stomach will be quick to notice that the above recipe works for optimizing any site, using any theme. It’s not specific to WP Bakery only.

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 want to go extra lean and feel the heat, then turn on Smush and Hummingbird’s Pro features and consider using our managed WordPress hosting for additional speed and performance features like CDN and server caching, plus dedicated 24×7 support served fast, fresh, and hot.

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

Bon appetit!

    About us and this blog

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment