Hummingbird

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 Test, Asset Optimization, Caching, GZIP Compression, Image Optimization (with Smush Pro), Advanced Tools and Uptime Monitoring.

 

Quick Setup

When you first install Hummingbird and go to Hummingbird > Dashboard, you will see the Quick Setup popup. This popup allows you to easily run your first performance test. You can skip it with the “SKIP” button at top right corner. We will explain how you can run a performance test whenever you want in the next chapter. But if you want to quickly see your website performance you can run a performance test quickly with the big blue button.

If you click the “RUN PERFORMANCE TEST” button you will see the progress popup. When the test is finished, you will be redirected to the Dashboard page again, and this time you will see the Dashboard with results.

When you go to Hummingbird > Performance Test page without running quick setup you will see the run performance test notification page.

You can click the “TEST MY WEBSITE” button and wait until the Hummingbird finish the test. Or if you run Quick Setup for the first time on the Dashboard screen; you will get the same page, when you go to the Performance Test page:

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 different tabs for different performance sections like Score Metrics or Audits. Let’s check each tab one by one!

Score Metrics

For the Score Metrics tab, Hummingbird will provide you the basic information about how your website handles the request. If you are seeing all the items on this page green that means perfect. But even if you see some yellow or red items, don’t worry, Hummingbird will help you about fixing them.

If you click on the row of these items, the listing will expand and provide you with additional information about what Hummingbird found and how to fix it. Every item has three sections when you expand it; you can get a summary from the Overview section, it will show you the current status from the Status section and what Hummingbird recommends at the Recommendations section.

For many of the recommendations that Hummingbird makes, it is able to make these improvements for you. 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. Let’s check some of the items together.

Speed Index

Speed index represents how much time passed to generate the above the fold content. You can think like even very small improvements can improve this metric. For example, deferring offscreen images (lazy loading) can stop the loading images if visitor not seeing them. So images which are visible to the visitor will load faster. You can configure lazy loading with our Smush plugin Lazyload page. Also, optimizing images can help to improve this and Smush can help about it too.

Or you can move unnecessary Stylesheets (CSS files) or Javascript files from header to footer. With that move, that unnecessary files will start loading after your content and your content will load faster.

First Meaningful Paint and First Contentful Paint

First Meaningful Paint (FMP), calculate how much time primary content takes to become visible. The quicker primary content will allow your visitors to engage with page quicker too. Primary content can be different for different pages. For example, while primary content for the social media site is user posts, it can be a title and featured image for the blog site.

First Contentful Paint (FCP), calculate how much time it takes when the user clicks a link from another site (like a search engine) and wait until the first bit of content. It can be anything like a text or image, this is important because it will feel a user that page started to loading.

The previous recommendations also will improve your website FMP and FCP too. Also, proper caching for your website can boost these values.

Time to Interactive

Time to Interactive (TTI) represents the amount of time it takes for your page to become fully interactive. To become fully interactive, a useful amount of the content should be visible on the page and the page should respond to user interactions in 50ms.

Mainly the Javascript files can affect this metric. So be sure you remove or move to footer unnecessary Javascript files. Also, you can contact your developer to improve them.

First CPU Idle

This represents the time when most elements on your page can respond to user interactions such as clicking a button or typing text into an input field. This will feel your users that they can start interacting with the page.

The other items recommendations also can improve this item too.

Audits

You will see suggestions about how to improve page load speed on the Audits tab. The tab is divided into Opportunities, Diagnostics and Passed Audits. You should focus on fixing all Red notices and improving as many Yellow ones as you can.

As before, expanding the items will give you a suggestion on how to solve it. Let’s check again some of them together.

Reduce Server Response Times

Server response time, mainly related to your server performance. It represents the score about how much time your server needs to answer user requests. Like when user wants to visit a page, how much time passed until your server sends the page. Better hosting companies or packages can improve this score.

Also, enabling Hummingbird Page Caching feature can improve this score too. Other than that removing unnecessary plugins or switch to a more optimized theme helps about the better score.

Serve images in next-gen formats

Most of the images on your website most likely PNG or JPG. You can understand that from the image extension easily; if it’s ending with .jpg its JPG or .png its PNG. If you change that images to JPEG 2000, JPEG XR or WebP types, they can provide better compression. And it will provide faster page load because of fewer data.

Our Smush plugin can help you with that CDN feature > WebP conversion settings.

Efficiently encode images

If you never compress your images before, your images can be bigger than you need, to keep as much as details. But our Smush plugin can help you to compress your images almost without losing any quality. This will make your images smaller and help your pages to load faster.

Eliminate render-blocking resources

Render-blocking resources mean some of the CSS, JS or font files are loading before the content of the page. So removing or moving them to after content can help your page loading speed. You can improve this from Hummingbird > Assets Optimization feature. You can move the files to the footer or you can defer files to load after other things loaded. We will check more on Assets Optimization chapter.

Historic Field Data

This section can show you anonymized real-world stats about how your website performs while visitors request a particular URL of your website. This report can be harder to create because it will track real users, so be patient and give time to see the results. This report is usually generated in 30 days.

Reports

You can schedule regular performance tests and get reports to your email from the Reports tab. Also, you can choose the desired device and result types while running the tests.

Configure

You can activate/deactivate email reports from this option. Once you enable this option you will also see the Schedule option and Time option. So you can specify when you want to get report email.

Customize

You can choose which device report you want from this option. It allows you to choose both individual mobile or desktop and both of them.

Settings

At the Settings tab, you can set some general options for the performance report.

Dashboard Widget

You can choose which plugin dashboard widget should be displayed. It can show Desktop or Mobile, also you can include Score Metrics, Audits or Historic Field Data. If you see checkbox over blue rectangle that means that option activated and will be shown on the widget.

Hub Widget

You can choose which hub performance widget should be displayed. You can check your hub, tabs, and widgets from https://premium.wpmudev.org/hub/my-websites/. You can include Score Metrics, Audits or Historic Field Data for the performance tab on the hub.

Ignore Current Score

If you don’t want to see the current test score you can hide the score with using this option. You need to click “IGNORE RESULTS” button.

When you click the “Caching” sub menu item under the Hummingbird you will be redirected to Page Caching settings page. It comes as deactivated by default and you can enable it from this page.

Page Caching

Page caching will save your pages as HTML, and when your visitors try to access them they will load faster. Because the HTML version of the page doesn’t run PHP process and doesn’t try to access the database.

Note: If you update your page and can’t see the changes on the frontend, press the “Clear cache” button in order to load up your new resources.

Page Types

Below the title, you will see Page Types options. You can select specific page types to cache or not. Also, if you are developing your own page templates you can use “define(‘DONOTCACHEPAGE’, true);” PHP code to prevent that page template from caching.

Settings

After the Page Types, you can see some general settings about page caching. All of these settings are turned off by default except “Identify cached pages” option, and you can activate them by clicking the gray slide icon. Once they are activated icon will color as blue.

Include logged in users

Hummingbird won’t cache or won’t show cached pages for logged in users. It’s helpful for blog-like sites because only admins or authors will log in and they won’t see caches and see changes immediately. But if you have user based site like paid membership sites, including logged in users for the cache can significantly reduce the load of your server.

Cache URL queries

You can realize some files or pages URL ending with something like ?x=y. That means this URL has some query to dynamically change the content. And Hummingbird won’t cache these URLs because they want to be dynamic. But if you still want to improve load time for that URLs too you can try to include them.

Cache 404 requests

If your 404 pages don’t include anything dynamic you can also choose to cache them. But if your 404 pages suggest some content based on what user trying to search or looking for it can be a bad idea to cache 404 pages.

Clear full cache when post/page is updated

Hummingbird can try to detect when you update any page or post, and clear that page cache automatically. You just need to enable this option.

Enable debug log

If you experience some issue and need more information to solve the problem, you can enable debug log. That will put more information about the Hummingbird caching process on wp-content/debug.log file.

Identify cached pages

When you enable this option, Hummingbird will insert a comment into your cached page’s <head> tag. So you can check the page cached or not cached.

Exclusions

Below the general settings, you can see the Exclusions settings.

URL Strings will let you specify exact URLs to prevent from caching. URLs are added one per line and you can use regular expression syntax. We already added a few for you by default, like sitemap.xml.

User Agents is used for preventing caching based on the user agent. It’s helpful to prevent caching for search engines to provide them always live data. Also in this section, we already added some useful settings for you!

Deactivate

Lastly, on this page, you will see the “Deactivate” button. You can use it if you ever want to deactivate page caching completely.

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.

Server Type  – You need to choose the correct server type to get correct instructions to enable browser caching. If you don’t know your server type, you can go to Hummingbird > Advanced Tools > System Information and choose Server from the dropdown on that page. Then you can see server type on “Software Name” part.

Expiry Settings  – Here you can decide how long you would like to keep your cache stored before it’s reset. 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).

Setup – In this section, if Hummingbird can edit your server configuration file, you can click the AUTOMATIC tab and activate Hummingbird browser caching. Hummingbird will handle everything for you.

But if your server doesn’t allow to edit the server configuration or any problem with automatic workflow, you need to click MANUAL tab and follow the instructions on there.

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

Cloudflare Integration

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.

If you are already using Cloudflare for your website, Hummingbird can detect it and show you some settings. It can be not detected too, don’t worry after we enter details everything will be solved.

You need to click “Connect account” link and it will show you Setup section;

You need to enter your email and Cloudflare API Key which you can get your API key from your Cloudflare account. You need to go to My Profile page and scroll down to end of the page, then you will see API area. You can click to “View” button which is at the same row with “Global API Key”;

Then it will ask you to enter your password. And you can copy API key to enter to your Hummingbird settings area. After save Hummingbird Cloudflare settings you will see one main option “Expiry Time” which allows you to change expiry time of your files.

Once visitors request your website, their browser will download files like CSS or Javascript behind the scene. And expiry time means when that downloaded file needs to be updated.

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.

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

RSS Caching

RSS Caching is handling by WordPress itself and activated by default. But Hummingbird gives you control over it.

Expiry time – You can set any seconds to expiry time and your RSS cache will be clear at that time. For example, if you set to 3600 it means the RSS feed will be updated every 3600 seconds.

Disable – If you want to disable RSS caching for any reason, you can do it with DISABLE CACHING button. Hummingbird will force WordPress to stop caching RSS feed.

Settings

The settings tab allows you to make even the smallest adjustments for your own convenience.

Admin Cache Control

Admin cache controls allow you to put a button on top of your WordPress Dashboard so you don’t have to come in this area every time you want to clear the cache. Once activate this option, you will get a “Clear page cache” button on top of your WordPress Dashboard (note: after you Save you need to refresh your pages as well, for the new button to appear):

Pretty neat, right?

File Change Detection

Manual notice will give a global notice inside your WordPress Admin area, Automatic will clear cache automatically for you or you can totally disable File Change Detection by selecting None.

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.

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

Based on your server configuration 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 configure widget.

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

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

For NGINX servers, because of the server doesn’t allow to edit config files you need to manually edit and place necessary codes. Hummingbird will give you the codes and you need to copy paste them to an nginx.conf file which is located at /etc/nginx/nginx.conf or /usr/local/nginx/conf/nginx.conf.

If you feel uncomfortable about editing nginx.conf file you can contact with your hosting provider or get in touch with our support superheroes.

If you are using our hosting, our servers running on NGINX and we already make settings to enable Gzip Compression. So it should be already enabled by default.

For IIS servers, it can be more complicated than others. You can check all the instructions for different file types from https://docs.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2008-R2-and-2008/cc771003(v=ws.10) page. But if you are not comfortable with it, we highly recommend contacting with server provider.

Asset Optimization is probably one of the most powerful features within Hummingbird.

If you are on a Single WordPress installation go to Hummingbird/Asset Optimization and click Activate to begin or, if you are on a Multisite, go to Network Admin/Hummingbird/Asset Optimization and setup your desired options.

Asset Optimization on Multisite is done on a per-site basis. This means that each subsite (including your main site) would need to have a separate Asset Optimization setup. This is not something you would always want for your subsites administrators to have (since it can break the Front End of their subsite) so you can choose who can make these adjustments or you can disable it completely.

The administrators of Subsites on your network will have a link guiding them to this manual, but if you want to grab their attention and leave additional notes, regarding Asset Optimization or anything else for that matter, check out Branda.

Let’s begin – click on Activate in order to scan and optimize your files!

If you have the Pro version, during the checkup process, you’ll be able to choose to store/host your stylesheet files (.css) and Javascript (.js) files on our CDN. Take note that this is all done in the background via CRON task (so it does not slow your site in the process) and will take some time to finish, so just give it a few moments and then refresh your main page 🙂

By default, we minify your files via our API and then send them back to your server. With this setting enabled we will host your files on WPMU DEV’s secure and hyper-fast CDN (only available on the Pro version) which will mean less load on your server and fast visitor experience.

Should you use a CDN for your WebSite? We think that you should, as it will give your website an even better performance, but if you have any doubts or you want to learn more about CDN take a quick look here.

If you wish you can skip this option for now but don’t worry as you can always enable/disable it later from Hummingbird/Asset Optimization.

In this example, Hummingbird was able to reduce my files by 13.9%. You can also see that 32 files were identified. Note that the PRO version gives you access to Super-compression (this is automatically enabled within the PRO version) so you can get even more savings/compression by upgrading your plugin.

Files

Asset optimization engine will list all the files it was able to locate and each file will have its own status. You will encounter these statuses:

Gray compress icon – marks the files that are already compressed (like *.min.js and *.min.css.). Compress option will be grayed out here as those files are already minified

White compress icon – marks the files that can be compressed. The left side of those files, you will see that they are still compressing…

In order to trigger Compression of your files (and the Cron job that does this) just refresh the Main Page of your site from the Front End and then refresh the Asset Optimization page from the Back End. Results will be something like:

Can’t be compressed – marks the files that can’t be compressed (usually it’s external resources).

Make sure to always check file status so you can see what is happening or does it need an extra action 🙂

Advanced mode

If you wish to delve deeper into Asset Optimization and further optimize the speed and loading time of your site click on the Advanced mode.

Before you start please get familiar with the basic guidelines given here.

The most important thing when working with Advanced mode and making changes to how your site loads files are 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 at once. 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 Publish Changes beforehand!)

If a change you make does not work or affects the Front End of your site, then just go back to the Asset Optimization 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.

Let’s explain the available options first.

Compress – Compression removes the clutter from 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. Fewer requests mean less waiting, and faster page speeds!

Asset Optimization engine is built in a way to respect WordPress dependencies for styles and scripts. That means that two or more files will be combined only when they have identical attributes otherwise they will be skipped. For example, if you choose to combine file 1, 2, 3 and 4, Asset Optimization engine will first try to combine file 1 and 2 and if that fails (due to dependencies described above) it will then try to combine file 2 and 3 and so forth.

If your Asset Optimization page does not contain the Combine option this means that the Combine option is disabled because your server has HTTP/2 activated. HTTP/2 automatically optimizes the delivery of assets for you

Move to Footer – When it comes to rendering 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.

Inline CSS – To add CSS styles to your website, you can use three different ways to insert the CSS. You can Use an “External Stylesheet”, an “Internal Stylesheet”, or in “Inline Style”. The inline style uses the HTML “style” attribute. This allows CSS properties on a “per tag” basis.

Defer (Force load this file after the page has loaded) – For JavaScript (JS) files you will have the option to Defer it (force load it after the page had loaded). 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.

Don’t load file – If you click this, it will prevent the file while loading page.

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 pop up that will let you choose which options to apply to all of the selected files.

Note that you can not Defer a CSS or set Inline for Javascript.

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

You can also 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 new files while preserving current setting. For example, this is handy if you installed (or uninstalled) a plugin and are not seeing the files added to the list here.

Clear cache – this option clears all local or hosted assets and re-compresses files that need it.

Tools

If you want to load all your CSS files at the footer but you have some critical CSS codes that need to load in <head>, you can use Tools tab. You will find textarea for your CSS codes, you just need to enter codes and click SAVE CHANGES button.

Settings

Under Asset Optimization/Settings you can:

File Location – By default, Hummingbird will keep your modified assets at /wp-content/uploads/hummingbird-assets folder. If you want to change that you can use this setting.

Super-compress my files – Compress your files up to 2x more than regular optimization and reduce your page load speed even further. This is Auto Enabled on the Pro Version and is not available on the FREE version

Enable WPMU DEV CDN – By default your files are hosted on your own server. With this setting enabled we will host your files on WPMU DEV’s secure and hyper-fast CDN. Only available on the Pro Version. You can choose to activate/deactivate it here. This is only available on single site installation, on Multisite CDN is controlled via the Network Admin settings for all the subsites.

Debug – If you experience any issue with Asset Optimization, you can enable debug option to get more information about the process.

Reset to defaults – If your frontend has fallen apart or you just want to go back to the default settings you can use this button to do so. It will clear all your settings and run a new file check.

Deactivate – you can completely turn off Asset Optimization here.

Once you’ve run your first Hummingbird scan, you may find that some of your 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.

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.

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.

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.

 

General

From General tab you can make additional tweaks you can make to further reduce your page load times.

URL Query Strings – Some of your resource URLs can end with something like “?x=y”, these are the query strings of the URL. And some servers, CDNs or caching system don’t like query strings. So removing them can help to increase speed. You can try to enable this option.

Emojis – By default WordPress has its own Emoji set and loads custom CSS/JS files to convert symbols to emojis. You can remove those files from this option and your files will load faster because of less number of files.

Prefetch DNS Requests – If you are using third party services like Google Fonts, Youtube or Google Analytics, telling the browser to prefetch that services DNS can help to load your pages faster. We are already adding most used third party services but also you can add the missing ones.

Database Cleanup

WordPress saves some less necessary things on your database, like post revisions or spam comments. If you have a big website, that things can become very big and slow down your website. So you can clean your database from this section.

You can delete specific sections or you can delete all of them from the bottom DELETE ALL button.

System Information

If you are experiencing some issues and need to learn your system information like PHP version or server type, you can use this section. It will show you the most necessary information about your website, WordPress and server.

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

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 track how long your site was down for, when the last time your site went down, as well as your server response times.

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

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.

At the top of the Uptime section, you’ll see a lot of interesting information regarding your site. Since this is the first time you’ve turned on Uptime Monitoring, it’s possible that there isn’t much information to see.

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

Keep in mind that Uptime response times will differ from performance test response times because Uptime pings our US-based monitor, and performance tests ping the server actually hosting your sites.

In multisite networks, Uptime reports data for the main site only because subsites are always on the same server and share the same uptime data.

Downtime

Uptime monitoring pings your site every 2 minutes from our server in Virgina, USA, and if your site did not respond or your HomePage took more then 30 sec to load it will send you a notice. If, on the other hand, everything works and loads normally but you are still getting Uptime notices please check your Firewall and whitelist these 2 IPs: 34.196.51.17, 52.57.5.20.

From the Downtime tab, you can see the report about your past downtimes and stats about them. It also will show you how much time your site was staying down.

Notifications

You can configure email notification to get an email when your site down. When you activate the “Configure” option, it will show you recipients and threshold. You can get a notification instantly when your site down or up to 30 Minutes later.

Reports

Also, you can get reports to your email with Response Time and Downtime together. You just need to go Reports tab and enable it from the Configure option. You will get Recipients and Schedule options when you enable it.

Settings

If you no longer wish to use Hummingbird’s Uptime Monitor, from the settings tab, you can completely deactivate Uptime Monitor.

You can set some general settings from the Hummingbird/Settings page.

On the Data & Settings, you can change the behavior of the plugin for data. You can choose to Preserve or Reset from the Settings part. It will only affect the plugin settings. You can choose to Keep or Remove data from the Data part. It will affect the data that the plugin collects based on your site.

Also, there is a Reset Settings button. If you want to reset all your settings immediately, you can use that button.

From the accessibility tab, you can enable High Contrast mode. After enabling this option, the plugin will increase the visibility and accessibility of elements and components to meet WCAG AAA requirements.