Skip to Main Content
Docs / / Hummingbird

2. Hummingbird

Written by Samantha LaRue | Last updated: September 16, 2017

Meet Hummingbird!

Hummingbird helps keep your site running fast and efficiently. In this guide, we’ll cover all of the great features available for free with Hummingbird, and at the end of the guide, we will also include information regarding the premium features you can get access to as a member of WPMU DEV. With a few simple steps, you can find the weak points in your site’s performance and develop a plan to improve. Let’s dig in!

New to WordPress? Our Installing Plugins guide will walk you through installing your first plugin. Or, if you’re a member of WPMU DEV, you can use the WPMU DEV Dashboard plugin to easily install new plugins directly to your WordPress site.

Once Hummingbird is installed, your first stop is the plugin’s dashboard, which you’ll find under Hummingbird in your WP Admin menu. You’ll see an overview screen of the tools we’re giving you to keep your site running like a champ; Performance Reports, Minification, Caching, GZIP Compression, Image Optimization (with Smush Pro),  and Uptime Monitoring.

hummingbird dashboard

2.1 Performance Report

Link to chapter 1

The first thing you’ll want to do is run a performance scan to establish a baseline of your site’s overall performance.

run a new performance scan

Click on “Run Test” to get the ball rolling!

When your scan is finished you’ll see some new information has been added to the top of your Dashboard:

performance score

At a glance, you’ll be able to see your current performance score & the date of your last performance test.

Beneath that, you’ll notice in the Performance Reports module that the results of your test are now available.

performance report results

Here you’ll find a list of recommendations, your current score on these items, and a link to “Improve” your score in each section.

performance results

At the bottom of the Performance Report section you’ll see a link to “View Full Report.” So let’s click that now to head to the Performance Test section.

performance test section

At the top you’ll see the same information that was visible from the main dashboard, and below that you’ll see the list of items that Hummingbird has noted as areas that need improvement.

If you click on “Improve” next to each of these items, the listing will expand and provide you with additional information about what Hummingbird found and how to fix it.

remove render block resources in hummingbird

For many of the recommendations that Hummingbird makes, it is able to make these improvements for you (like with Minification in the example above). But sometimes Hummingbird needs to call on other superheroes like Smush to do the heavy lifting.

Whatever the case, Hummingbird will provide you with detailed information on what is a possible area of concern, and what you can do to improve the performance of your site.

2.2 Caching

Link to chapter 2

Back on the Hummingbird Dashboard, you’ll see Browser Caching on the right hand side. This module gives you a quick overview of your current settings.

browser cahcing

After clicking on Configure, you’ll be taken to the Caching section where you can adjust your settings for both Browser Caching & Gravatar Caching.

caching options

Browser Caching

browser caching

Browser caching stores temporary data on your visitors’ devices so that they won’t download assets twice if they don’t have to. This results in a much faster second time around page load speed. Enabling caching will set the recommended expiry times for your content.

To enable Browser Caching, scroll a bit further down the page to see the various options available for configuration.

expiry settings

Expiry Settings  – Here you can decide how long you would like to keep your cache stored before it’s emptied. By default, 8 days is selected, but you can increase or decrease this as needed. If you have a static site that does not change much, you could set this for a much longer period of time.

You can also choose to configure different expiry settings based on the cache type (javascript, CSS, media, images).

enabling browser caching

Enable Caching – In this section, you will first select your server type on the left from the drop down menu, and then follow the instructions that appear on the right-hand side. If you’re using an Apache server, for example, you can simply click on an “Activate” button that will appear.

If you are using NGINX, as shown in the example above, you’ll need to add some specific code to your nginx.conf file.

PRO TIP – Don’t sweat it if this seems a little out of your depth – just open a support chat and our experts will help you out. :)

Special Note About Cloudflare

If you are using Cloudflare for your CDN, then Hummingbird makes it easy for you to connect your Cloudflare account.

Why would you do this, you may ask? Because if Hummingbird does not manage your Cloudflare connection, then you risk Cloudflare overwriting changes you make in Hummingbird.

If you don’t have Cloudflare yet, you can signup here. And if you’re interested in learning more about the benefits of using a CDN, head on over to our blog.

Gravatar Caching

gravatar caching

Gravatar caching allows you to store local copies of avatars used in comments and in your theme. You can control how often you want the cache purged depending on how your website is set up. This is a great option to enable if you have an active blog or community!

Just click on Activate and you’re all set. Simple as that.

activating gravatar caching

From here, you can choose to clear the cache when needed, or deactivate Gravatar Caching altogether.

2.3 Gzip Compression

Link to chapter 3

Next up is Gzip compression! Gzip compresses your webpages and style sheets before sending them over to the browser, which makes for faster loading times.

gzip compression

From the Hummingbird Dashboard, you can click on the Configure button to be taken to the Gzip section.

gzip compression

You may notice that a few of the Gzip features are already enabled on your website. To configure the rest, just select your server type from the drop down menu on the top right of the Enable Gzip module.

enable compression on apache servers

For Apache servers, enabling Gzip Compression is as easy as one click of the mouse.

all gzip settings enabled

Voila! Gzip Compression is all setup. Super easy, right?

2.4 Minification

Link to chapter 4

Minification is probably one of the most powerful features within Hummingbird.

minification

Once more, return to the Hummingbird Dashboard and locate the Minification module. It’ll be on the right-hand side, beneath Browser Caching. Click on Activate to begin and be redirected to the Minification section.

minification checking files

When the page first loads, you’ll see a small popup with a progress bar – Hummingbird is scanning your files to identify them & determine the best way to combine them.

Once the scan is complete, you’ll be able to see the results.

minification scan results

In this example, Hummingbird was able to reduce my files by 18% – or 63kb. You can also see that 34 files were identified.

Keep in mind this is a small site, with only Hummingbird installed for demonstration purposes. A proper website may have a much greater amount of savings.

Files

files to minify

At the bottom of the Minification page, under Files, is where all the fun begins!

You can see two buttons in the top right of this section:

Re-check Files – this option allows for you to have Hummingbird scan your site again to check for any missing files. This is especially handy if you installed (or uninstalled) a plugin and are not seeing the files added to the list here.

Start Over – this option allows for you to completely reset these settings in Hummingbird. If something goes sideways, don’t worry! Just click on “Start Over” and your site will be returned to its original condition.

Right above the list of files, you’ll see two more options:

Bulk Update – if you know you have multiple files that need to have a single action applied to them, you can click the checkbox next to each file and then click on the “Bulk Update” button. A screen will then popup that will let you choose which options to apply to all of the selected files.

bulk update in minification

Filter – Looking for something specific? No worries! Just click on Filter, and you’ll be able to view files from a specific plugin or theme, or even search by file name.

minification filter

And finally, for each file, you’ll see the following details & options:

File Details – the name and/or location of the file you will be making changes to

Configuration – where you choose if you’d like to minify, combine, or move a file to the footer. When the button is colored blue, this means that option has been enabled.

Filesize – here you’ll see the original file size, and the reduced size of the file after Minification has been applied. In the example above, it says “Pending, ” but in a real site with active users it will look something like this:

minification options

These are the four different actions you will have available to configure your files:

Minify – Minification removes the clutter from HTML, CSS, and Javascript files. Smaller files, in turn, help your site load faster, since your server doesn’t have to waste time reading unnecessary characters & spaces.

Combine – Whenever possible, Hummingbird can combine smaller files together to reduce the number of requests made when a page is loaded. Less requests mean less waiting, and faster page speeds!

Footer – When it comes to render blocking issues and WordPress, the best practice is to load as many scripts as possible in the footer of your site, so slow-loading scripts won’t prevent vital parts of your site from loading quickly. For each file and every file, you will be able to decide whether you want to move them to the footer or leave them in their original position. You can read more on render blocking and positioning here.

Defer – For JavaScript (JS) files you will have the option to Defer. This means they will load only after everything else on your page has loaded, which allows you to load the most important files & content first.

Pro Tips:

The most important thing when working with minification and making changes to how your site loads files is that you test things out after every single change.

It is not recommended to select all your files, click on Bulk Update, and enable all of the options. This could have disastrous consequences for your site, and break a lot of things! Please do not do this!

You won’t be able to apply every option to every file, so it is very important to test as you go. (And make sure to click on Save Changes beforehand!)

save changes to minification

If a change you make does not work, then just go back to the Minification section and undo the last change you made. After you save your changes again and clear your cache, everything will be right back as it was before.

This process can take some time to get right, but once you do it will be worth it! Remember if you get stuck or have any questions, our support team is always available to help you out.

2.5 Image Optimization - with Smush

Link to chapter 5

Once you’ve run your first Hummingbird scan, you may find that some of your images need to be optimized.

images need to be optimized

Your Hummingbird results will tell you if these images just need to be compressed, or if compressing and resizing is necessary.

For resizing, you can turn to the WordPress image editor to crop and scale those images to match the embedded size in your content.

wordpress image editor

For compressing, Hummingbird enlists the help of Smush. You can find Smush in the WordPress repository if you are not a member of WPMU DEV. Or you can install Smush Pro from the WPMU DEV Dashboard.

install smush

If you already have Smush installed & activated, you will see an Image Optimization module on the Hummingbird Dashboard that gives you a quick overview if you have any images that need to be optimized.

image optimization module

Additional Information

After you activated Smush, head over here to read our usage guide to learn how to use Smush. And then to our blog for additional information about image optimization, and how to get the most from Smush Pro.

 

2.6 Uptime Monitoring - Pro

Link to chapter 6

Uptime Monitoring is one of the awesome perks exclusive to WPMU DEV members.

uptime monitoring in hummingbird

These features allow for you to set up email notifications alerting you immediately if your website goes down, and also letting you know when your website has come back up. You can also keep track of some helpful statistics that help you keep track of how long your site was down for, when the last time your site went down, as well as your server response times.

To get started, make sure you have the WPMU DEV Dashboard installed & activated on your site – and ensure that you are logged into the Dashboard with an active WPMU DEV membership. (Uptime Monitoring will only work with an active membership.)

activate uptime monitoring

When you return to the Hummingbird Dashboard, you’ll see a blue Activate button in the Uptime module. Click on this button to be redirected to Uptime Monitoring section within Hummingbird.

uptime monitoring results

At the top of the Uptime section you’ll see a lot of interesting information regarding your site. Since this is the first time I’ve turned on Uptime Monitoring, there isn’t much information to see. But once you’ve had Uptime Monitoring running for awhile it will look like this:

uptime stats

Beneath this, you’ll find a nifty graph of the response time of your site at various times throughout the reporting period:

response time graph

And even further down you can see a log of all the times your site was inaccessible for visitors:

downtime

Pretty cool, huh?

2.7 Reports - Pro

Link to chapter 7

As a member of WPMU DEV, you’ll have a 2nd tab available to you under Performance Scans – Reporting.

reporting settings

Here you are able to configure the frequency of your scheduled scans – from the time of day to the day of the week:

And you can even indicate if you’d like to send these reports to anyone else, such as a web developer, a client, or a business partner:

scan email notification recipients

 

2.8 Additional Help

Link to chapter 8

Do you have any questions for us? Was something in this guide unclear? Please let us know!

You can open a live support chat anytime to get started talking to a member of our support team right away. We’re always here to help.

Get help and support for ANY WordPress problem for FREE

Want expert help and support for ANY WordPress issue for free?

Sign up for a free trial now and let us help you out!

No obligation and super easy to cancel.

Awesome! Let’s get you set up with your free 30 day trial


Example: John
Already have a WPMU DEV account? Log In