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.

run initial performance test

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

performance test progress bar

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 to opt-out.

2.2 Dashboard

Link to chapter 2

Before we get into the different Dashboard modules, just a note that if you have multiple WordPress performance plugins installed, they may conflict with each other and lead to unpredictable behavior or even break your site. The following list of plugins may cause issues with Hummingbird:

  • Autoptimize
  • W3 Total Cache
  • LiteSpeed Cache
  • WP Performance Score Booster
  • WP Fastest Cache
  • Speed Booster Pack PageSpeed & Performance Optimization
  • WP-Optimize
  • WP Performance
  • Swift Performance Lite
  • WP Super Cache

We recommend only using one performance plugin at a time for the best results.

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 the cache is cleared.

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

clear cache and view documentation buttons in dashboard

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.

dashboard overview widget

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, optimize, and position files to improve page speed.
Caching – A cache-control suite for page, browser, 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.

performance test overview

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.

performance test score metrics

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.

score metrics recommendations

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

speed index metric

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 metric

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 the 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 metric

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 metric

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 metric

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. A solution is offered for each one here as well.

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.

performance issue description

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

how to fix performance issues

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.

historic field data

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

not enough data for historic field data reports

The Chrome User Experience Report measures user experience metrics across the public web. This is 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.

DID YOU KNOW?

WPMU DEV members are authorized up to 10 free email accounts that can be configured in minutes to display the member’s domain in the email address. See our Email Hosting product page for details.

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.

enable scheduled performance reports

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.

add email report recipient

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.

customize email report content

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

performance email report

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 are 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 to be displayed in the widget.

dashboard performance widget settings

Hub Widget

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.

hub performance widget settings

Ignore Current Score

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

ignore current performance score settings

2.4 Caching

Link to chapter 4

Caching is a fundamental part of enhancing site performance. For more information about caching, check out our video below.

 

Click Activate to enable 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 to be 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 the 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.

Note that preload caching should have no adverse performance impact on the average site but it may have an impact on very large sites while it’s running. Both on the frontend and in the admin as well as in the database, as wphb_cache_preload is running in SQL.

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

enable clear cache on interval

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 posts are updated.

Purge OpCache – Opchache is an effective caching feature that 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 it 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 the cache when any page/post is updated.

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.

Serve compressed versions of cached files

This feature will improve performance on servers where gzip compression isn’t already in place. If gzip compression is already enabled on the server, this option will not be available.

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.

Cache headers

Enable this to include your headers in Hummingbird’s cache feature.

Exclusions

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

URL Strings

Page Caching Exclusions

URL Strings will let you specify exact URLs to prevent from being cached. 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

The User agents feature 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!

user agents exclusions

Cookies

Exclude specific cookies by entering their IDs in this field.

cookies exclusions

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

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.

browser cache configuration settings

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

expiry time by individual file types

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.

Setup Browser Caching

NOTE

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.

Which CDN Should You Choose?

If you’re interested in learning more about what a CDN is and how to choose the best one for your site, check out our blog on how to Choose The Best CDN For WordPress.

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 the “Connect your account” link and it will show you the Setup section.

Cloudflare Connection

You need to enter your email and Cloudflare API Key which you can get from your Cloudflare account. You need to go to the My Profile page and scroll down to the end of the page, then you will see the API area. You can click the View button which is in the same row as “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 browsers will download files like CSS or Javascript behind the scene. The expiry time is 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 handled by WordPress itself and activated by default. But Hummingbird gives you control over it.

rss caching

Expiry time – You can set any number of seconds for the 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 the Disable Caching button. Hummingbird will force WordPress to stop caching RSS feed.

disable rss caching

2.4.5 Integrations

Link to chapter 4

The integrations feature enables you to connect third-party providers to gain more control over your caching.

integrations for caching

Redis

Redis is a powerful open-source tool for caching data. It stores data in memory which can be used as a database, cache and message broker. Redis is incredibly quick, it is a fantastic way to improve site performance and it can easily be linked to your site via the integrations feature. To connect Redis, click on the plus icon.

Redis plus icon

Proceed to enter your host, port and password, and click Connect.

connect Redis credentials

You should receive a message informing you that Redis has connected successfully.

redis connected successfully message

The Hummingbird integration feature with Redis allows you to easily clear object cache by clicking the Clear Cache button. You can also disable Redis at any moment by clicking on the Enable object caching toggle.

redis clear cache and disable features

Click Disconnect to disconnect Redis or Configure to access your host, port and password credentials that you used to connect.

2.4.6 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 into this area every time you want to clear the cache. Once you activate this option, you will get a Hummingbird button with a Clear page cache dropdown button at the top of your WordPress Dashboard.

Note: After you click Save Settings, you need to refresh your page for the new button to appear.

Clear page cache dashboard button

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. Learn more about it in our Gzip overview video below.

 
WPMU DEV Hosted Sites

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

A status panel will appear 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

The process of enabling Gzip compression will change slightly depending on which server you choose. Select your server type, and then follow the steps stipulated to enable 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.

server type for gzip compression

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

nginx manual enable gzip compression

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.

Configure GZIP

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.

File Manager

Looking for an easy way to access your files? One of the many tools offered in The Hub is the File Manager which allows you to view and edit your files in just a few clicks.

apache enable gzip compression

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.

Learn more about asset optimization and how to get the best settings with advanced settings in our Asset Optimization video guide.

 

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 Assets

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.

Asset optimization can be utilized in two different modes:

  • Automatic – Optimize your assets and improve page load times based on our automated options.
  • Manual – Manually configure each file yourself to achieve the exact setup that you require for your site.
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 that may be slowing down your site, and then use Asset Optimization to apply the suggested fixes when possible.

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

asset-optimization-scan

In the top right-hand area, you will find two tools that are relevant to both Automatic and Manual optimization. These features are:

  • Re-check Files – This option allows you to have Hummingbird scan your site again to check for any new files while preserving the current settings. 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.

re-check files and clear cache buttons

Automatic

Automatic Optimization is a great way to reap the rewards of Asset Optimization without the hassle of doing a whole manual configuration. If you would like more information about Automatic Optimization, click How Does it Work? to open the information panel.

automatic how does it work link

This information panel gives you access to:

  • Summary – A concise explanation of Automatic Optimization and a guide to configuring it.
  • FAQ – A list of commonly asked questions accompanied by detailed answers.

how does it work and faq information

  • Related articles – Quick links to articles packed full of valuable information.
  • Support – A link to our technical documentation, as well as easy access to our 24/7 live support team.

related articles and contact support

Click on the expand icon to enlarge the information panel and make it full-screen. To close the panel, click outside or click the X in the top right-hand corner.

automatic expand icon to enlarge information panel

Automatic Options

The two different options for the Automatic module are as follows:

  • Speedy (recommended) – The Speedy optimization goes beyond your average optimization by auto-combining smaller files together. Files will only be combined together when two or more of them have identical attributes. This feature is an addition to the standard compression of your files.
  • Basic – Compresses all your files to deliver a faster version of each of them. Site speed is also improved by decluttering your CSS and JavaScript files. This is considered a safe option and is very unlikely to cause any issues or break your site.

Click on the toggle for the respective option to activate the ideal Automatic mode for your site.

automatic optimization options

Automatic Configurations

Whichever Automatic option that you choose, it can be configured to your liking. The configurations cover the three sections below.

Files – Allows you to choose whether you want to optimize CSS or JavaScript files, or both.

configuration files settings

Presets (coming soon) – The presets feature enables you to optimize your themes and plugins without any manual configuration. Click the Vote For The Next Preset button to add your vote for which presets we deliver next.

configurations presets settings

Exclusions – If there are any files that you want to exclude from optimization, they can be listed here and they will be left as-is.

configurations exclusions

Remember to click Publish Changes to save your configurations.

Manual

Manual Optimization mode is a great way to handpick which files to target and it allows you to fully customize your optimization.

If you are switching from Automatic mode to Manual mode, you will have the option to either apply your latest configurations or to start from scratch. Click Apply Configurations to load the configurations made or click Reset Settings to start with a clean slate.

apply latest configurations or reset settings buttons

For a quick rundown of the features offered in Manual Optimization, click the Take a Tour button in the top right-hand corner of the page.

take a tour button

In Manual mode, you can combine, compress, inline, defer or move individual files. With this amount of freedom comes the possibility of damaging your site so if you are unfamiliar with manually optimizing your files, we recommend checking out the How Does it Work? information panel.

manual mode how does it work link

The information panel is a collection of all the resources that you may need in order to understand manual optimization and get started with your manual configurations. The main resources are as follows:

Informational video – This short video gives an overview of the different ways you can optimize files and a general guide to making those changes.

manual optimization informational video

Summary – Provides a guide to approaching Manual Optimization in a smart and safe way.

manual mode summary information

FAQ – A list of frequently asked questions with their respective answers.

manual mode faq

Related articles – Quick links to helpful articles related to manually optimizing your files.

Support – If you require assistance at any point, this section provides access to the WPMU DEV technical documents for more information. You can also click the Contact Support button to be directed to our 24/7 live support team.

manual related articles and contact support

You can make this information panel full screen by clicking on the expand icon. Close the panel by clicking outside or by clicking on the X in the top right-hand corner.

expand or close information panel

Manual Configurations

Before we get into the different optimization tools, there are a couple of important points to keep in mind when making changes to your files.

You will not be able to implement every recommendation. Every site is different, and just because an optimization tweak works for Site A, it does not mean it 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 seem 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.

Hummingbird’s Asset Optimization offers several optimization tools to compress your files and improve page load times. These features include:

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!

The 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 files 1, 2, 3 and 4, the Asset Optimization engine will first try to combine files 1 and 2 and if that fails (due to dependencies described above), it will then try to combine files 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 that slow-loading scripts won’t prevent vital parts of your site from loading quickly. For each 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.

Eliminate Render-Blocking Issues

Read our blog on how to Eliminate Render-Blocking Issues with Hummingbird for more information on common render-blocking issues and how to handle them.

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 “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 (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 and content first.

Don’t load file – If you click on this tool, it will prevent the file from loading.

optimization tools

Each asset will have a status icon indicating its current state.

  • Gray icon – Marks the files that are already compressed (like *.min.js and *.min.css.).
  • White icon – Indicates which files can be compressed.
  • Blue icon – New assets selected for compression.
  • Can’t be compressed – This marks the files that can’t be compressed (usually it’s external resources).

On top of the optimization tools, you will notice additional features to aid the configuration process. These features are:

Bulk Update – If you know that 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.

bulk update feature

Note that you cannot Defer a CSS or set Inline for JavaScript.

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

filter feature

Once you have finished with all of your configurations, remember to click Publish Changes to keep the optimizations you have made.

publish changes button

2.6.2 CDN

Link to chapter 6

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

Learn more about the CDN in our CDN tutorial video.

 

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.

2.6.3 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 the Tools tab. Enter your CSS into the field provided and click Save Changes.

insert css into header tool

2.6.4 Asset Settings

Link to chapter 6

Configure your Asset Optimization settings with the following features:

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 feature and we will host your files on WPMU DEV’s CDN. This is only available on the Pro Version. You can choose to activate/deactivate it here at any moment by clicking on the toggle. The WPMU DEV CDN cannot be activated/deactivated via individual subsites but it can be controlled through the Network Admin settings for all the subsites.

asset optimization settings

Debug – If you experience any issue with Asset Optimization, you can enable the 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.

asset optimization settings

Remember to click the Save Settings button to keep your configuration.

2.6.5 Multisite Asset Optimization

Link to chapter 6

Asset Optimization for multisite 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.

enable asset optimization on subsites

Once configured on the Network Admin side, asset optimization must be conducted for each subsite, individually. Choose whether to limit control to the Super Admin or allow the Subsite Admin to conduct asset optimization tasks. You can also enable the WPMU DEV CDN and debug logs is you wish.

asset settings for multisite network

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.

While you’re configuring things, you can use a handy little Hummingbird feature that allows you to temporarily disable Asset Optimization on the page you’re viewing to check if there are any unwanted layout issues.

In the toolbar on the frontend, click “See this page unminified” in the Hummingbird menu.

See page unminified in Hummingbird

Clicking that will append this to the URL in the browser’s address bar to let you know Asset Optimization is disabled temporarily:

?avoid-minify=true

To get the optimized page back, simply remove that from the URL and reload the page, or click to any other page on your site, then click back to one you’re viewing. Don’t use your browser’s “Back” button though, as you’ll just come back to the unminified page again.

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.

clear cache and recheck files

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.

bulk update 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 Plugin or Theme filter sort tool if you are unsure which files belong to your theme files.

plugin or theme filter

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.

inspect page

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

force load script after page has loaded

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.

Recommended Reading

Our blog post, How To Ace Google’s Image Page Speed Recommendations With Smush, focuses on Smush features that directly impact your Google Page Speed score.

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

image optimization need

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

install smush from 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.

image optimization

Additional Information

After you have activated Smush, head over to our Smush documents to learn more about all of the features. You can also check out our blog for a comprehensive Guide to Image Optimization.

2.8 Advanced Tools

Link to chapter 8

The Advanced Tools tab allows you to further configure Hummingbird to meet your specific site requirements in the following sections:

  • General – Reduce your page load times by introducing a few additional tweaks.
  • Database Cleanup – Clean your database of unnecessary data which could be slowing down your server.
  • Lazy Load – Implement lazy loading to improve page speeds by delaying the loading of specific content.
  • System Information -Provides up to date information on your current system.

General

URL Query Strings

Some of your resource URLs can end with something like “?x=y”, these are the query strings of the URL. Some servers, CDNs or caching systems don’t like query strings and removing them can help to increase speed. Enable this option by clicking on the Remove query strings from my assets toggle.

remove url query strings toggle

WooCommerce Cart Fragments

WooCommerce uses ajax calls to keep the cart numbers up to date even when the page isn’t refreshed. This is super useful on WooCommerce pages but we highly recommend disabling cart fragments on all other pages as it can drastically slow down your page speed.

disable cart fragments setting

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 with this feature which will result in faster load times.

remove emoji js and css files

Prefetch DNS Requests

If you are using third-party services like Google Fonts, Youtube or Google Analytics, telling the browser to prefetch that service’s DNS can help to load your pages faster. We already add the most commonly used third-party services, but you can add any missing ones.

prefetch dns requests

Database Cleanup

database cleanup settings

WordPress saves some less necessary things on your database, like post revisions or spam comments. If you have a big website, those things can become very big and slow down your website. This feature allows you to address that problem by cleaning your database.

You can delete specific sections or you can delete all of them from the Delete All button.

Schedule

Don’t want to constantly revisit this section to clear your database? Simply enable the schedule feature to keep your site running smoothly. Click on the Enable scheduled cleanups toggle to reveal the configurations.

database cleanup schedule settings

Select your frequency from the dropdown menu; you can have the choice between daily, weekly and monthly cleanups. Choose which sections you want to include in the cleanup by ticking the checkboxes next to each item. When you’re ready, remember to click Save Changes.

Lazy Load

Lazy loading delays loading specific content to speed up the overall page speed. In particular, sites with lots of comments, iframes and images can delay your page speed over time.

Top Tip

Be sure to also activate Lazy Load in our Smush plugin, especially for media-heavy sites, to get the most out of this feature.

Lazy loading comments

Loading lots of comments using the native WordPress comment system can slow down your page speed dramatically. Enabling this feature will boost your page speed on pages with lots of comments. Click on the Enable lazy loading comments toggle to reveal the configuration options.

enable lazy loading for comments

On click

The On click option, which is supported by most websites, will hide all comments until a Load comments button is clicked by visitors.

load comments button on front end

Dimensions

This Load comments button can also be customized to suit your website’s style. Adjust the height and width pixels for a unique size. The border radius can be increased to give a more oval shape to the button or decreased to make it appear more rectangular.

button styling dimensions configuration

Color

Change the color scheme by selecting colors for the button background, the border and the hover color. Click on the color and select a shade with the color picker, or you can type in a hex color code.

button styling color

Alignment

The alignment can be set to left, right, or center, with adjustable horizontal margins. The left and right margin adjustments will be grayed out for the center alignment option so if you want an off-center position, you can adjust the margins for the left or right alignment options. Change the top and bottom margins to achieve a unique vertical position.

button styling alignment

Remember to click Save Changes to apply your adjustments.

On scroll

If On scroll is selected, the comments will automatically load as the visitor scrolls them into view. Furthermore, the section to add a new comment will be moved to the top of the comments to make adding comments easier.

on scroll option for comment lazy load

Comment limit

The comment limit displays the number of comments that are set to be pulled from your database.

comment limit display

Grabbing too many comments from the database can result in a slower page speed and so it may be beneficial to limit the number of comments to minimize the query time. This can be changed in Settings > Discussion.

discussion settings for comment limit

Threshold

While the comments limit controls how many comments are lazy loaded, the threshold controls how many comments are required for the lazy load feature to kick in.

minimum comment threshold configuration

NOTE

Make sure you have Gravatar caching activated, which will store copies of the avatars used in comments, to further speed up your page.

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 relevant 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 overview

These features allow you to set up email notifications, immediately alerting you if your website goes down. It also lets you know when your website has come back up. You can 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 plugin installed and 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 visit the Hummingbird Dashboard, you’ll see a blue Activate button in the Uptime module. Click on this button to be redirected to the Uptime Monitoring section within Hummingbird.

Response Time

uptime dashboard

At the top of the Uptime section, you’ll notice some key pieces of information regarding your site. If this is the first time you’ve turned on Uptime Monitoring, it’s possible that there won’t be 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 only reports data for the main site because subsites are always on the same server and share the same uptime data.

Downtime

downtime overview

Uptime monitoring pings your site every 2 minutes from our server in Virginia, USA, and if your site did not respond or your HomePage took more than 30 seconds 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 server and/or plugin Firewall and add these 2 IP addresses to your allowlist: 34.196.51.17, 35.157.144.199.

For the full list of all WPMU DEV IP addresses you may need to allow in your firewall, see our WPMU DEV IP Addresses doc.

PRO TIP FOR CLOUDFLARE USERS

If your domain is routed through Cloudflare with the firewall feature enabled there and you have a firewall enabled on your server as well, WPMU DEV IP addresses would need to be allowlisted in both firewalls (as well as any plugin firewall feature if applicable), and Cloudflare IPs should also be allowlisted on the server firewall to prevent any blockage.

Note that the pings from Uptime are excluded from tracking data in your Hub and do not count as visits in the Analytics tracking section for your site. Other tracking platforms may count the pings though, but they would be counted as a single visit per day as the IP is always the same.

From the Downtime tab, you can see the report about your past downtimes and stats. It also will show you how long your downtime lasted.

Notifications

notifications overview

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

email notifications enabled

Once enabled, the admin user configuring Uptime will automatically be added. 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 to 30 minutes after the event.

uptime email configuration

Reporting

reporting overview

You can also receive both Response Time and Downtime in an email report. Simply enable the Send scheduled uptime reports toggle from the Configure section. Once this has been enabled, you will be able to adjust the recipients, the frequency, day of the week and time of the reports to suit you.

Settings

uptime settings

If you no longer wish to use Hummingbird’s Uptime Monitor, click the Deactivate button to disable it.

2.10 Settings

Link to chapter 10

General

The General settings in Hummingbird help you manage your Translations and Usage Tracking.

Translations

Hummingbird will use the language set in your WordPress Admin Settings by default, given that there is a matching translation available. This means that you can’t edit the Active Translation language in the plugin as it will automatically reflect whichever language is chosen in your Admin Settings.

active translation settings

In order for the Active Translation language to display properly in Hummingbird, you need to ensure that the Hummingbird translation file for the relevant language has been added to your site. Read our WPMU DEV Translations document for a detailed guide to exporting and using translations. Our translation files for Hummingbird can be found here.

Once the Hummingbird translation file has been added to your site and you have changed your site language in your WordPress Admin Settings, the Hummingbird plugin should fully reflect the new Active Translation language.

Usage Tracking

Allowing usage tracking means that we will be able to learn more about what features you are or aren’t using. This enables our designers to make more informed decisions so that we can deliver even better features to you in the future.

It is completely anonymous and we only track how you are using the plugin. For more information on the data we collect, you can read our Usage Tracking document. Click on the Allow usage tracking toggle and Save Changes to help us make Hummingbird better.

usage tracking toggle

Import/Export

The Import and Export features enable you to download your Hummingbird settings from one site and apply them to another. This can save you a lot of time and effort if you are managing multiple sites and want to apply the same configuration to more than one of them.

import and export settings

Import

To import a configuration, click Upload file, select your .json file and click Import. You will then see a pop-up module listing the configurations that you will be importing with that file. Click Begin Import to proceed and the new configurations will overwrite any existing configurations.

begin import button

Export

The export box will show you which configurations will be included in the export. Click Export to export your settings as a .json file. Name the file accordingly, save it and you’re good to go with importing your file onto other sites.

Data & Settings

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

data and settings

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

reset settings 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.

accessibility settings

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.

Initial server response time was short

initial server response time was short

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

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.

The status will be followed by a list of URL paths to assets that 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.

url size savings

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

All text remains visible during webfont load

text remains visible during webfont loads

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.

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

font url savings

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:

query string

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

font face css rule

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

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

url savings on preloading key requests

How to fix

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

download key resources early code

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

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.

Perfect Your Images With Smush

If you’re looking at leveling-up your image delivery and improving page speed at the same time, our Smush plugin’s features are perfect. Automatically resize images to fit their containers at the click of a button, condense image sizes, and much, much more.

Status

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

The status will be followed by a list of URL paths to images that 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 are also displayed.

properly sized image url savings

How to fix

Smush is the easiest way to serve properly sized imagery on your site. Below 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

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.

The status is followed by a 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

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.

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

remove unused css url savings

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.

Uses efficient cache policy on static assets

uses efficient cache policy on static assets

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.

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

urls not 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.11.1 Advanced Issues

Link to chapter 11

Cache errors after update

When updating your core WordPress with Page Cache active, things can occasionally get stuck in the cache, and a series of cache-related errors may appear on-screen at the top of the frontend pages of your site.

The solution to this issue is to delete the advanced-cache.php file from the wp-content directory. The cache-related errors will no longer exist and they will disappear from your frontend pages.

To get that done, log into your site’s server via SFTP or use a file manager utility in your hosting control panel. Navigate to the wp-content directory where you should see the advanced-cache.php file, and delete only that one file.

Location of advanced-cache.php file

Warning: mkdir()

If you get warnings similar to the following on-screen when installing or activating Hummingbird on your site, it may be due to improper server configuration. It could also be due to a conflict with another plugin, theme or script, or even a temporary connection hiccup during the plugin installation.

Warning: mkdir(): Permission denied
Warning: Cannot modify header information – headers already sent

The first thing to try in this case is to delete Hummingbird from your site and re-install a fresh copy in case the previous attempt was corrupted. If that still returns the same errors, then log into your server as above and ensure the following 2 folders exist in the wp-content directory:

wphb-cache
wphb-logs

If either is missing, just create the missing directory and give it the correct permissions. Both of those folders should have the same default permissions as all other WordPress directories: 755

Location of cache and logs files

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.

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