Month: February 2021

Elementor is a well-known and highly regarded page builder within the WordPress community. To further improve its optimization capabilities, you can utilize our complimentary plugins, Smush and Hummingbird, to significantly boost its performance.

Sometimes, WordPress websites created with Elementor experience slow page loading times due to various reasons such as oversized images, caching issues, CDN usage, and more.

Fortunately, using Smush and Hummingbird can assist in reducing any delays and ensure your website operates at its maximum capacity.

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 piece, we will be covering:

• 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.

We’ll demonstrate the steps we took to improve an Elementor site’s PageSpeed score from 80/100 to 99/100 by using only Smush and Hummingbird. Keep reading to find out more.

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.

How to Optimize Elementor Using Smush

Similar to Elementor, Smush is also well-known among WordPress users. It is a highly-rated, free plugin for optimizing images and has a user base of over one million active users.

Smush works with Elementor to ensure that your image optimization is up to its highest standards and that your site is speedy.

We will explore the amazing features that are compatible with Elementor and any theme you have chosen to use.

• Smush All Your Elementor Images in Bulk
• Compress New Uploads Automatically
• Super Smush for Double the Compression (or Ultra Smush for 5x)
• Add Larger Images with Smush’s Image Resizing
• Convert Your PNGs to JPEGs
• Smush From the Media Library
• Lazy Load Your Images in Elementor for a Speed Boost
• Use Smush’s CDN

Smush All Your Elementor Images in Bulk

Depending on the type of Elementor website you create, you may already have a large number of images installed on your site.

Luckily, the Bulk Smush feature can take care of that with a click from Smush’s dashboard.

Once finished, Smush will inform you.

With Smush, you can also exclude specific images (e.g. thumbnails).

It’s a perfect way to optimize your images with Elementor quickly.

Find out more detailed information about bulk smushing here.

Automatically compress new uploads

Any time you add new images to Elementor, it can compress them automatically with one-click.

In Smush’s dashboard, you can quickly turn on this option.

That’s all you need to do! All of your new images will be reduced in size.

Super Smush for Double the Compression (or Ultra Smush for 5x)

Want to take image compression up a notch in Elementor? Super-Smush can offer up to twice the compression of regular smushing. It does this by stripping out every ounce of unneeded data.

One of the great advantages of this compression method is that it is lossy, meaning there is a slight decrease in quality. However, this reduction is minimal and typically imperceptible to the human eye in most situations.

Like most things with Smush, you can do this in one-click from the admin by going to Bulk Smush > Settings > Smush Mode and clicking on Super.

Take a look and let us know if you spot any improvement in the picture clarity. We doubt you will.

If you want to push image compression even further with minimal loss of quality (up to 5x the compression of regular smushing), then choose the ultra smush feature.

Add Larger Images with Smush’s Image Resizing

When you upload an image that is larger than 2560px in either height or width, it gets scaled down automatically by WordPress so it can generate a web-optimized maximum image size.

If you want to add larger images to your media library, you can override this with Smush’s Image Resizing.

After clicking, you have the option to select a different maximum size for the image.

You can also choose whether or not full-sized images are included in your Bulk Smush.

You’re in control of your full-size images with Image Resizing.

For more details on working with larger images, check out this article: How to Compress and Remove Original Images with Smush

Convert Your PNGs to JPEGs

Based on the Elementor page builder template you choose, you might discover that one of these two file formats is more effective than the other. However, in terms of loading speed, it is usually better to use JPEGs over PNGs.

Smush will check for you whether converting them to JPEGs will reduce file sizes and help speed up your Elementor site.

Automatically converting your PNGs can’t get any easier.

Smush From the Media Library

You can choose to select individual images for compression from the media library.

With Smush activated, you’ll see that there’s a new column called Smush. It will show you what images are optimized. If they’re not, you can click Smush and have it optimized in one-click.

You have access to all the smushing you desire right at your fingertips.

Lazy Load Your Images in Elementor For a Speed Boost

You may have pages that contain a lot of images. Sometimes, displaying them all at once can put a strain on the server.

Lazy Load prevents images that are not currently visible on the screen from loading until the user scrolls to them. This results in a quicker page load time, reduced bandwidth usage, and addresses the “defer offscreen images” suggestion from a Google PageSpeed test.

There’s a lot you can do with lazy load, including how you want the pre-loading images to appear, choices of animation, and duration of time before the image display comes into view.

Activate Lazy Load by navigating to Smush > Lazy Load, or learn more about the benefits of lazy loading by reading: How to Get The Most Out of Smush.

Take Advantage of Smush’s CDN

When you’re close to the server that’s providing your content, it’ll load quicker. That’s what a CDN (Content Delivery Network) does. It’s a series of servers located across the globe, so when a browser makes the HTTP request, the content is served from the nearest server to its location.

This feature is available with Smush Pro and well worth using. Smush gives you access to 18 servers worldwide and a 121-point CDN. Plus, it can automatically resize your images and also convert them to Google’s WebP format.

Smush’s CDN will enhance an 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.

Check out our CDN page for further details.

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.

Hummingbird a 5-star rated free plugin with over 100K active installations on wp.org (and counting!).

With a quick scan of your Elementor site, the plugin provides one-click fixes to help speed up your site with ease.

Let’s briefly go over what Hummingbird can do to improve your Elementor site and make it fly.

We’ll 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

Evaluating Your Website with a Performance Evaluation

Right off the bat, Hummingbird allows you to run a performance test to see how your Elementor site stands. You can get started in one-click by tapping Run Test.

After executing the test, Hummingbird will display the Opportunities, Diagnostics, and Passed Audits. Additionally, you can view the outcomes for Desktop and Mobile.

Simply click between desktop and mobile.

All of the detailed information is listed below. It starts with Opportunities. These are suggestions to improve your page load speed.

Next up is the Diagnostics. This provides additional information about how your page adheres to the best practices of web development.

Lastly, you have the ability to view all of your successful audits. This encompasses all items that have a rating of 90 or higher. Additionally, you have the option to expand each category for further details by clicking on the dropdown menu.

The Performance Test is a great way to evaluate your Elementor site from the beginning so you can instantly see where improvements can be made.

Learn more about performance testing by checking out our article on optimizing Hummingbird.

Delivering Faster Pages and Content with Caching

If you haven’t heard, caching makes pages load faster. And what’s great about Hummingbird is that the offers many types of caching, which works great when using Elementor with your WordPress theme, due to the various page options.

The caching capabilities of Hummingbird consist of caching for web pages, browsers, gravatars, and RSS feeds. Furthermore, if you host your website with us, the speed of your site is further improved with the inclusion of 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.

Take a closer look at Hummingbird’s caching features and explore them in detail by checking out our documentation.

Gzip Compression that Reducing File Sizes for Faster Serving

With Hummingbird’s 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.

Giving Your Page Speed a Boost with Asset Optimization

Hummingbird’s Asset Optimization area is where you can easily automate or manually configure advanced options when it comes to optimizing your Elementor site.

You can utilize Asset Optimization in two modes:

Automatic: Optimizing your assets and improving page load times based on Hummingbird’s automated options.

Manual: Manually set up each file yourself to achieve the exact setup you need for your Elementor site.

When Asset Optimization is activated, Hummingbird instantly scans your WordPress site’s assets to point out those which could be optimized for performance.

There are a lot of tweaks and adjustments that can be made with Hummingbird’s Asset Optimization. Be sure to 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

After examining brief examples of how Smush and Hummingbird can improve your Elementor site’s performance, let’s delve into detailed instances utilizing two well-known 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 will go through the process of incorporating all of these elements and the impact they have. To simplify it, here’s our approach:

• 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
• Conduct another test to measure the speed of your internet connection.
• Activate Hosting Features (e.g. fast CGI)
• Run a final speed test

Remember, each website is unique. Factors such as location, number of images, your hosting provider, and others will impact the outcome. Nonetheless, this guide should provide a basic understanding of the possible adjustments, which you can then customize for your Elementor-powered WordPress site.

[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].

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.

Since we’ve successfully installed this, we’re all set to proceed! Let’s conduct a swift performance evaluation on this website. Our initial tool will be Google PageSpeed Insights.

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

Let’s take a look at the results using 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 will begin by conducting a Performance Test using the Hummingbird tool and review its suggestions.

After completing the task, she notes that our rating is 56 out of 100 and suggests various ways to improve, including preloading key requests, eliminating resources that block rendering, reducing the initial response time of the server, and removing unnecessary 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.

Immediately, Smush notifies me that there are 61 images and attachments that require compression, potentially saving me an estimated 815.5 kb of space. I will compress all of these at once with the Bulk Smush feature.

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 proceed to activate our Content Delivery Network in the Asset Optimization section of Hummingbird. Regardless of your hosting provider, you have the option to enable this feature for enhanced optimization.

Activate the CDN with just one click.

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 a highly favored theme that is compatible with Elementor. With more than 1 million active downloads and an impressive 5-star rating on wp.org, it is a reliable option for numerous Elementor users.

Similar to the Hello Elementor theme, we have created a website using this theme and have enabled the Landing Page – Hotel page from the Elementor 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 conducted this experiment multiple times and consistently received identical outcomes. The score is indeed low.

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.

In case you weren’t aware, there are explanations for the significant variations in scores between Google and GTmetrix, as they have different testing methods. For further details on how their testing approaches differ, take a look at this article on GTmetrix’s website.

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

Let’s begin by using Hummingbird to conduct a performance evaluation.

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

Hummingbird suggests enhancing performance by eliminating resources that block rendering and removing unused CSS.

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

Smush immediately informs us that there are 15 items available for bulk smushing, so we’ll proceed with 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)
• Allowing full-size image resizing to reduce large images to a manageable 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.

The score remains relatively unchanged, as it was already at a satisfactory level to begin with. Minor variations are to be expected, but overall it remains consistent (which is a positive outcome).

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.

General Tips for Speeding Up Elementor

Some simple tips can help you speed up Elementor, in addition to using Smush and Hummingbird.

Things to keep in mind include:

• Choosing a performance-optimized host like ours here at WPMU DEV. We even offer templates that fit Elementor perfectly for total optimization (e.g. our Charity template).
• Employing a minimalist design.
• Ensuring your images are optimized with the help of Smush.
• Getting rid of slow, outdated, or unused plugins.
• Minifying code and concatenate files
• Utilizing page caching through Hummingbird to create static HTML copies of your content.

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

Elementor Optimization Made Easy

Following the information provided in this article, your Elementor WordPress site should now be performing well, optimized, hosted efficiently, and fully utilizing its features. As demonstrated, achieving this is simple with the assistance of Hummingbird and Smush.

Every site will have its individual tweaks and adjustments that need to be made, but it’s just a matter of fine-tuning it to perfection. Add in some good hosting, and you’ll be in a position to having an amazing Elementor site.

[Editor’s note: This post was originally published in Feb 2021 and updated in Dec 2023 for accuracy.]

Elementor is a popular page builder plugin for WordPress that allows users to create beautiful and responsive websites with ease. However, as with any website, it’s important to optimize your Elementor pages for speed and performance. One way to do this is by using the Smush and Hummingbird plugins, which are both free and can help improve your website’s loading times and overall user experience. In this article, we’ll provide a step-by-step guide on how to optimize Elementor for free with these two plugins.

Step 1: Install and Activate Smush and Hummingbird Plugins

The first step is to install and activate the Smush and Hummingbird plugins on your WordPress website. You can do this by going to the “Plugins” section of your WordPress dashboard, clicking “Add New,” and searching for “Smush” and “Hummingbird.” Once you’ve found the plugins, click “Install Now” and then “Activate.”

Step 2: Configure Smush Settings

After activating Smush, you’ll need to configure its settings to optimize your images. Go to the Smush dashboard and click on the “Bulk Smush” tab. Here, you can choose to automatically smush your images on upload, as well as smush any existing images on your website. You can also enable the “Super-Smush” option, which will compress your images even further for maximum optimization.

Step 3: Configure Hummingbird Settings

Next, you’ll need to configure the Hummingbird plugin to optimize your website’s performance. Go to the Hummingbird dashboard and click on the “Performance Test” tab. Here, you can run a performance test on your website to see where improvements can be made. Hummingbird will provide you with a list of recommendations, such as enabling browser caching and minifying your CSS and JavaScript files.

Step 4: Enable Caching and Minification

One of the most effective ways to optimize your Elementor pages is by enabling caching and minification. In the Hummingbird dashboard, go to the “Caching” tab and enable page caching, browser caching, and Gravatar caching. Then, go to the “Minification” tab and enable minification for your CSS and JavaScript files. This will help reduce the size of your files and improve your website’s loading times.

Step 5: Optimize Your Elementor Pages

Finally, you’ll want to optimize your Elementor pages themselves. In the Elementor editor, go to the “Advanced” tab and enable the “Optimized DOM Output” option. This will reduce the amount of HTML code that Elementor generates, making your pages faster and more efficient. You can also use the “Lazy Load” option to delay the loading of images until they’re needed, which can further improve your website’s performance.

In conclusion, optimizing Elementor for free with Smush and Hummingbird plugins is a simple and effective way to improve your website’s speed and performance. By following these steps, you can ensure that your Elementor pages are optimized for both search engines and users, providing a better overall experience for your visitors.

Read More