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.
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, and where WPMU DEV members can install Hummingbird Pro directly to any connected site.
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 WizardCopy chapter anchor to clipboard
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.
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 DashboardCopy chapter anchor to clipboard
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:
- W3 Total Cache
- LiteSpeed Cache
- WP Performance Score Booster
- WP Fastest Cache
- Speed Booster Pack PageSpeed & Performance Optimization
- 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.
When you click Clear Cache, you will be met with a Clear Cache modal where you can select which cache types you want to clear. The available options are:
- Page Cache
- Asset Optimization Cache
- Gravatar Cache
- Redis Cache
- Varnish Cache
Tick the boxes of each type that you want to include in the removal and click Clear Now to proceed.
View Documentation – Click to access Hummingbird usage documentation. (This document)
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 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.
Hummingbird’s features are powerful tools that can effectively improve your WordPress site speed without much effort on your part. Check out our blog, how to Optimize WordPress for Speed with Hummingbird, to get the low-down on the best ways to speed up your site.
2.3 Performance TestCopy chapter anchor to clipboard
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. Each test requires a minimum of five minutes of rest time before a new test can be run. If you haven’t conducted a performance test, click Test My Website to initiate one.
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 MetricsLink 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.
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.
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 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 (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 AuditsLink 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.
Each issue, or alert, is color-coded: yellow, for mild and moderate issues; or red, for issues that are significantly impacting performance.
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 DataLink 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. 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 ReportsLink to chapter 3
Reports is where you schedule regular testing and determine who is notified of test results.
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.
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 SettingsLink 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.
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.
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 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.
2.4 CachingCopy chapter anchor to clipboard
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.
2.4.1 Page CacheLink 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. These assets are stored on the CDN and will automatically be purged when assets on the CDN expire, which is currently every two months.
If your site is hosted by us and you have the Static Server Cache option enabled in your Hub, note that any “clear page cache” action in Hummingbird will also clear that server cache. See the Static Server Cache chapter in the WPMU DEV Hosting > Tools doc for details.
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.
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.
Tick the checkboxes to select which pages you want to include in the preload cache feature. We recommend that you always have the homepage enabled.
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.
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. OpCache has already been enabled on WPMU DEV hosted sites so there is no need to configure this feature if you are hosted with us.
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.
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:
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. If you want to view the timestamp, simply look out for it in the bottom tag of the page source.
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.
Enable this to include your headers in Hummingbird’s cache feature.
Below the general settings, you can see the Exclusions settings.
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.
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!
Exclude specific cookies by entering their IDs in this field.
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 CacheLink 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.
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.
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.
If your site is running on an OpenLiteSpeed server, you may need to manually configure the Cache-Control header for browser caching in your WebAdmin Console following their guide here. Be sure to set Expires by Type to 31536000 (1 year) to meet Google’s recommended benchmark. Alternatively, you could follow this OpenLiteSpeed guide to automatically load directives from the .htaccess file.
Don’t sweat it if this seems a little out of your depth. Contact support and our experts will help you out. :)
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.
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.
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.
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”.
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.
2.4.3 Gravatar CacheLink to chapter 4
Gravatar caching allows you to store local copies of avatars used in comments and in your theme. You can control how often you want the cache purged depending on how your website is set up. This is a great option to enable if you have an active blog or community!
Just click on Activate and you’re all set. Simple as that.
From here, you can choose to clear the cache when needed or Deactivate Gravatar Caching altogether.
2.4.4 RSS CacheLink to chapter 4
RSS Caching is handled by WordPress itself and activated by default. But Hummingbird gives you control over it.
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.
2.4.5 IntegrationsLink to chapter 4
The integrations feature enables you to connect third-party providers to gain more control over your caching.
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.
Proceed to enter your host, port and password, and click Connect.
You should receive a message informing you that Redis has connected successfully.
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.
Click Disconnect to disconnect Redis or Configure to access your host, port and password credentials that you used to connect.
2.4.6 Cache SettingsLink to chapter 4
The settings tab allows you to make even the smallest adjustments for your own convenience.
Admin Cache Control
Admin cache controls allow you to put a button on top of your WordPress Dashboard so you don’t have to come 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.
On a WordPress Multisite Network, you will also have the option of clearing the cache on all subsites. To action this, click Clear page cache on all subsites, and you will be asked to confirm the removal of the data.
To proceed with clearing cache across all your subsites, click Clear Now or click Cancel to exit.
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 CompressionCopy chapter anchor to clipboard
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.
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.
For WPMU DEV hosted sites, Gzip compression has already been configured and no further action is needed. 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.
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
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.
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.
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 OptimizationCopy chapter anchor to clipboard
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
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 AssetsLink to chapter 6
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.
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.
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.
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.
You can navigate between the Automatic and Manual tabs to view both sets of information. The Automatic 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.
- 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.
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.
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.
Click on the toggle for the respective option to activate the ideal Automatic mode for your site.
Whichever Automatic option that you choose, it can be configured to your liking. The configurations cover the three sections below.
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.
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.
Remember to click Publish Changes to save your configurations.
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.
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.
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.
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. You can navigate between the Manual and Automatic tabs to access both sets of information. The main Manual 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.
Summary – Provides a guide to approaching Manual Optimization in a smart and safe way.
FAQ – A list of frequently asked questions with their respective answers.
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.
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.
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 a 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:
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.
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.
Don’t load file – If you click on this tool, it will prevent the file from loading.
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.
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, filter your assets as either hosted or external, or even search for the file you want to optimize by name.
Once you have finished with all of your configurations, remember to click Publish Changes to keep the optimizations you have made.
2.6.2 CDNLink to chapter 6
Learn more about the CDN in our CDN tutorial video.
Note that the Hummingbird CDN only serves CSS and JS files. To serve image assets from our CDN (jpg, png, gif, webp only; SVG is not supported), you’ll want to use the CDN option in Smush Pro.
2.6.3 ToolsLink 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.
2.6.4 Asset SettingsLink 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.
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.
Remember to click the Save Settings button to keep your configuration.
2.6.5 Multisite Asset OptimizationLink 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.
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.
2.6.6 Asset Optimization TipsLink 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.
Clicking that will append this to the URL in the browser’s address bar to let you know Asset Optimization is disabled temporarily:
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.
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:
Select the Compress and Combine options and click apply. Then click the “Publish Changes” button to push the changes live.
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.
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 SmushCopy chapter anchor to clipboard
Once you’ve run your first Hummingbird scan, you may find that some of your images need to be optimized.
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.
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 Plugin.
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.
2.8 Advanced ToolsCopy chapter anchor to clipboard
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 that 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.
- Plugin Health – Enables you to address critical plugin issues from right inside the plugin.
2.8.1 GeneralLink to chapter 8
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.
On a Multisite network, you have the option to check a box that will apply the settings globally. If this feature is enabled in the network admin area, the URL Query Strings feature will be hidden on subsites.
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.
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.
On a Multisite network, you have the option to check a box that will apply the settings globally. If this feature is enabled in the network admin area, the Emojis feature will be hidden on subsites.
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.
2.8.2 Database CleanupLink to chapter 8
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.
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.
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.
2.8.3 Lazy LoadLink to chapter 8
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.
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.
The On click option, which is supported by most websites, will hide all comments until a Load comments button is clicked by visitors.
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.
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.
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.
Remember to click Save Changes to apply your adjustments.
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.
The comment limit displays the number of comments that are set to be pulled from your database.
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.
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.
Make sure you have Gravatar caching activated, which will store copies of the avatars used in comments, to further speed up your page.
2.8.4 System InformationLink to chapter 8
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.8.5 Plugin HealthLink to chapter 8
The Plugin Health feature enables you to address critical plugin issues from right inside the plugin. It gives you the ability to resolve issues that persist beyond the scope of your regular automatic detection and fixes. You can target issues related to the Page Cache Preloader and Asset Optimization, as well as view the following useful data statistics:
- Database Data Size
- Database Index Size
Note that the options in this advanced feature should be used sparingly and only if necessary to remedy a persistent issue that may be impacting performance on your site. It is not to be considered or used as an additional optimization feature.
For example, the Preload caching feature will create entries in the wp_options table in your database while it’s building the cache; that is perfectly normal. Also, when the Asset Optimization feature has not yet completed the optimization of your files, there can be many orphaned database entries in the wp_postmeta table; that too is normal.
In most cases, you’ll see the Page Cache Preloader data disappear once it has finished building the cache, and the Asset Optimization meta data will clear as well once that’s completed.
If you are not sure whether you should use this feature for an issue on your site, don’t hesitate to start a live chat and our support superheroes will be happy to assist you.
Page Cache Preloader
This section gives you the option to forcefully delete the cache related to the Page Cache Preloader, which can sometimes be the issue behind problems experienced inside the plugin.
If you are using the Plugin Health feature on a WordPress Multisite Network, the Page Cache Preloader tab will only be visible in the network admin dashboard. This is expected as Page Caching can only be configured by network admins.
To use this tool, click the Force Purge Cache button.
You can also remove the cache by clicking on the trashcan icon in the same row as the fields.
The Asset Optimization section focuses on orphaned data and Custom Post Type information related to asset optimization.
This section allows you to remove individual fields by clicking the trashcan icon. When deleting the Orphaned asset optimization meta data field, you will be asked to confirm the removal. Click Delete to proceed or click Cancel to exit without making any changes.
2.9 Uptime ProCopy chapter anchor to clipboard
Uptime Monitoring is one of the awesome perks exclusive to WPMU DEV members.
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.)
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.
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:
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.
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: 188.8.131.52, 184.108.40.206.
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.
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.
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 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.
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.
If you no longer wish to use Hummingbird’s Uptime Monitor, click the Deactivate button to disable it.
2.10 SettingsCopy chapter anchor to clipboard
The General settings in Hummingbird help you manage your Translations and Usage Tracking.
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.
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.
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.
The Import and Export features enable you to download your Hummingbird Asset Optimization configuration from one site and apply it 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.
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.
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.
Also, there is a Reset Settings button. If you want to reset all your settings immediately, you can use this button to do so.
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 TroubleshootingCopy chapter anchor to clipboard
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
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.
This Status statement indicates the time it took for a site to achieve TTFB.
How to fix
- If yours is a high traffic site, upgrade your server resources to improve your server response time.
- Enable Hummingbird’s page caching. This can substantially improve your server response time for logged out visitors and search engine bots.
- 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.
- 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
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.
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.
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:
- First, run a file check in the Asset Optimization module.
- 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.
- Combine as many of the non-critical styles as you can, compress them, and then move them to the footer.
- 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
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.
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.
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
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.
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
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.
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.
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.
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:
- 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.
- 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
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.
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
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.
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.
How to fix
- Use Hummingbird’s Asset Optimization module to move critical styles inline.
- Combine non-critical styles, compress your stylesheets, and move them into the footer.
Uses efficient cache policy on static assets
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.
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.
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.
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:
- Deactivate the theme and/or your plugins one by one to find the culprit, then remove it or find a comparable substitute.
- 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 IssuesLink 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.
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:
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
Uptime errors after changing domain
If you change the domain (URL) that your site resolves to (for example, in Settings > General in your site’s wp-admin, or when changing Primary domain name in your WPMU DEV Hub), the Uptime Monitor might still try to check the old domain that it was originally connected to, and return errors or report the site as down.
To resolve this issue, simply deactivate Uptime on the site, then reactivate it so it connects to the domain currently associated with the site.