The right way to Velocity Up and Optimize Avada for Free Utilizing Our Smush and Hummingbird Plugins

Avada is already one of the vital fashionable premium WordPress themes out there. We’re going to make it even higher by enhancing it with our free optimization instruments ― Smush and Hummingbird.

It’s not unusual for WordPress websites constructed with Avada to expertise web page loading slowdowns. This could occur for quite a lot of causes, together with data-heavy photographs, lack of caching, CDN high quality, and a “host” of different tangibles. (Pun supposed.)

That is the place two of our optimization plugins shine. Smush and Hummingbird could make a critical influence in relation to getting (and maintaining) your web site working at optimum velocity.

With a recent Avada set up, we’re going to tweak some settings and run a number of checks to see simply how a lot of a (loading time) distinction Smush and Hummingbird could make on an Avada themed web site.

We’ll additionally current some further recommendations that may enhance Avada’s general velocity in your web site.

After we’re carried out, you’ll have some nice information and assets in your arsenal to get your Avada web site to function lightning quick.

Be happy to leap forward to any of the article sections:

Avada Theme Testing Setup

Process
Parameters
Particulars

Hitting Peak Speeds Utilizing Smush & Hummingbird with Avada

Theme 1 – Avada Spa
Theme 2 – Avada Traditional

Suggestions for Total Velocity Features in Avada
Quick & Furiously Optimized

Preserve studying to take a look at our course of, and the measurable outcomes.

Avada Theme Testing Setup

”Avada is the Swiss military knife of WordPress themes.” – Collis Ta’eed, CEO of Envato

Avada. Is. All over the place. With over six million customers, it’s the primary promoting WordPress theme on ThemeForest.

Have you ever wished to make use of this fashionable theme builder in your web site, however had been involved concerning the loading latency that usually happens? We’ve been there, and may let you know there’s a straightforward ― and free! ― solution to make nice strides in enchancment.

Let’s have a look at what we’ll be doing to perform this.

Process

Notice: We’ve indicated beneath which steps contain no value vs. some value.

Set up Avada Theme Builder & theme on a clear WP web site (requires Avada theme license.)
Tweak Avada optimization settings (no value)
Set up Smush; optimize settings (no value)
Set up Hummingbird; optimize settings (no value)
Activate CDN in Hummingbird (requires Hummingbird Professional)
Activate FastCGI within the Hub (by way of WPMU DEV Internet hosting)
Run velocity checks, after every step above (no value)
Repeat complete process once more, utilizing a distinct Avada theme (no value if you happen to’ve already bought Avada theme license.)

Parameters

We’ll be utilizing a clear basis, that means, our web site will probably be constructed on a model new WordPress set up.
Theme configurations and choices will probably be saved static after preliminary set up.
My internet hosting is the Bronze plan, via WPMU DEV Managed WordPress internet hosting.
My area is USA/East.
Plugins are Smush and Hummingbird solely.
(Should you’re utilizing our internet hosting, you will notice the WPMU DEV Dashboard plugin, because it’s routinely put in on websites hosted by us.)
GTmetrix velocity testing carried out utilizing their default server location (Vancouver, Canada), and default browser (Chrome Desktop).

Particulars

Websites hosted by WPMU DEV will set up the Professional variations of Smush & Hummingbird. To reflect non-pro variations of the plugins, I performed all of my preliminary checks with the Professional options disabled.

Hummingbird optimization makes use of various kinds of caching and compression options on websites. Web page, Gravatar, and RSS caching had been disabled. Most hosts, together with WPMU DEV, usually activate browser caching and GZip compression by default. Since we are able to’t flip these off with out impacting different settings, they’ll stay on throughout our checks.

Lastly, as we’ve talked about in different optimization articles, please word that nobody could have the very same outcomes, due to the variables inherent to every aspect. Your geographical area, the scale of your media library, your internet hosting supplier, all paint a part of the image utilizing very completely different brushstrokes. However regardless of your specific web site setting, you’re certain to see marked enchancment with this course of.

Alright, let’s hit the observe.

Hitting Peak Speeds Utilizing Smush & Hummingbird with Avada

In preparation for this course of, let’s make our instrument kits match, like sisters on image day. (Was it solely my mother who did that with us?) Should you haven’t already, obtain the Avada Web site Builder. You’ll additionally want the Smush & Hummingbird plugins (each of that are free), however we’ll add these just a little later.

For our velocity measurement instruments, we’ll be utilizing Google PageSpeed Insights and GTmetrix, so that you may need to open these two websites now.

Ensure you are beginning on a brand new WP web site, with no new pages or posts created, and no non-compulsory plugins or add-ons activated.

Subsequent, set up the Avada web site builder. There are two further Avada plugins required ― Core, and Builder ― so we’ll go forward and set up them as properly.

Avada’s Core and Builder plugins should be put in to make use of the theme builder.

Theme 1 ― Avada Spa

Time to make our precise theme choice. For this primary take a look at, we’ll use Avada Spa. It doesn’t require any further plugins, however has a good variety of photographs, so it looks as if a superb one to strive. It’s tucked into the pre-built library within the Avada dashboard, and set up is a number of easy clicks.

Choose solely the content material you need to import throughout theme set up.

With our theme put in and utilized, and earlier than we begin tweaking or including something, we should always get an preliminary snapshot of our velocity.

GPSI offers us a good to middlin rating.
GTM is on a par with Google for our preliminary velocity take a look at.

Each scores fall within the “7Os” or “C” vary. We will undoubtedly do significantly better.

I need to look into Avada’s built-in optimization settings, make some changes there, and see if we get web page velocity enhancements.

A snippet of Avada’s built-in optimization menu.

From the Choices/Efficiency menu tab, listed below are the adjustments I made:

Efficiency

Picture Lazy Loading >> from None to Avada
Font Face Rendering >> from Block to Swap All
Preload Key Fonts >> from Icon Fonts to All
Load Stylesheet in Footer >> from Off to On

Dynamic CSS & JS

Load Media-Queries Recordsdata Asynchronously >> from Off to On

With all adjustments saved, we’ll verify our velocity.

Double sevens, so we tapped up a smidge.

Let’s strive the primary of our optimization plugins, and activate Smush.

Smush is our consumer’s alternative, award profitable, and benchmark examined picture optimizer.

Upon navigating to the Smush dashboard, you need to be greeted with the short setup wizard. These settings embody: Auto Compression, EXIF Metadata, Full Measurement Photos, Lazy Load, and Utilization Knowledge.

Right here’s what every characteristic does:

Auto Compression ― will routinely optimize new picture uploads, so that you don’t should do each manually.
EXIF Metadata ― will strip digital camera settings out of your photographs, serving to scale back file measurement. (Don’t fear; it gained’t strip search engine optimization metadata).
Full Measurement Photos ― will compress your unique full measurement photographs. (Notice: by default, it shops copies of your originals, in case you ever need to revert again.)
Lazy Load ― will cease offscreen photographs from loading till a customer scrolls to them.
Utilization Knowledge ― will let our designers achieve perception into what options want enchancment. (Your private knowledge will by no means be tracked.)

Go forward and run via every display screen, leaving default settings on. (Permitting Utilization Knowledge will assist in the direction of the performance of future variations of the plugin, but when it makes you uncomfortable within the least, go away it off.)

Smush makes recommendations to maximise picture compression.

As soon as the wizard completes, the dashboard will replicate what number of photographs might use compressing. Hulk smash that Bulk Smush Now button!

What do our picture optimization stats appear to be now, Mdm. Smush?

54 photographs smushed, saving 3.2 mb. Smushing like a champ!

Let’s see how a lot that lightened the (web page) load, and do our velocity checks once more.

That’s a reasonably good leap! Virtually ten factors.
“B”it by bit, we’re on an upward trajectory.

Time to kick issues into excessive gear, and have Hummingbird alight on the scene.

Hummingbird is all the pieces you want to get your web site working quick.

After putting in and activating Hummingbird, going to the dashboard will activate one other fast setup wizard. This time, she’ll simply counsel working a efficiency take a look at, which is strictly what we need to do.

As soon as the take a look at is full, you’ll get a notification letting you already know.

The dashboard exhibits us the rating from the efficiency take a look at.

83 will not be too shabby! We’re already flying, however we’ve but to hit our highest altitude.

Hummingbird supplies lists and a chart of varied metrics and audits that had been rated through the efficiency take a look at.

Hummingbird tracks six metrics within the Efficiency part of the Lighthouse report.

She additionally supplies further rating metrics referred to as Audits. These separate points into the classes of: Alternatives, Diagnostics, and Handed Audits ― all suggestions for enhancing your efficiency rating.

Alternatives are mainly color-coded alerts. Yellow signifies a light to reasonable subject, and Pink means the problem is considerably impacting efficiency.

On this efficiency analysis, Hummingbird has indicated that I’ve 3 Alternatives, which as least one among is excessive precedence (pink squoval).

To resolve these Alternatives, click on on any alert row, and it’ll show:

an in depth description of the problem
a listing of particular belongings concerned
step-by-step directions on find out how to resolve the problem

You don’t should go digging via pages of directions or do mad googling; Hummingbird spells all the pieces out for you on any flagged points.

It’s a good suggestion to deal with these, and that’s what I’ll do now. When you’ve made the fixes, you’ll be able to transfer on to the subsequent step… asset optimization.

From the left menu bar, select Asset Optimization. Click on Computerized, and ensure the Speedy slider is ON.

Set your Asset Optimization to Speedy & Computerized for a efficiency increase.

Of word: whenever you’re in Computerized mode, Hummingbird auto-detects newly added plugin and theme recordsdata and optimizes them for you, however gained’t take away any outdated recordsdata from a plugin or theme that was eliminated. That is to keep away from conflicts and points, and why it’s beneficial to re-check recordsdata now and again ― so all the pieces stays in sync.

Okay, time for some velocity testing.

Woohoo! That pushed us up into the 90’s.
“B”maintain our regularly rising numbers.

Nice scores! Another factor we are able to nonetheless do… let’s activate the CDN in Hummingbird. From the identical Asset Optimization web page, transfer the WPMU DEV CDN slider to ON (it would flip blue).

Let’s run our velocity checks once more.

The warmth is on! We’re cranked as much as 94.
Highschool me needs this had been my grade in AP Historical past.

We might cease right here and be completely comfortable campers. Nonetheless, I’ll throw another go surfing the hearth, by tweaking a setting via my WPMU DEV internet hosting.

Turning on FastCGI via WPMU DEV’s internet hosting Hub.

Time to place the pedal to the metallic and get some new take a look at scores.

Nearing perfection with a rating of 97 in GPSI.
Sure! We lastly bought our “A”.

Alright, I’m tremendous stoked about that. Let’s transfer on to our second spherical of testing by putting in a distinct theme.

Theme 2 ― Avada Traditional

For our second take a look at setting, we’re going to make use of Avada Traditional. It requires the extra WooCommerce plugin to be put in, so will add an fascinating aspect which might presumably have an effect on web page load speeds.

Earlier than we truly change themes, let’s roll again to our unique take a look at setting. You probably have WPMU DEV’s internet hosting, flip off FastCGI from the Hub. In Hummingbird, flip off CDN Asset Optimization. Then deactivate each the Hummingbird & Smush plugins.

We additionally have to revert the Avada Efficiency optimizations again to their defaults, by way of the Choices/Efficiency tab, Reset All.

As soon as once more from the Avada Dashboard, let’s navigate to the pre-built themes. Ensure you choose all of the elements you put in for Avada Spa; then click on Take away. As soon as that course of completes, head to the Traditional theme (it’s the primary one), and set up/activate it.

The extraordinarily fashionable WooCommerce plugin is required for Avada’s Traditional theme.

Prior to creating any adjustments or changes, let’s get our preliminary velocity take a look at scores.

Not dangerous for our baseline.
I “C” you, and I’ll elevate you 20. (A minimum of!)

Okay, that’s respectable, however we wish very good. Let’s modify a few of Avada’s built-in settings once more.

I’m making the identical optimizations as I did final time, however with one addition: Avada’s PWA plugin (primarily a caching app, below improvement at Google). As soon as PWA is put in and activated, I’ve bought some decisions now below Choices for Progressive Net App. I’m switching it ON, leaving the pre chosen settings as is, and saving adjustments.

To allow PWA settings in Avada, you should first set up its plugin.

Let’s see how a lot of an influence these tweaks made in velocity scores…

Okay, not a thoughts blowing uptick, however a rise nonetheless.
That is additionally a better rating ― we’ll take it!

With the Avada optimizations below our belt, let’s reactivate Smush.

Your Smush settings will stay as we final had them. As a result of our new theme added new photographs to the media library, we have to let Smush do her factor.

You’ll already see the financial savings from bulk compression in her dashboard. We didn’t should actively smush the photographs added to the media library with this theme, as a result of we had beforehand instructed Smush to routinely compress our photographs on add. And that’s precisely what she did.

With Smush on responsibility, finishing up her pre-specified duties requires no prompting.

Alright, time for an additional spherical of velocity checks.

The needle remains to be climbing.
Can nonetheless “B” higher, however we’re getting into the best route.

Even higher scores than with our preliminary theme at this level. After all, we are able to get them greater. Time to let our rapidly-fluttering-winged pal grace us along with her presence. Reactivate Hummingbird, and run a efficiency take a look at.

Hummingbird’s 87 is a superb rating.

Whereas I’m happy along with her rating, it’s inferior to it may possibly get. I see she has listed three Alternatives, and at the least one is substantial (code pink). I’m going to go in and repair what she’s recommending, and I counsel you do the identical when you have points indicated in Alternatives.

Hummingbird’s at-the-ready fixing directions are so simple as click on, learn, do.

Time for our velocity checks.

We’re within the higher echelon…
Slowed to a crawl, however we’re nonetheless transferring up.

With our subsequent tweak, we should always see these markers go up much more.

In Hummingbird, go to Asset Optimization/Property, and click on the Re-Test Recordsdata button. Whereas she’s checking, flip CDN to ON once more (from the working pop up). She’ll let you know what number of belongings are discovered; click on the “Obtained it” button. After her scoring, click on Activate.

Earlier than we do velocity checks, I’d prefer to run one other Hummingbird Efficiency take a look at, and see the way it’s improved since we made all these optimizations.

87 to 98! I’d name {that a} stellar enchancment.

Let’s see if that bumped up our velocity scores.

96 deserves a cheerful dance!
”B” nonetheless my coronary heart. Efficiency is on the rise.

We might name it a day and have nice responsiveness with these scores. However I’m gonna try this one final leap, and activate the static server cache from my internet hosting Hub.

One remaining take a look at… and survey says??

Fairly close to good. BTW, can anybody see 99 and never hear Toto of their head?
Fan-humming-smush-tastic!!

Okay, that is the most effective rating I’ve seen but. I’m gonna do a victory lap!! Earlier than I get carried away with the checkered flag, I simply need to share a critical thought on continued testing.

There will probably be slight variances if we had been to check randomly going ahead, as not one of the components are actually static. However you shouldn’t see any important dips in web page loading time, with the entire tweaks we’ve put into play.

Suggestions for Total Velocity Features in Avada

This has been an eye-opening expertise. Avada can most undoubtedly ramp up the tempo when utilized in tandem with Smush and Hummingbird. Though we tremendous tuned quite a few settings, there are some issues it is best to at all times think about in relation to getting and sustaining optimum velocity in your web site.

They’re:

Select a theme that’s extra minimalistic (i.e., “gentle”)
Delete plugins which are outdated or now not getting used
Allow caching
Minify and Defer CSS & JavaScript
Use a CDN
Repair damaged hyperlinks
Optimize your photographs
Replace your Internet hosting Plan

That final one can actually make an evening and day distinction. Make certain your internet hosting supplier has a superb status, and is proven to be quick and dependable. (WPMU DEV internet hosting plans present strong, totally devoted WordPress web site internet hosting, backed by Digital Ocean.)

Fast word concerning CDN because it applies to our plugins: the settings for the picture CDN are positioned in Smush Professional, whereas the online object settings are in Hummingbird Professional.

Quick & Furiously Optimized

You’ve bought all of the instruments at your disposal now. As your web site grows, and also you proceed so as to add content material and improve your visitors, it is best to recurrently take a look at and reassess your optimization settings.

As you’ve seen, Smush and Hummingbird are each free, feature-packed optimization instruments that may improve your velocity. However no matter what you utilize, proceed to make changes so your web page hundreds are by no means a deterrent to guests or shoppers.

Make Avada your personal, and web site velocity your silver bullet.