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

Elementor is no stranger to the WordPress community, considering it’s one of the best and most popular page builders out there. And to make it even better when it comes to optimization, you can enhance a ton with the help of our free plugins: Smush and Hummingbird.

WordPress sites built with Elementor sometimes have unnecessary slow page loading due to several factors, including large images, caching, CDN, and more.

Luckily, with Smush and Hummingbird, you can help alleviate any slowdowns and get your site up-and-running to its full potential.

We’ll have a look at some examples of what all Smush and Hummingbird can do to enhance your Elementor site. Plus, we’ll see some examples of them in action with two popular themes: Hello Elementor and Astra.

We’ll also include some general tips to ensure your Elementor site is up to speed.

In this article, we’ll be going over:

• How to Optimize Elementor Using Smush
• How to Optimize Elementor Using Hummingbird
• Examples of Enhancing Two Top WordPress Themes — Hello Elementor & Astra — with Smush, Hummingbird, and Elementor
• General Tips for Speeding Up Elementor

By the end of this article, you’ll have all the tools and know-how to get your Elementor site optimized for peak performance.

And we’ll show you exactly how we took an Elementor site from a PageSpeed score of 80/100, to 99/100 using just Smush and Hummingbird… so read on.

To get started, we’ll assume you have Elementor (and if you don’t — get it for free here). Also, if you haven’t already, download Smush and Hummingbird.

Smushing All Your Elementor Images in Bulk

Compressing New Uploads Automatically

Super-Smushing for Double the Compression

Adding Larger Images with Smush’s Image Resizing

Converting Your PNGs to JPEGs

Smushing From the Media Library

Lazy Loading

Utilizing Smush’s CDN

here.

in this article.

Smush Pro and well worth using. It boasts a 45-point CDN. Plus, it can automatically resize your images and also convert them to Google’s WebP format.

A CDN will enhance any image-heavy Elementor site’s page speed by storing and serving copies of all of your JPG, PNG, and Gif images from the Smush edge servers.

For advanced options, Smush Pro’s CDN includes serving background images, automatic resizing, WebP conversion, and converting images from REST API requests in WordPress.

Get more detailed information Smush’s CDN here.

How to Optimize Elementor Using Hummingbird

Hummingbird and Elementor make a great team when it comes to making your website quicker. She helps optimize your site’s performance by fine-tuning controls with file compression, minify for CSS & JS, comment lazy loading, and much more.

She’s a 4.5-star rated free plugin with over 100K active installations on wp.org (and counting!).

With her quick scan of your Elementor site, she’ll provide one-click fixes that help speed up your site with ease.

We’ll be going over some snippets of details of all she can do to improve your Elementor site and make it fly. Let’s take a look at:

• • Assessing Your Site with a Performance Test
  • Delivering Faster Pages and Content with Caching
  • Gzip Compression that Reducing File Sizes for Faster Serving
  • Giving Your Page Speed a Boost with Asset Optimization

in our article about optimizing Hummingbird.

many types of caching, which works great when using Elementor with your WordPress theme, due to the various page options.

Her caching abilities include Page Caching, Browser Caching, Gravatar Caching, and RSS Caching. Additionally, if your site is hosted through us, your site speed is enhanced further with Object Cache, Redis Object Cache, and Static Server Cache.

You’ll control every aspect of its caching functionality. This makes Hummingbird perfect for Elementor, considering each page builder is different and contains configurations that will vary.

You can see all the features and get a more detailed look at Hummingbird’s caching in our documentation.

Gzip compression, your Elementor pages can load quicker by compressing your site’s text-based resources into littler and more compact files that reach your users’ browsers faster.

If you’re not hosting with us, you can change your Gzip compression to fit your server type (e.g. Apache) and follow instructions to get it activated.

read our documentation to see how fine-tuned you can make your site for maximum optimization.

Examples of Enhancing Two Top WordPress Themes — Hello Elementor & Astra — with Smush, Hummingbird, and Elementor

Now that we’ve looked at glimpses of what Smush and Hummingbird can do to enhance the performance of your Elementor site let’s take a closer look at specific examples using two popular Elementor themes: Hello Elementor and Astra.

As mentioned before, we will be using the free version of Elementor, so there are no costs involved in this initial setup (again, Smush and Hummingbird are free, too).

This is a new site with no other pages, plugins, or anything installed at first except for Elementor and the theme.

We’ll walk through what it looks like adding all of these features and the difference they make. To break it all down, this is how we’ll do it:

• Set up a WordPress site using Elementor page builder content and theme
• Run speed tests with Google PageSpeed Insights and GTmetrix
• Activate Hummingbird and Smush and set up recommendations
• Run another speed test
• Activate Hosting Features (e.g. fast CGI)
• Run a final speed test

Keep in mind, EVERY site is going to be different. Location, amount of images, your host, and other factors will make a difference. However, this should give you a general idea of what can be done, and then you can tweak it accordingly on your Elementor-based WordPress site.

Hello Elementor

To kick things off, we’ll start with the Hello Elementor theme. This free theme is a favorite amongst Elementor users and was created by Elementor, so you know it’s good.

We’ve set up a site using this theme and have activated the Landing Page – Hotel page from Elementor’s library. This theme features a handful of images and text, making for a good example.

I’ve also made this page my homepage. You can ensure this is done by going to Appearance > Customize > Homepage Settings and selecting this landing page.

Now that this is installed, we’re ready to go! Let’s do a quick speed test on this site. We’ll start with Google PageSpeed Insights.

When entering the URL, here’s our Google PageSpeed Insights score:

Now let’s check it out with GTmetrix.

I’ll note that I’m using GTmetrix’s default settings for server location (Vancouver, Canada) and browser (Chrome). This will not be changed throughout all of these examples.

Let’s go ahead and activate Smush and Hummingbird and see what we come up with.

I’ll start with running a Performance Test with Hummingbird and check out her recommendations.

Once doing that, she mentions we have a score of 56/100 and offers several opportunities, such as preload key requests, eliminating render-blocking resources, reducing initial server response time, and removing unused CSS.

Also, her diagnostics show that we should ensure text remains visible during webfont load.

It also shows that there were 15 passed audits (yippee!).

I’ll go ahead and handle all of the suggestions possible. The dropdown in Hummingbird mentions exactly how to take care of recommendations.

For example, here, Hummingbird shows how to remove unused CSS.

I also activated Hummingbird’s page caching to help with initial server response time, optimized my assets, and combined & compressed assets.

Next, I’ll go ahead and activate Smush.

Right away, Smush points out that I have 61 images and attachments that need smushing, which can help save me an estimated 815.5 kb. I’ll Bulk Smush these in one-click.

After a few moments, here are the results:

As you can see, there are 872.5 kb/9.3% total savings.

Now, let’s go ahead and recheck our page speed.

First, here’s Google PageSpeed Insights:

And here’s GTmetrix:

Even though I’m happy with this score and can’t get much better than this, I’m going to crank things up even further.

I’ll go ahead and turn on our CDN in Hummingbird’s Asset Optimization section. Whether you’re hosting with us or another company, you can turn this on for added optimization.

One-click to turn on the CDN.

For more on CDNs and why it’s beneficial for site speed, be sure to check out this article.

Also, to ensure I have the best speed possible, I’m going to go under Tools in The Hub and flip on Static Server Cache to use FastCGI.

And now, with all of these tweaks in place, my Elementor site using the Hello Elementor theme is optimized for speed!

Let’s now take a look at optimizing the popular Astra theme with Elementor, Hummingbird, and Smush.

Astra

Astra is another extremely popular theme that works well with Elementor. With over 1 million+ active downloads and a rock-solid 5-star review on wp.org, you know it’s a good choice for many Elementor users.

Like with Hello Elementor, we’ve set up a site using this theme and have activated the Landing Page – Hotel page from Elementor’s library.

Also, like with the previous them, I’ve made the Hotel page my homepage.

Let’s go ahead and perform a Google PageSpeed Insight speed test and see how we do.

I ran this test several times and kept getting the same results. It’s a poor score, indeed.

Let’s see how we do with GTmetrix.

Right away, after running it multiple times, it got an “A” right off the bat with a 97% performance score and 95% structure score. Pretty good score! However, as I mentioned previously, this will vary depending on the number of images, location, host, and other factors you have in place.

Also, in case you didn’t know, there are reasons for such drastic differences in scores between Google and GTmetrix due to how they both test. For more information about how they vary when it comes to testing sites, check out this article on GTmetrix’s site.

Now, let’s see if we can improve the score on Google and boost the GTmetrix to an A+ by activating Hummingbird and Smush.

We’ll start with Hummingbird and run a performance test.

As you can see, there are two opportunities for improvement and 17 passed audits.

To improve, Hummingbird is recommending eliminating render-blocking resources and removing unused CSS.

We’ll make Hummingbird’s recommendations and move on to Smush.

With Smush, right away, she tells us there are 15 items to bulk smush, so we’ll go ahead and do that.

Once bulk smushing is over, we’ll run another Google PageSpeed test (since that’s the one that’s fairing so poorly) and see what we’re looking like.

Since it didn’t go up that much, let’s try a few more tweaks.

Smush recommends things for you that can help improve your score. In this example, they include:

• Enabling Super-Smush for advanced lossy compression
• Ensuring images are the rights size for our theme (Astra)
• Enabling resize full-size images to scale big images down to a reasonable size

Now that I made the Smush recommendations let’s check it out again.

As you can see, it went up a bit. We’re not quite at 90-100; however, with some tweaks like turning on Hummingbird’s CDN and also FastCGI, we should be able to hit that high mark.

Before that, let’s see how we’re scoring with GTmetrix.

As you can see, this hasn’t changed much. It was already a good score to start with, and minor fluctuations will occur. It’s essentially the same (which is good).

Finally, let’s put this into high gear.

When turning on the CDN and FastCGI (see an example of how to do so in the Hello Elementor example) our score instantly improved with Google.

We can probably make some fine-tuning in Hummingbird to eventually get that score even higher; however, it’s at a pretty good place. With all of the tools at our disposal, it should stay this way, too — and not drop.

ours here at WPMU DEV. We even offer templates that fit Elementor perfectly for total optimization (e.g. our Charity template).

Using a lightweight theme.

Ensuring your images are optimized with the help of Smush.

Getting rid of slow, outdated, or unused plugins.

Minifying code and concatenate files

Using page caching to generate static HTML versions of your content with the help of Hummingbird.

Keep these tips in mind to ensure your WordPress Elementor site is optimized to its full potential.

good hosting, and you’ll be in a position to having an amazing Elementor site.

Source: premium.wpmudev.org