This guide explains how to use Hummingbird’s performance and optimization features to speed up your site while preserving resources.

Once Hummingbird is installed and activated, refer to this guide for assistance configuring and managing Hummingbird. The index on the left provides quick access to guidance on specific features.

NOT SEEING YOUR CHANGES?

If you’ve updated content but the changes are not appearing on your site, click the Clear Cache button to clear old cached images and generate new ones.

If you haven’t installed Hummingbird yet, then you should visit the Hummingbird page where you can explore the plugin’s many features, download the free version, and where WPMU DEV members can install Hummingbird Pro directly to any connected site.

INSTALL SMUSH PRO

Many performance enhancing opportunities involve image optimization, and it just so happens that we produce the most successful image optimization tool in WordPress History — Smush Pro. We strongly encourage you to install and activate Smush, because when you do, Hummingbird’s image optimization tips will include a link to the Smush module where that fix can be applied.

2.1 Quick Setup Wizard

Link to chapter 1

The Quick Setup Wizard popup will appear on every Hummingbird screen the first time the plugin is accessed after activation. We recommend running an initial test to help establish a benchmark from which you can assess the impact of your performance and optimization efforts, but you can skip the test if you wish.

Click Run Performance Test to initiate a test or click Skip to dismiss the Quick Setup permanently.

If you choose to run the performance test, a progress bar will appear.

When the test completes, you will be taken to the Performance Test Page and the results of the test will populate the relevant elements there. See the Performance Test section below for an explanation of how to configure and understand your test metrics and reports.

Usage tracking

WPMU DEV never collects your personal data or that of your site users. If you’ll allow us, we will collect anonymous data about how Hummingbird is used, what errors occur and under what circumstances, and we use this data to improve the plugin. Leave the usage tracking option enabled if you want to help out or disable it if you’d prefer not to.

2.2 Dashboard

Link to chapter 2

The Dashboard consists of the Overview panel and quick access panels for each Hummingbird module.

Clear Cache – The Clear Cache button will not be present unless Asset Optimization, page caching or browser caching is activated. Integrating Cloudflare will also enable the Dashboard Clear Cache button. Once enabled, hover over the button to see which modules will be affected when cache is cleared.

View Documentation – Click to access Hummingbird usage documentation. (This document)

Overview

The Overview panel provides a snapshot of Hummingbird’s current configuration and the results of the latest performance tests. Admins, particularly those managing multiple sites, can use the Overview to quickly determine if a site is performing within acceptable limits, and can do so without having to spend valuable time checking each performance indicator, individually.

Quick Access

The Quick Access panels provide easy access to every Hummingbird module. View current data, turn modules on and off or click the Configure button to access a specific module’s configuration screen.

Performance Test – Hummingbird scans the site, assessing the speed and efficiency of multiple assets and scripts, and then renders a report that includes guidance on how to resolve issues and improve performance.

Audits – Audits provide a detailed breakdown of a site’s performance and instructions on resolving performance issues.Click More details to access the site’s most recent audit.

Historic Field Data – Displays the site’s performance over the past 30 days. Click More details to access the site’s current historical data.

Customize Widget – The link accesses the Performance Test Settings panels, where admins can configure where and to which users a site’s performance data is displayed.

View Full Report – Click to view the site’s most recent performance report.

GZip Compression – GZip achieves significantly greater compression than the .zip because .gzip doesn’t have to be self-extracting.
Asset Optimization – Nuts and bolts performance must-dos: minify, combine, optimise and position files to improve page speed.
Caching – a cache control suite for page, broswer, RSS and gravatar caching.
Advanced Tools – manage query strings, cart fragments emojis and prefetch requests, and maintain your database.
Uptime – monitors a site’s uptime, downtime and average response time.
Image Optimization – Use Smush Pro, already integrated into Hummingbird, to manage image sizing, compression and optimization.
Settings – Manage translations, data storage and accessibility.

2.3 Performance Test

Link to chapter 3

The Performance Test screens cannot be accessed until an initial test has been conducted, either during Quick Setup or when the tab is accessed for the first time. If you haven’t conducted a performance test, click Test My Website to initiate one.

First time performance test page

Overview

The Overview panel provides a snapshot of Hummingbird’s current configuration and the results of the latest performance tests. Admins, particularly those managing multiple sites, can use the Overview to quickly determine if a site is performing within acceptable limits, and can do so without having to spend valuable time checking each performance indicator, individually.

The Performance Test module consists of five sections:

Score Metrics – Five factors that reflect how efficiently and speedily a site delivers functional content, along with best practices to improve each metric.

Audits – A deep dive analysis of 18 factors impacting site performance, presented along with diagnostic data regarding under-performing factors and recommended solutions.

Historic Field Data – Displays the site’s performance over time

Reports – Schedule automatic testing and configure email notifications regarding test results.

Settings – Configure widgets that display test results on the site dashboard and/or in the Hub.

2.3.1 Score Metrics

Link to chapter 3

Score metrics measure the speed and efficiency with which a site presents fully functional content.

The lowest performing metrics appear first in the test results.

Each metric can be expanded by clicking anywhere in its row to reveal a detailed explanation of the metric, the last test score recorded for that metric and some recommended best practices.

Recommendations

The Recommendations section contains links to the specific tests that measure how well a site meets or fails to meet these performance indicators. Click any link to see the applicable test, the most recent score, and in many cases, step-by-step guidance on how to resolve issues.

In some cases, Hummingbird’s own features can be activated or tweaked to address performance issues. In other cases, Hummingbird can identify the issue, but the fix will require using a separate plugin, such as Smush Pro.

Other times, a plugin is not the best solution, but rather, a little code editing is required. Whatever the case, the Hummingbird UI provides instructions on how to accomplish every recommended fix.

Speed index

The Speed Index score reflects the average time it takes for content to appear on the visible screen, or “above the fold.” It is a bit of a composite score, since there are multiple sub-tasks that impact how long that takes.

Additionally, factors outside the site admin’s control also impact the speed index, such as the types of devices accessing the site as well as their various screen sizes.

Click anywhere in the Speed Index row to access the Recommendations

First Contentful Paint

First Contentful Paint (FCP) refers to the period of time between when a user clicks a link to a site, such as a search result or link in another site, to the moment content from the target site appears on screen.

FCP is significant because users increasingly expect pages to load very fast and often associate slow loading pages with a lack of quality or professionalism.

Click anywhere in the First Contentful Paint row to access the Recommendations

First Meaningful Paint

First Meaningful Paint (FMP) refers to the time it takes for primary content to become visible. Primary content is defined as the largest block of content that appears above the fold, regardless of the type of content in that block.

The faster primary content loads, the sooner visitors can engage with the page and the less likely they are to bounce. Primary content is not the same on every page. For example, primary content on a social media site may be user posts while on a blog it might be a featured image or title.

Click anywhere in the First Meaningful Paint row to access the Recommendations

First CPU Idle

First CPU idle (FCI) represents the time it takes for a page to become minimally interactive, meaning most, but not necessarily all, interactive elements are functional.

FCI is sometimes confused with Time to Interactive (TTI). The difference is that FCI only measures when a page accepts user inputs, whereas TTI requires a response to those inputs.

Click anywhere in the First CPU Idle row to access the Recommendations

Time to Interactive

Time to Interactive (TTI) represents the amount of time it takes for a page to become fully interactive, which means that most content is visible and the site responds to user inputs within 50ms.

TTI is useful to identify cases in which a page’s content is visible and appears to be interactive, but actually isn’t.

Click anywhere in the Time to Interactive row to access the Recommendations

2.3.2 Audits

Link to chapter 3

Audits are the data from which the Score Metrics are derived, and provide a detailed look at, virtually, every area of a site’s performance capacity.

More importantly, Audits is where many advanced performance tweaks begin.

You must have run at least one performance test for any audit data to be available. If you haven’t, or want to work with up-to-date data, click New Test to run a test, immediately.

Opportunities and Diagnostics

Audits results are divided into three categories:Opportunities,Diagnostic, and Passed.

Opportunities are specific areas that failed to achieve a passing score on the performance test. The reasons for these failures vary widely, but for each one, a recommended solution is offered.

Diagnostic issues are not necessarily related to page speed, but are assets Hummingbird has flagged as hindering performance, and here too, for each one a solution is offered.

Passed audits are those indicators that achieved a score of 90 or better.

Applying Fixes

Each issue, or alert, is color-coded: yellow, for mild and moderate issues; or red, for issues that are significantly impacting performance.

Hummingbird audits

Click any alert’s row to access a detailed description of the issue, a list of the specific assets involved, and step-by-step instructions on how to resolve the issue.

Follow the How to fix instructions to resolve the applicable issue. Don’t hesitate to contact support for assistance.

2.3.3 Historic Field Data

Link to chapter 3

The Historical Field Data displays a site’s performance data for the past 30 days as reported by the Chrome User Experience Report.

New sites or those with very little traffic can take a long time, even months, to generate enough data for this report to materialize.

The Chrome User Experience Report measures user experience metrics across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled.

2.3.4 Reports

Link to chapter 3

Reports is where you schedule regular testing and determine who is notified of test results.

Begin by enabling the Send scheduled performance reports option. Click the Add Recipient button, then enter a recipient’s name and email address in the fields provided.

Click Add to add the recipient to the notifications list. Add as many as necessary, then use the fields provided to schedule daily, weekly or monthly reports.

Customize the contents of the email notifications to include selected data only, if you wish. Remember to save your settings before exiting the Reports module.

The selected data will be included in the email notifications sent to the configured users following each Performance Test.

2.3.5 Performance Test Settings

Link to chapter 3

Performance test results appear, by default, in widgets on both the site Dashboard and in the Hub. You can configure what data those widgets display.

Dashboard Widget

Desktop and mobile performance data is displayed separately in the Dashboard widget. Enable the data set you wish to see by selecting either Desktop or Mobile. Customize further by selecting the test results you want displayed in the widget.

The Hub

The Hub widget essentially re-creates the Hummingbird Dashboard, but admins can customize which of the three test result categories are displayed by selecting/de-selecting accordingly.

Ignore Test Score

At times you may wish to ignore test results or ensure that other admins do not taken action based on performance data. Enable Ignore Test Results and both the Dashboard and Hub widgets will display greyed-out icons.

2.4 Caching

Link to chapter 4

Caching is a fundamental part of enhancing site performance. Click Activate to enabled the caching module.

Hummingbird Page Caching

2.4.1 Page Cache

Link to chapter 4

Page caching stores static HTML copies of your pages and posts, which require fewer scripts and no database interaction to load. These static images are served to visitors whenever possible, reducing server load and dramatically improving pagespeed.

Page Caching Active

Page Types

Choose the pages you want served from static images. Only pages that update frequently should not be cached.

Users developing their own themes can use the “define(‘DONOTCACHEPAGE’, true);” PHP code to prevent their page template from caching.

Preload caching

Enable preload caching to create and preload cached page and post files automatically. This is marginally faster than the default setting, which waits until someone visits your site to load cached images.

Cache interval

Cache interval is the maximum period of time you want to pass before Hummingbird refreshes your site’s cached images. Overly frequent cache clearing, more than once a day, can cause server issues.

We recommend setting this time relative to the frequency content is updated. There is no reason, for example, to refresh cache every 24 hours for a site that is only updated once a week.

Enable Clear Cache on interval, and then use the timing tool to set the interval period.

Integrations

Purge Varnish Caching – We use varnish caching to improve pagespeed. Enabling varnish purging will ensure that new images for varnish will be created when pages and post are updated.

Purge OpCache – Opchache is an effective caching feature which is enabled by modifying a site’s php.ini file.

The feature is disabled for sites that have not enabled OpCache.

Page Cache Settings

These settings include special case considerations and housekeeping options you may wish to enable.

Page Caching Settings

Include logged in users

By default, logged in users are not served cached images, and therefore, are assured of seeing the most up-to-date content. However, if a site hosts a large number of logged in users simultaneously, serving them cached images can improve performance.

Cache URL queries

Pages with URLs containing query strings, as in: http://example.com/?bar1=a&bar2=b, are not cached by default, because such pages are usually dynamic. Enable Cache URL queries if you want them cached. Doing so may improve pagespeed.

Cache 404 requests

404 pages are typically not cached due to the issue that can cause for search engines. Enable Cache 404 requests to cache 404 pages.

Clear full cache when post/page is updated

Enabling this feature will cause Hummingbird to refresh cache when any page/post is unpdated.

Enable debug log

The Debug log contains information that can be very helpful when something goes wrong. The log file is located here: wp-content/debug.log file.

Identify cached pages

Enable this feature and Hummingbird will insert a comment into the head tag of all cached pages, making it easy to determine if a page is being served from a cached file.

Cache on mobile

Enable/Disable page caching for mobile devices.

Clear cache on comment post

When enabled, page cache will be cleared after every comment on a page/post, thereby ensuring the comments section remains up-to-date.

Exclusions

Page Caching 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

Deactivate page caching

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

2.4.2 Browser Cache

Link to chapter 4

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.

Configure Browser Caching

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 your Server type  from the dropdown.

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 Browser Caching

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 you to edit the server configuration or there’s a problem with automatic workflow, you need to click MANUAL tab and follow the instructions on there.

PRO TIPS

– Don’t sweat it if this seems a little out of your depth. Contact support 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.

Cloudflare getting started

If you are already using Cloudflare for your website, Hummingbird can detect it and show you some settings. It can be ignored, if you wish, 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;

Cloudflare Connection

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”;

Cloudflare API Key

Then it will ask you to enter your password. Copy the API key to enter to your Hummingbird settings area. Remember to save your Cloudflare settings before leaving the page.

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.

2.4.3 Gravatar Cache

Link to chapter 4

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.

Active Gravatar Caching

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

2.4.4 RSS Cache

Link to chapter 4

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

2.4.5 Cache Settings

Link to chapter 4

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

Admin Cache Control

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 you 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):

Clear page cache

File Change Detection

File change detection

Manual notice — Places a global notice in the Admin Area

Automatic — Clears cache automatically

None — Disable File Change Detection

2.5 Gzip Compression

Link to chapter 5

Gzip compresses your webpages and style sheets before sending them to your visitors’ browsers, which makes for faster loading times.

NOTE

Gzip is enabled automatically for all sites hosted by WMPU DEV Managed Hosting.

A status panel will near the top of the page indicating if Gzip is active for the site, and if so, what file types are being compressed.

GZIP Activated

Enable Gzip, first, by selecting your server type, and then enabling compression. If you do not have access to or are uncomfortable modifying your site’s file system, we recommend contacting your host for assistance enabling Gzip.

NGINX – Unless you are hosted with WPMU DEV Managed Hosting, your NGINX servers will not allow Hummingbird to edit the required files, so the code necessary to enable Gzip must be added to the server configuration file, manually. Hummingbird will provide the code that must be pasted into the nginx.conf file, typically located here: /etc/nginx/nginx.conf or /usr/local/nginx/conf/nginx.conf

GZIP for NGINX

Apache – Hummingbird can automatically modify the files necessary to enable Gzip on an Apache server. Select the Apache server type from the dropdown menu and then select Automatic compression.

If you want to apply the code yourself, select Manual and Hummingbird will display the code that must be pasted into the .htaccess file to enable Gzip.

Configure GZIP

IIS – IIS refers to any one of several Microsoft server types. Refer to the Microsoft IIS guidance page for help configuring Gzip.

2.6 Asset Optimization

Link to chapter 6

Asset Optimization is where Hummingbird makes applying advanced performance enhancements as easy and efficient as possible by identifying HTML, Javascript and CSS files which may be compressed, combined or moved to improve performance.

WPMU DEV Members

WPMU DEV Managed Hosting servers run the HTTP/2 protocol which automatically optimizes the delivery of your assets. You can still combine and move your files, but don’t expect huge improvements, as we have already squeezed all the speed we can out of these assets.

Compression – Minify files by stripping unnecessary code

Combine – Combining smaller files results in fewer files making fewer requests

Moved to Footer – Scripts that aren’t required to load a page can be placed in the footer, ensuring they will not impede the loading of other page assets

Inline CSS – Places CSS within the HTML file, reducing the number of files the browser has to download

Defer – Force files to suspend loading until everything else has loaded.

Don’t load file – Prevents specified files from loading on a specific page

NOTE

Asset Optimization works well with the suggestions found in a site’s Audit section. See the Opportunities and Diagnostic sections in Audits to identify assets which may be slowing down your site, and then use Asset Optimization to apply the suggested fixes when possible.

2.6.1 Multisite Asset Optimization

Link to chapter 6

Asset Optimization for multsite subsites must be enabled in Network Admin before the module is available in subsite menus.

To do so, open the Asset Optimization tab from Network Admin, and click Enable Asset Optimization module for your subsites.

Once fully configured, asset optimization must be conducted for each subsite, individually, as described throughout this document. Choose whether to limit control to the SuperAdmin or allow subsite admins to conduct asset optimization tasks. Also enable the WPMU DEV CDN and debug logs is you wish.

2.6.2 Files

Link to chapter 6

When Asset Optimzation is activated, Hummingbird immediately scans your site’s assets to identify those which may be optimized for performance.

If you are a WPMU DEV member or have purchased Hummingbird Pro, you will have the option to enable the WMPU DEV CDN.

asset optimization scan

When enabled, we will host your CSS and Javascript files on our CDN. Take note that this is all done in the background via CRON task and it may take a few moments for the CDN to appear active.

Files

Following a scan, CSS and Javascript files which may benefit from optimization will be listed. Each asset will have a status icon indicating its current state.

CSS Files

Gray 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 icon – marks the files that can be compressed.

Blue icon – New assets selected for compression. The icons on the left indicate that the asset is still compressing.

CSS Files Progress

Newly compressed files will display the compressed file size next to the original file size.

CSS Files Results

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

2.6.3 Advanced Mode

Link to chapter 6

Advanced mode is where admins can apply fixes that Hummingbird cannot apply for them.

advanced switch button

There are three important things keep in mind when optimizing assets:

You will not be able to implement every recommendation. Every site is different, and just because an optimization tweak works for Site A does not mean is will work for Site B. It’s a good idea to consider every performance recommendation, but understand that not every change will improve your site.

Do not make bulk changes to assets, but rather make changes one at time and verify that each has not broken something on your site before moving to the next change. This may seems like a tedious process, but our recommendation is based on  years of troubleshooting experience. Imagine finding something broken on your site after changing 25  things at the same time. Which one of those changes caused the problem?

It is more efficient and, believe it or not, easier to make a change, check the site, make another change, check the site again and so on until all changes have been made.  If a change breaks something, you can simply revert that change and move on to the next one. If a change breaks something that requires help from support to repair, at least you can identify the problem for them, possibly saving a lot of time. All-in-all, the slow and steady approach to asset optimization is by far the better one.

Use the image and explanations below to familiarize yourself with what each option entails.

advanced mode

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.

2.6.4 Tools

Link to chapter 6

If you want to load all your CSS files at the footer but you have some critical CSS codes that need to load in the header, you can use Tools tab. Enter your CSS into the field provided and click Save Changes.

2.6.5 Settings

Link to chapter 6

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. Enable this Pro version feature and 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.

2.6.6 Asset Optimization Tips

Link to chapter 6

Successful asset optimization varies greatly from site-to-site depending on the plugins and themes installed and activated.

In this section, we will look at steps for using Hummingbird’s advanced Asset Optimization tool for successfully compressing, combining, and moving your CSS and JS files without breaking the style or functionality of your website.

NOTE

When configuring Asset Optimization, remember to turn off or clear cache, including page, browser, and server-side object cache. 

1. Install and configure your plugins and theme – If you add or delete a plugin or theme it will change available assets. If you are not seeing assets from a specific plugin or theme, clear your cache and use the “Re-Check Files” button to reload available assets.

2. Use your theme’s file optimization tool first – Premium themes and page builders sometimes include an asset optimization feature that will resolve 80% of your issues. This should be configured before you setup Hummingbird Asset Optimization. Here are some examples of popular theme asset optimization features:

3. Run Hummingbird Asset Optimization – Now that your plugins and theme are activated and setup, run the Hummingbird asset optimization scan. Compress and combine everything. To bulk compress and combine, click the CSS/JavaScript checkbox above each section, click the “Bulk Update” button to open the Bulk Updater module.

Select the Compress and Combine options and click apply. Then click the “Publish Changes” button to push the changes live.

4. Move files to the footer – Move all your files to load in the footer except the JQuery, JQuery-migrate, and core theme JavaScript files. Use the Filter > Theme and Plugin sort tool if you are unsure what files belong to your theme files.

Click the Publish Changes button to push your changes live. This may break functionality or styling but stay calm and continue with testing.

5. Move files with an error to the header – Visit key pages on your site and use the browser console to check for errors. To check for errors with Google Chome, visit a page on your site, right-click, select Inspect, and open the Console tab.

Return to the Hummingbird Asset Optimization tab and move files flagged with an error to load in the header.

6. Defer scripts not needed immediately – Finally, use the “Force load this file after the page has loaded” button available in the JavaScript section to defer scripts that you don’t need immediately (like a form script or a spam protection script).

If you run into any issues, you can quickly deactivate Asset Optimization under the Asset Optimization Settings tab, and contact our support team. Your WPMU DEV membership includes performance optimization consulting from our support experts. Open a support ticket to get started.

2.7 Image Optimization - with Smush

Link to chapter 7

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

image optimization need

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.

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

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.8 Advanced Tools

Link to chapter 8

General

Advanced Tools 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

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

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.

2.9 Uptime Pro

Link to chapter 9

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

uptime

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

uptime widget

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 general

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:

response times

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

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

notifications

With notifications enabled, Hummingbird will send email notifications to the recipients added here anytime the site goes down or becomes very slow.

Once enabled, the admin user configuring Uptime will be added, automatically. Click Add Recipient, then enter the name and email address of those you wish to be notified. Use the drop-down menu to delay Uptime notifications for up up to 30 minutes after the event.

Reports

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

settings

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

2.10 Settings

Link to chapter 10

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

settings

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.

accessibility

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.

2.11 Troubleshooting

Link to chapter 11

This section covers some troubleshooting tasks users can try for themselves, although members are welcome to contact support for assistance resolving any Hummingbird issues.

Audit Opportunities and Diagnostics

Each suggestion in this section is an opportunity to improve your page load speed and estimates how much faster the page will load if the improvement is implemented.

Remember, you will not be able to implement every recommendation. Every site is different, and just because an optimization tweak works for Site A does not mean is will work for Site B. It’s a good idea to consider every performance recommendation, but understand that not every change will improve your site.

Reduce server response time

Overview

Time To First Byte identifies the time it takes for a visitor’s browser to receive the first byte of page content from the server. Ideally, TTFB for your server should be under 600 ms.

Status

This Status statement indicates the time it took for a site to achieve TTFB.

How to fix

  1. If yours is a high traffic site, upgrade your server resources to improve your server response time.
  2. Enable Hummingbird’s page caching. This can substantially improve your server response time for logged out visitors and search engine bots.
  3. If yours is a high traffic site, upgrade your server resources to improve your server response time. Check out the upgrade plans for your WPMU DEV hosting here.
  4. Usually, your installed WordPress plugins have a huge impact on your page generation time. Some are horribly inefficient, and some are just resource intensive. Test the performance impact of your plugins using a plugin like Query Monitor, then remove the worst offenders, or replace them with a suitable alternative.

Eliminate render-blocking resources

Overview

Render-blocking resources are CSS, JS, or font files that are loading before the rest of the content on your page. This can add seconds to your page load time.

Improve page load speed by deferring all non-critical style scripts and loading critical scripts first.

Status

This Status statement indicates that assets may not be loading in the most efficient order, slowing down the site.

Status will be followed by a list of URL paths to assets which are preventing the site from loading more quickly. Each file’s size and an estimate of the savings which can be achieved by relocating this file are also displayed.

How to Fix

Hummingbird helps you move render-blocking scripts to your footer, and combines blocking CSS in your header. Follow the steps below to improve this score:

  1. First, run a file check in the Asset Optimization module.
  2. After making any initial optimization, switch to the “Inline CSS” option to inline the styles which are critical for first paint of your page.
  3. Combine as many of the non-critical styles as you can, compress them and then move them to the footer.
  4. Move critical scripts to the footer and defer the non-critical scripts using the option “Force load this file after the page has loaded”.

Note: It can be tough to get a perfect score for this rule. Some plugins and themes are not able to handle deferred scripts. If the combine and minify all CSS option does not work on your setup, we recommend trying multiple combinations to find the best configuration for your site.

Ensure text remains visible during webfont load

Overview

When you use web fonts on your website, browsers have to download them before any text can be displayed. Most browsers have a maximum timeout, after which a web font will be replaced with a fallback font. It’s recommended to use a font-display descriptor in your @font-face rule to control how text renders when web font download delays occur.

Status

This Status statement indicates that some web fonts are not being loaded in the most efficient manner.

Status will be followed by a list of URL paths to fonts that may load faster if the How to Fix steps are followed.

How to fix

To add the font-display property for Google Fonts, you can pass the desired value in the query string display parameter as shown in the example below:

For fonts hosted locally, add the font-display property to the @font-face CSS rule as shown below:

The font-display supports “auto | block | swap | fallback | optional” values. Try different values to achieve the desired result. You can read about the different values here.

It’s not possible to change the @font-face CSS rule for web fonts hosted with most external services. You should confirm if there is a way to specify the font-display rule with your font hosting service.

Preload key requests

Overview

The late-discovery of critical resources hidden in CSS or JS files can delay the first render, the rendering of text, or loading of critical parts of a page. Use to tell the browser to fetch critical resources earlier.

Status

This Status statement indicates the potential time savings to be achieved by preloading key requests.

How to fix

Use the example statement to instruct your browser to download key resources as early as possible.

The as attribute tells the browser the type of the resource and hence helps to set the priority accordingly. A few common values for the as attribute are script, style, font, image. Click here to see the complete list.

Properly size images

Overview

Your posts and pages should output images that are the correct size for their containers to ensure visitors aren’t loading up unnecessarily large images – particularly for mobile users.

Status</h4)
This Status statement indicates the potential time savings to be achieved by serving correctly-sized images.

Status will be followed by a list of URL paths to images which are not being served in the most efficient size. Each image’s size and an estimate of the savings which can be achieved by applying the suggested fixes is also displayed.

How to fix

Smush is the easiest way to serve properly sized imagery on your site. Following are the options in Smush, which can help you to improve your score:

  1. Enable the “Detect and show incorrectly sized images” option in Smush. This will add functionality to your website that highlights the images that are incorrectly-sized for their container.
  2. For Pro users, Smush has a CDN option to automatically resize and serve correctly sized images for their containers. If you’re not using the Auto Resizing option, you can crop or scale the highlighted images using the WordPress image editor to match the container size.

Serve images in next-gen formats

Overview

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Status

This Status statement indicates the potential time savings to be achieved by serving eligible images in WebP format.

Status is followed by list of URL paths to images that can be served in WebP format.

How to fix

Smush Pro has a fast and intelligent CDN configured specifically to serve images. When in use, the CDN will automatically convert and serve images in WebP format whenever possible, while still serving PNGs or JPEGs to non-compatible browsers.

Remove unused CSS

Overview

By default, a browser must download, parse, and process all the external stylesheets it encounters before it can be rendered on a user’s screen. Removing or deferring unused rules in your stylesheet makes it load faster.

Status

This Status statement indicates the potential time savings to be achieved by removing unused CSS files.

Status is followed by the URL paths to unused CSS files that you may be able to completely remove.

How to fix

  1. Use Hummingbird’s Asset Optimization module to move critical styles inline.
  2. Combine non-critical styles, compress your stylesheets, and move them into the footer.

Serve static assets with an efficient cache policy

Overview

Browsers download and cache (store) assets locally so that subsequent visits to your pages load much faster. You have the ability to specify how long cached assets are stored before the browser downloads a newer version. Ensuring your resources have reasonable expiry times will lead to faster page loads for repeat visitors.

Status

This Status statement indicates how many static assets are not being cached.

Status is followed by list of URL paths to static assets that are not being cached.

How to fix

Hummingbird is the fastest and most efficient plugin to enable browser caching. You can enable browser caching on all your resource types with the click of a button. We recommend setting an expiry time of at least 1 year for all file types.

Additional notes

Unfortunately, there is no way to control the caching headers of external resources served from another domain. Resources from other domains mentioned in the Status section are likely being added by a plugin or your theme. You can:

  1. Deactivate the theme and/or your plugins one by one to find the culprit, then remove it or find a comparable substitute.
  2. Continue using the theme or plugin. This may be a perfectly valid option for services you just can’t live without.

2.12 Get Support Pro

Link to chapter 12

After reading this guide, if you still have questions regarding Hummingbird, don’t hesitate to start a live chat with our support Superheroes or submit a support ticket using the Support tab of your WPMU Dev Dashboard.

Navigate to WPMU DEV DASHBOARD > SUPPORT > NEW TICKET to create a support ticket.