Optimizing Astra with Hummingbird and Smush: From Spectacular to Out of This World!

No Comments

Astra is a light-weight theme that’s constructed for velocity. Nonetheless, we took its Google PageSpeed Insights rating from a powerful 96 to a stellar 99!

We’ll present you the way it’s finished by boosting Astra’s efficiency even additional with the assistance of our free optimization plugins, Smush and Hummingbird.

The Astra theme is likely one of the hottest WordPress themes of all time, utilized by over 1.6 million web sites. It was made as a light-weight basis for any kind of WordPress web site. It usually clocks in at beneath 50 KB in file dimension and has zero jQuery dependencies, making it so it doesn’t intrude with time for web page hundreds.

That’s unbelievable! However there’s nonetheless extra you are able to do to get your Astra web site near good optimization.

On this article, we’ll check out…

How We’ll Do It

It’s finished with slightly Astra optimization and the assistance of our plugins, Smush and Hummingbird. Plus, a touch of excellent internet hosting.

And in case you didn’t know, Smush is our 5-star picture optimization plugin. She has over 1,000,000 lively installs and might optimize photos, lazy load, resize, bulk smush, and compress all your photos for enhanced velocity.

Smush is our reply to WordPress picture optimization.

On the subject of velocity, our personal 5-star rated Hummingbird runs the gamut of constructing your web site tremendous quick with adjustable enhancements of file compression, minify for CSS & JS, lazy load feedback, cache, and way more. She has over 100K lively installs and continues to develop in reputation each day.

Hummingbird is right here to assist make your web site hum.

In fact, now we have to say that each Smush and Hummingbird are free to make use of!

We’ll create an Astra web site utilizing Astra Professional after which optimize it to its fullest potential. There’s a free model of Astra as effectively, however we determined to go professional as we figured that is the model that the majority skilled internet builders would use.

We’ll be protecting:

Astra Overview and Take a look at Structure
Optimization Take a look at Set-Up
A Velocity Take a look at With out Optimization
Optimization with Astra and Smush
Optimization with Astra and Hummingbird
Additional Boosting in Hummingbird and Your Host
Different Optimization Ideas

To comply with alongside, you’ll want Astra Professional, Smush, and Hummingbird. In the event you’re not acquainted with Astra and need to attempt it out first, you too can use the free model. Nonetheless, the outcomes could also be important contemplating efficiency perks, corresponding to CSS file technology.

Click on right here for a comparability information of what free vs. Professional contains.

By the tip of this text, you’ll have your Astra web site totally optimized for efficiency!

Astra Overview and Take a look at Structure

In the event you’re not acquainted with Astra, it could be stunning. As I discussed earlier than, it’s used on over 1.6 million web sites and counting.

As for Astra itself, it’s an amazingly customizable WordPress theme that provides tons of options. For instance, there are over 150 templates of pre-built web site designs, making it straightforward for non-developers. As well as, all the pieces could be adjusted (e.g. colours, fashion, and many others.).

Plus, it comes with tons of free plugins to be used, together with Customized Fonts, Astra Bulk Edit, Astra Hooks, and extra!

On the subject of velocity, in keeping with builders, with it being so light-weight, Astra web sites ought to load in lower than half a second when utilizing default WordPress knowledge.

Take a look at Structure Design

With the entire premade web sites that Astra affords, it’s onerous to decide on what’s finest for this text. In spite of everything, we are able to’t take a look at ALL of them on this put up (that may take some time).

Astra works together with your favourite web page builders, together with Elementor, Divi (requires Divi Builder Plugin), Beaver Builder…even Gutenberg.

We’re going to go together with the Mountain template for this text. It has a superb mixture of photos and textual content, so it looks like a winner to me.

You possibly can find the Mountain template from the dashboard underneath Starter Templates and Gutenberg from the template dropdown. Additionally, there’s a search bar to seek out it.

The mountain template looks like an awesome choice.

Now now we have a pleasant view to work with 🙂

The mountains make for a nice working atmosphere.

Since now we have our template for our web site, let’s transfer on to…

Optimization Take a look at Set-Up

This take a look at is beginning with a virtually clean WordPress canvas to work with.

The web site has no plugins put in besides the WPMU DEV Dashboard, Astra Professional, and Starter Templates. Starter Templates is from Brainstorm Power and could be activated straight from the Astra dashboard in WordPress so that you’ve got entry to the Mountain template we’re utilizing.

Different parameters for this take a look at embody:

Hosted on WPMU DEV’s Bronze plan.
My area is the USA/West.
The free variations of Smush and Hummingbird. Please observe that with WPMU DEV internet hosting, it would set up the Professional variations. For this instance, I disabled the Professional options.
I’m utilizing WordPress model 5.7.2.
PHP Model is 8.0
Web page Caching, Quick CGI (Static Server Caching), and CDN are disabled to begin with. Additionally, Hummingbird optimization makes use of a number of varieties of caching and compression options on WordPress websites, so Web page, Gravatar, and RSS caching have been disabled.
Chrome (desktop) browser.

As for a way this take a look at is carried out, it’s a step-by-step course of that appears like this:

Set up Astra Professional and accompanying plugins, as I discussed above, on a clear WP web site.
Optimize Astra.
Run a velocity take a look at.
Activate Smush and arrange suggestions.
Run one other velocity take a look at.
Activate Hummingbird and arrange suggestions.
Run one other velocity take a look at.
Activate internet hosting options.
Run a last velocity take a look at.

For the velocity checks, I can be utilizing Google PageSpeed Insights. When take a look at outcomes are the identical all through testing (which is the case on this article) after a number of runs, I’ll embody a screenshot.

Take into account that EVERY web site can be a bit completely different. It might’t be harassed sufficient that your geographical areas, the scale of your media library, your host, and different components will decide completely different outcomes.

We’ve additionally talked about this earlier than in a few of our earlier efficiency optimization articles, verify them out should you haven’t but:

The best way to Velocity Up and Optimize Avada for Free Utilizing Our Smush and Hummingbird Plugins
The best way to Optimize Divi for Free Utilizing Our Smush and Hummingbird Plugins
The best way to Optimize Elementor for Free Utilizing Our Smush and Hummingbird Plugins

However no matter your WordPress setup, you continue to obtain outcomes with web site optimization utilizing this course of.

With that being mentioned, let’s start!

A Velocity Take a look at With out Optimization

On the subject of optimizing your WordPress web site, it’s at all times advisable to begin together with your theme. So, we’re going to begin right here.

As I’ve touched on on this article, Astra comes fairly effectively optimized proper out of the field! One in all their prime priorities is velocity, they usually’re always enhancing.

There’s not a lot you may alter or change in any other case. The one advice that Astra Professional has is to allow CSS File Technology.

When enabled, inline CSS won’t present up within the Supply Code anymore and as a substitute be added as a separate file. CSS File Technology will make the browser caching quicker and enhance your web site’s response time and loading velocity.

It’s straightforward to do proper from the Astra dashboard. Merely click on Allow File Technology.

One-click is all it takes!

That’s it! As soon as now we have that enabled, we’re prepared for our first velocity take a look at.

First, the rating for desktop…

Good! 96 is a extremely good rating.

And now for cell…

88 isn’t horrible, however we are able to do higher.

As you may see, these are excellent scores! Nonetheless, there’s minor room for enchancment, and extra could be finished to get even nearer to that good rating and hold our Astra web site optimized for the long run.

Optimization with Astra and Smush

Since I already talked about what Smush can do relating to picture optimization, I received’t boast any additional. So as a substitute, you’ll see for your self how she might help enhance this web page velocity rating nearer to perfection.

Smush is able to sort out a very good velocity rating and make it even higher!

The primary a part of the method is putting in and activating the plugin.

Immediately, Smush lets me know what number of photos are able to be smushed. This may be dealt with in a single click on with Bulk Smushing. Simply faucet Bulk Smush Now.

On this case, 21 attachments must be smushed.

It solely takes a couple of moments, after which she’ll pull up the outcomes.

We saved 10MB together with her assist.

You possibly can see that Smush has a complete financial savings of 10.0MB/33.3% and 821 photos Smushed (quite a lot of them from the preliminary activation).

As you add extra photos to your Astra web site, she’ll sustain her tremendous smushing powers, so it retains the financial savings going.

Plus, Smush has a setup wizard that features Auto Compression, EXIF Metadata, Full-Dimension Pictures, Lazy Load, and Utilization Knowledge.

Undergo and depart the default settings on. In fact, you may at all times alter or flip off any settings should you’d like.

Let’s run one other take a look at for Google PageSpeed Insights for desktop…

Whoah! A 99.

And cell…

This was cranked up fairly a bit, too!

The scores went up even additional with Smush. Google PageSpeed Insights went from 96 to 99 on desktop and 88 to 94 for cell.

I imply, we may cease right here and be completely pleased with these scores. It doesn’t get significantly better! Nonetheless, let’s hold transferring. Extra could be finished with…

Optimization with Astra and Hummingbird

We are able to’t speak optimization with out our personal Hummingbird. She does amazingly effectively at optimizing textual content compression, preload key requests, caching, and extra.

The subsequent step of the method is putting in Hummingbird and getting her to work on even additional optimization.

Hummingbird is right here to take optimization to a complete new stage.

To kick issues off, as soon as put in, she’ll ask about working a Efficiency Take a look at. Achieve this by clicking, you guessed it, Run Efficiency Take a look at.

Operating a take a look at is fast and simple.

Like Google PageSpeed Insights, Hummingbird calculates a efficiency rating after a take a look at. In our first take a look at, we scored a 97/100 for desktop and a 93/100 for cell, with two alternatives to verify for enchancment. Not dangerous!

A have a look at our rating for desktop.

The alternatives for enchancment consists of:

Scale back preliminary server response time
Remove Render-blocking sources

Resolving alternatives is only a matter of clicking on any alert row. From there, it would show an in depth description of the difficulty, an inventory of particular belongings concerned, and step-by-step directions on the right way to resolve the difficulty.

As soon as we deal with the problems and know a couple of alternatives to enhance, we’ll go forward and run Hummingbird’s Asset Optimization Take a look at. We’ll do that with Web page Caching and CDN disabled.

The Asset Optimization Take a look at is completed from Asset Optimization and by clicking Re-Verify Information.

The re-Verify Information button is all it is advisable faucet.

As soon as finished, she has an inventory compiled of CSS and JavaScript recordsdata that may be optimized.

Right here’s a have a look at the CSS recordsdata.

You possibly can undergo every one individually or arrange Computerized and ensure the Speedy slider is On.

Setting Belongings up mechanically will compress and set up them for you.

Having Computerized enabled lets Hummingbird auto-detect newly added plugin and theme recordsdata and optimizes them for you. Moreover, she received’t take away any previous recordsdata from a plugin or theme that was taken out. This avoids conflicts and points.

Now that we’ve examined our web site with Hummingbird let’s run some new checks.

First, we’ll verify it with Google PageSpeed Insights. Right here’s the rating for desktop…

You possibly can’t get any higher, proper?

And right here’s the PSI cell rating…

That is an incredible rating, too!

These scores are glorious! I’d be comfortable leaving effectively sufficient alone; nevertheless, there’s…

Additional Boosting in Hummingbird and Your Host

Sure, you heard that proper. We nonetheless have slightly bit extra that may be finished to optimize your Astra web site.

One factor is popping on the CDN in Hummingbird. From the Asset Optimization space, simply flip the CDN slider on. Whether or not you’re internet hosting with us or one other supplier, this characteristic is on the market to you.

It’s a fast hop into The Hub to make FastCGI occur.

In the event you ARE internet hosting with us from The Hub, you may activate FastCGI by enabling Static Server Cache. Go to your web site, Internet hosting, after which Instruments. Simply click on it to ON, and also you’ll be all set!

Click on this ON from The Hub.

Now that we’ve enabled these optimization options let’s run some last checks…

The desktop is wanting nearly good.
Cell is wanting good, too!

We’ll try what Hummingbird has to say, too.

A 99? I’ll take it!

As you may see, although Astra begins with an awesome rating, you may make it even higher with a couple of tweaks. Plus, all of those optimization choices are for the long run, in order your web site grows, your optimization stays the identical with a little bit of TLC and monitoring.

This web site began with a Google PageSpeed Insights rating of 96 for desktop and 88 for cell. We have been in a position to get the scores as much as 99 for desktop and 95 for cell.

We are able to conclude that essentially the most important enhancements have been cell, the place the desktop improved slightly, however not a lot contemplating how optimized it was already.

Each web site can be a bit completely different. Nonetheless, following this optimization path will assist your Astra web site, and it is best to see enhancements.

Different Optimization Ideas

This isn’t a typical web site that was stuffed with a ton of content material, in order you develop your Astra web site, listed below are another issues to think about to maintain it optimized:

Delete unused or outdated plugins and themes
Repair damaged hyperlinks
Have an awesome host
Preserve photos optimized
Preserve caching enabled
Replace your WordPress, theme, and plugins as wanted
Monitor your web site’s efficiency with the assistance of a WordPress web site administration, like The Hub

For extra optimization ideas, remember to learn our Final Mega Information to Dashing Up WordPress.

Astra La Vista, Dangerous Optimization

Astra is an excellent light-weight theme for optimizing your web site, and clearly, it doesn’t take a lot. The minor enhancements we lined can enhance your web site’s velocity to its full potential and hold it that method.

Plus, you don’t want to spend so much of time or cash to make good Astra optimization even higher. Smush and Hummingbird are accessible to you, and there are many budget-friendly choices (e.g. WPMU Internet hostingwink, wink) that may get the job finished in relation to internet hosting.

In the event you don’t have Astra, remember to decide up the free or Professional model and provides it a attempt. Mixed with our plugins and a few good internet hosting, you too can be saying, “Astra la vista” dangerous optimization!

    About Marketing Solution Australia

    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