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

Privacy Policy Information

Upon activation or when certain features are configured, this plugin may add cookies to the user’s browser, store personal information in your database, or integrate with 3rd-party applications. You may need to disclose this information to your site visitors. For details, see Our Plugins in our privacy policy documentation.

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

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.

Optimize Elementor

Using Elementor and want some optimization tips? Check out our blog posts on how to Optimize Elementor Using Smush and Hummingbird and how to Optimize Elementor for Core Web Vitals Using R.O.S.E. for some inside information on how to use the two world-class plugins together.

Optimize WPBakery

Optimization can often be quite general, but having an approach that is specific to your needs can be greatly beneficial. Check out our blog posts on how to Optimize WPBakery Sites and Optimizing WPBakery’s Impreza Theme for some insider tips on how to speed up sites that are specifically running with WPBakery.

Optimize Divi

If your site is running with Divi and could use a little pick-me-up, we’ve got you covered. Check out how to Optimize Divi with Hummingbird and Smush for all the tips and tricks.

Optimize Astra

Using the Astra theme? Check out our blog on Optimizing Astra with Hummingbird and Smush for details on how to boost this lightweight theme’s performance even further.

Optimize Slider Revolution

Pro level visuals don’t have to come with a performance penalty. Check out our blog post on How to Speed Up Slider Revolution in WordPress for tips on using Smush and Hummingbird to showcase your dynamic content with maximum efficiency.

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.

2.1 Quick Setup Wizard

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

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.

The Dashboard consists of the Overview panel and Quick Access panels for each Hummingbird module.

Overview

The Overview panel provides a snapshot of Hummingbird’s current configuration and the results of the latest performance test.

Click the Desktop/Mobile toggle above your Performance score to switch between Desktop and Mobile reports.

Hummingbird Dashboard ovreview

When you click the Clear Cache button at the top of the screen, a modal window will pop open where you can select which active cache types you want to clear. Note that this button will only appear here if at least one of these cache features is enabled:

  • Page Cache
  • Asset Optimization Cache
  • Gravatar Cache
  • Redis Cache
  • OpCache
  • Varnish Cache
  • CloudFlare (if integrated)

Check the box for each active cache type you want to clear, and click Clear Now to proceed.

clear cache modal

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.

The module displays your current scores for each metric that contributes to your overall Performance score, as seen in the Overview module above.

Click the Run Test button to trigger a new Performance Test. Click the More Details link or the View Full Report button to view the full Performance Report for your site.

Hummingbird Dashboard Performance module

Gzip Compression

Gzip achieves significantly greater compression than .zip because .gzip doesn’t have to be self-extracting.

The module displays the currently active file compression types. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Gzip module

Asset Optimization

The nuts and bolts of your performance must-dos: minify, combine, optimize, and position files to improve page speed.

The module displays summary information about how many assets are enqueued, as well as file size reductions. It also indicates whether you’re using the WPMU DEV CDN to deliver your optimized assets. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Asset Optimization module

Page Caching

Page caching creates and stores static HTML copies of your pages and delivers those to the user’s browser to dramatically reduce page load time.

The module simply displays the current active status of Page Caching. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Page Caching module

Browser Caching

Browser caching stores temporary data on the user’s device so they don’t have to download the same assets every time they visit your pages. This greatly reduces page load time on subsequent visits.

The module displays the current expiry time of cached file types, and indicates if you have connected your Cloudflare account to Hummingbird. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Browser Caching module

Gravatar Caching

This feature caches local copies of user Gravatars so they don’t have to be downloaded on every page visit. The module simply indicates the current status of the feature. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Gravatar Caching module

Image Optimization

Use Smush Pro, already integrated into Hummingbird, to manage image resizing, compression, and optimization.

This module indicates the current status of the Smush plugin, along with the total image filesize reduction. Click the Configure button to access Smush settings screen.

Hummingbird Dashboard Image Optimization module

Advanced Tools

Manage query strings, cart fragments emojis, prefetch requests, and maintain your database. Click the Configure button to access the feature’s settings screen.

Hummingbird Dashboard Advanced Tools module

Uptime Monitoring

This feature monitors your site’s uptime, and notifies you if your site is ever inaccessible.

The module displays summary information for the last 7 days, including overall accessibility, total downtime and average response time. Click the View Stats button to access the feature’s settings & detailed statistics screen.

Hummingbird Dashboard Uptime Monitoring module

Reports

Automate your workflow with daily, weekly or monthly reports sent directly to your inbox.

The module indicates which report types you have configured on your site and their frequency. Click the gear icon of any report type to access that report’s settings.

Hummingbird Dashboard Reports module

Configs

Preset configs allow you to save your Hummingbird configurations so that they can be applied to another site in just a few clicks.

Config Dashboard widget

2.3 Performance Test

Copy chapter anchor to clipboard

The Performance Test Overview panel presents you with a summary of your current performance report, including your current overall score, the date of the last test, as well as how many Opportunities, Diagnostics and Passed Audits are in your current report.

Performance test overview

Click the Desktop/Mobile toggle next to your score to switch between Desktop and Mobile reports.

Click the Reporting or Settings tabs to access the optional Performance Test features in your wp-admin. See the corresponding chapters of this document for more information about each one.

Beneath the Performance Test overview, you’ll find detailed result of the latest Performance Test broken into two sections:

See the corresponding sub-chapters of this document for more information about each section and subsection.

2.3.1 Score Metrics

Link to chapter 3

This section displays the metrics that directly affect your overall performance score. You may recognize them as they are the same metrics you’ll find when running a performance test at Google’s Pagespeed Insights, or when running Lighthouse in your Chrome browser.

Click the icon on the right of any metric to be redirected to the corresponding page at Google’s web.dev site for more information, or view a short description of each below.

Score metrics

To the left of those metrics, you’ll see a handy pie-chart that illustrates how much each metric contributes to your overall performance score. According to this page at web.dev, the weighting of each metric is chosen to provide a balanced representation of the user’s perception of performance.

Breakdown of score metrics

Here’s a breakdown of each metric, and how it affects your overall performance score. Click any one to jump to the corresponding section in this document for more information about each:

Speed Index

Performance Test Metrics Speed Index

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

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

This metric contributes to 10% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

First Contentful Paint

Performance Test Metrics First Contentful Paint

The First Contentful Paint score reflects the amount of time it takes for any piece of visible content to render on the screen.This includes images, non-white textual elements and SVGs. Note that content delivered to the page in iframes does not affect this metric.

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

This metric contributes to 10% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

Largest Contentful Paint

Performance Test Metrics Largest Contentful Paint

The Largest Contentful Paint score reflects the amount of time it takes for the largest image or block of text to fully render on the screen.

This is very similar to the First Contentful Paint metric above, but it better reflects user experience as it is a more reliable indicator of when the user sees your page fully loaded.

This metric contributes to 25% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

Total Blocking Time

Performance Test Metrics Total Blocking Time

The Total Blocking Time score reflects the total amount of time that a page is blocked from responding to user input. This includes mouse clicks, screen taps, or keyboard clicks.

Inefficient script loading, parsing or execution are some of the major factors that contribute to a low blocking time score.

This metric contributes to 30% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

Time to Interactive

Performance Test Metrics Time to Interactive

The Time to Interactive score represents the amount of time it takes for a page to become fully interactive. This is the point at which the page displays useful content and responds to user input within 50ms

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

This metric contributes to 10% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

Cumulative Layout Shift

Performance Test Metrics Cumulative Layout Shift

The Cumulative Layout Shift score refers to the sum total of all individual layout shift scores. That’s any time an element changes its position while the page is still loading.

For example, this can happen when images or buttons load slower than the text, or when slow ad scripts cause ad content to be dynamically inserted into the content.

This metric contributes to 15% of your overall performance score. For more information about this metric and how to improve it, see this page at web.dev.

2.3.2 Historic Field Data

Link to chapter 3

The Historic 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.

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.3 Audits

Link to chapter 3

The Audits section details Performance Test results, broken down by type and outcome.

By default, all opportunities, diagnostics, and passed audits are displayed in this section. To filter audits by metric type, click the filter icon.

Filter audit button

Then, select a metric type. In addition to displaying all audits, the list of audits can be filtered by the following metrics:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

Filter by audit type

2.3.4 Opportunities

Link to chapter 3

This section outlines opportunities to improve your page load speed and overall performance score, as reported by the Hummingbird Performance Test.

This section outlines opportunities to improve your page load speed and overall performance score, as reported by the Hummingbird Performance Test.

Click on a reported opportunity to view additional details about the issue, as well as tips on how to address it.

Click on a reported opportunity to view additional details about the issue, as well as tips on how to address it.

The list of opportunities that may be reported by the Performance Test are outlined below.

NOTE

Every site is different. It’s possible that not every recommendation can be implemented for your site, and some recommendations may not produce a notable improvement to site performance.

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.

'eliminate render blocking resources' audit

To eliminate render-blocking resources:

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

Learn more about how render-blocking resources can affect site performance from web.dev.

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.

'properly size images' audit

Smush is the easiest way to serve properly sized imagery on your site. To serve properly sized images in Smush:

  1. Enable Detect and show incorrectly sized images. 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.

Learn more about how image size can affect site performance from web.dev.

Perfect Your Images with Smush

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

Defer Offscreen Images

Deferring images below the fold (offscreen) means visitors can start interacting with your website without waiting for content further down the page to load. This is called lazy loading.

'defer offscreen images' audit

Smush comes packed with bullet-proof lazy loading. To defer offscreen images, activate Lazy Load and configure your preferred loading animation – no coding required.

Learn more about how offscreen images can affect site performance from web.dev.

Minify CSS

CSS files control the look and feel of your website. Often, these files come with a lot of extra ‘bloat’ that they don’t need. By compressing those files and removing all the excess you’ll reduce payload sizes and reduce your page load speed. Optimizing CSS files includes removing comments, formatting and duplicate code.

'minify CSS' audit

Use the Hummingbird Asset Optimization module to compress your CSS files. To minify, locate the CSS files in the assets page and click the Compress button on the right. For Pro users, Hummingbird provides access to the WPMU DEV CDN for additional savings.

Learn more about how unminified CSS can affect site performance from web.dev.

Minify JavaScript

Compressing JavaScript files removes unnecessary code such as comments, formatting, and other non-critical information. This makes the file smaller allowing your pages to load faster.

Use the Hummingbird Asset Optimization module to compress your JavaScript files. To minify, locate the JavaScript files in the assets page and click the Compress button on the right. For Pro users, Hummingbird provides access to the WPMU DEV CDN for additional savings.

'minify JavaScript' audit

Note that some of your files may not be hosted on your server. Hummingbird cannot compress JavaScript files hosted on a separate domain – if one of these files needs to be minimized, you can:

  1. Find where the asset originates (plugin, theme, or custom code) and replace it with an optimized file.
  2. Ignore this recommendation and continue using the file as is. While leaving files uncompressed may affect your performance score, it is recommended for essential plugins or themes when the files can’t be altered.

Learn more about how unminified JavaScript can affect site performance from web.dev.

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

'reduce unused CSS' audit

To reduce unused CSS:

  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.

Learn more about how unused CSS can affect site performance from web.dev.

Remove Duplicate Modules in JavaScript Bundles

Avoiding large JavaScript libraries can help prevent a large JavaScript payload for your page. This, in turn, reduces the time needed by the browser to download, parse, and execute JavaScript files.

It is always preferable to use smaller yet functionally equivalent JavaScript libraries to prevent a large JavaScript bundle size.

'reduce duplicate modules' audit

To improve your performance score, optimize your dependencies in order to achieve significant reductions in JavaScript library size.

Learn more about optimizing your dependencies from Google Web.

Efficiently Encode Images

Images are an important asset to any website, however they also are the biggest contributor to slowing down website load times. Optimizing and compressing the images will result in faster page load times.

'efficiently encode images' audit

Smush’s automatic bulk optimization feature is the easiest way to remove unused image data without reducing quality. To optimize and compress images in Smush:

  1. Install Smush and follow the instructions to get set up. Once you’ve chosen your desired settings, smush all your existing images to ensure they are compressed.
  2. Next, switch to the Directory Smush tab and start a directory smush. Find your active theme, select it and proceed to optimize all the images in your theme.
  3. WPMU DEV members get access to the pro features of Smush, including double the compression, the ability to serve your images via the WPMU DEV CDN, and an option to serve images to WebP. If you’re a serious user, Smush Pro could be the ideal option for you.
  4. Lastly, images should be displayed at the same size as their container. Enable the Detect incorrectly sized image feature and check your key pages to ensure images are being output correctly – this will highlight images you may be serving too large, or too small.

Learn more about how uncompressed images can affect site performance from web.dev.

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.

'serve images in next gen formats' audit

Smush Pro‘s CDN feature is the easiest way to serve images in next-gen format on your site. 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.

Learn more about how image formats can affect site performance from web.dev.

Enable Text Compression

Compressing text-based resources such as HTML, CSS, and JavaScript with GZIP shrinks your files and makes your site faster.

'enable text compression' audit

You can easily enable GZIP compression for any local files using the GZIP Compression tab. For any externally hosted resources, you’ll have to make sure the provider enables the compression there.

Learn more about how text-based resources can affect site performance from web.dev.

Preconnect to Required Origins

Establishing a connection with a third-party origin often involves significant time as it involves DNS lookups, redirects, and several round trips. Whenever your site needs to fetch resources from a third-party origin such as a CDN, you should consider pre-connecting to that origin to make your application feel snappier.

'preconnect to required origins' audit

You can use <link rel=”preconnect”> to inform the browser that your page intends to establish a connection to another origin and that you’d like the process to start as soon as possible. As an example, if your page is fetching multiple resources from another origin (https://example.com), you can add the following code inside the <head>:

<link rel="preconnect" href="https://example.com">

The browser won’t begin fetching the resources before it needs them, but at least it can handle the connection aspects ahead of time, saving the user from waiting for several roundtrips when your browser is fetching the resources from this origin.

Learn more about how establishing connections can affect site performance from web.dev.

Reduce Initial Server Response Time

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.

'reduce initial server response time' audit

To reduce initial server response time:

  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.

Learn more about how initial server response time can affect site performance from web.dev.

Avoid Multiple Page Redirects

When a browser requests a resource that has been redirected, it must make an additional HTTP request at the new location to retrieve the page. This extra step can delay your page from loading by hundreds of milliseconds.

'avoid multiple page redirects' audit

To avoid multiple page redirects, consider the following suggestions:

  1. The Status section lists resources that are being redirected. Update the links to these resources to point to the new location.
  2. If you’re using redirects to divert mobile users to a mobile version of your page, consider using a responsive theme instead.
  3. Redirects can also be caused by a plugin or theme. Disabling plugins one at a time can help you find the culprit.

Learn more about how redirects can affect site performance from web.dev.

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 <link rel=preload> to tell the browser to fetch critical resources earlier.

'preload key requests' audit

To preload key requests, instruct your browser to download key resources as early as possible:

<link rel="preload" href="late-discovered-styles.css" as="style">

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, and image. For a complete list, click here.

Learn more about how preloading can affect site performance from web.dev.

Use Video Formats for Animated Content

Replacing animated GIFs with videos will reduce the amount of data you send to your users and the load on your system. Converting GIFs to video files can provide a massive performance improvement with very little effort.

'use video formats for animated content' audit

To replace animated GIFs with videos, follow the steps below (if you need help, a developer can help walk you through the process):

  1. Convert your GIFs to videos. There are CLI packages available that will do this for you or you can use a standard online GIF-to-Video converter.
  2. Once converted, replace the <image> tag with a comparable <video> tag and configure the element to behave like a GIF. Set your video to auto-play, no sound, on a continuous loop. If the image is hardcoded in your theme template, you can replace the <image> tag with the following code:

Note: You’ll need to upload the video to your media library and replace the source.

  1. If you have your homepage set to a post or page using the block editor, delete the image block and replace it with a video block. Enable auto-play, mute the audio, and use the loop option under the block settings on the right.

Learn more about how animated content can affect site performance from web.dev.

2.3.5 Diagnostics

Link to chapter 3

This section outlines additional issues that may impact overall performance, as reported by the Hummingbird Performance Test. These diagnostics are not necessarily related to page speed, but are related to web development best practices.

This section outlines additional issues that may impact overall performance, as reported by the Hummingbird Performance Test.

Click on a reported diagnostic to view additional details about the issue, as well as tips on how to improve it.

Click on a reported diagnostic to view additional details about the issue, as well as tips on how to improve it.

The list of diagnostics that may be reported by the Performance Test are outlined below.

NOTE

Every site is different. It’s possible that not every recommendation can be implemented for your site, and some recommendations may not produce a notable improvement to site performance.

Avoid Enormous Network Payloads

The time your page takes to load is directly proportional to the total size of network requests it makes. Reducing the overall size of resources visitors have to load will increase your score here. The recommended size is around 1600Kb for the average site, which would mean a load time of less than 10s for poor 3G connections.

'avoid enormous network payloads' audit

To reduce resource size, consider the following suggestions:

  1. Optimizing your resources removes unnecessary or redundant bytes of code and hence reduces payload size and script parse time. Hummingbird’s Asset Optimization module can help you to minify your resources.
  2. Text-based resources such as your HTML, CSS, and JavaScript files should be served with GZIP compression to minimize total network bytes. Hummingbird can enable GZIP compression for all the compressible resources.
  3. Caching your files can reduce network cost as the browser can serve cached resources instead of fetching them from the network. You can configure file caching using Hummingbird.
  4. Serve compressed images, and serve them in WebP format whenever possible since it provides better compression than PNG or JPEG, which means faster downloads and less data consumption. Smush Pro has a blazing-fast CDN which can automatically convert and serve your images in WebP format to compatible browsers and gracefully fall back to original PNGs or JPEGs on non-compatible browsers.

Learn more about how resource size can affect site performance from web.dev.

Serve Static Assets with an Efficient Cache Policy

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.

'serve static assets with an efficient cache policy' audit

Use Hummingbird’s Browser Caching feature to enable browser caching on all your resource types. 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. For these, 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.

Learn more about how caching can affect site performance from web.dev.

Avoid an Excessive DOM Size

Everything inside your document is a node – HTML tags, text inside the tags, and comments. These nodes have a hierarchical relationship, making a tree of nodes called the DOM tree. A large DOM tree harms your network efficiency and load performance as the browser has to parse lots of nodes that aren’t displayed above-the-fold. Additionally, a large DOM tree increases memory usage, requires massive style calculations, and produces costly layout reflows.

'avoid an excessive DOM size' audit

This diagnostic’s score depends solely on the total number of nodes found on the page. The median is 1400 nodes; however, for a perfect score, your DOM’s total nodes should be lower than 275. To improve your score, try the following suggestions:

  1. Most of the time, your theme is responsible for adding redundant DOM nodes to your site. Activate the default TwentyTwentyOne theme, and compare the performance score. If the score improves, that means your current theme is the culprit, and you should either use another efficiently coded theme or work with the developer to see what changes can be made.
  2. Since the total number of nodes depends on the size of the page, break large pages into multiple smaller ones to reduce the total node count.

Learn more about how DOM size can affect site performance from web.dev.

Avoid Large Layout Shifts

Large layout shifts can create a frustrating experience for your visitors as they make your page appear visually jarring, as page elements appear suddenly, move around, and affect how your visitors interact with the page.

'avoid large layout shifts' audit

Avoiding large layout shifts is essential in creating a smooth and streamlined experience for your visitors.

Learn more about how layout shifts can affect user experience from web.dev.

Largest Contentful Paint Element

A “content element” is an HTML element, such as:

  • An image element
  • A video element
  • An element with the background image loaded via the URL function (instead of declaring it in the CSS)
  • Block-level elements such as <h1>, <h2>, <div>, <ul>, <table>, etc.

'largest contentful paint element' audit

This diagnostic is purely informative. Learn more about how content element painting can affect user experience from web.dev.

Reduce JavaScript Execution Time

This audit measures the total impact of JavaScript on your page’s load performance. JavaScript can slow down a page in many ways, including parsing, compiling, executing, as well as network and memory usage. Reducing the size of your JavaScript files can dramatically improve this metric. Ideally, the JavaScript bootup time should be less than 500ms.

'reduce JavaScript execution time' audit

To reduce JavaScript execution time, try the following suggestions:

  1. Optimizing JavaScript files removes unnecessary or redundant bytes of code and hence reduces payload size and script parse time. Hummingbird’s Asset Optimization module can help you to minify your JavaScript files.
  2. JavaScript files should be served with GZIP compression to minimize total network bytes. Fewer bytes downloaded means faster page loads. Hummingbird can help you compress your JavaScript files.
  3. Caching your JavaScript files can reduce network cost as the browser can serve cached resources instead of fetching them from the network. You can configure caching of your JavaScript files using Hummingbird.

Unfortunately, there is no way to improve bootup time for scripts served from another domain. Scripts from other domains mentioned in the Status section are likely being added by a plugin or your theme. For these, 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.

Learn more about how JavaScript execution time can affect user experience from web.dev.

Minimize Main Thread Work

This audit breaks down your main network thread into its different tasks. The browser generally spends the most time parsing, compiling, and executing your JavaScript. In most cases, delivering smaller JavaScript payloads can reduce the time the browser spends on your main network thread.

'minimize main thread work' audit

To minimize main thread work, try the following suggestions:

  1. Optimizing JavaScript files removes unnecessary or redundant bytes of code and hence reduces payload size and script parse time. Hummingbird’s Asset Optimization module can help you to minify your JavaScript files.
  2. JavaScript files should be served with GZIP compression to minimize total network bytes. Fewer bytes downloaded means faster page loads. Hummingbird can help compress your JavaScript files.
  3. Caching your JavaScript files can reduce network cost as the browser can serve cached resources instead of fetching them from the network. You can configure caching of your JavaScript files using Hummingbird.

Unfortunately, there is no way to optimize scripts served from another domain. Scripts from other domains mentioned in the Status section are likely being added by a plugin or your theme. For these, 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.

Learn more about how main thread load can affect user experience from web.dev.

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

ensure text remains visible during webfont load' audit

To ensure text remains visible during webfont load for Google Fonts, pass the desired value in the query string display parameter:

https://fonts.googleapis.com/css?family=Roboto&display=swap

For fonts hosted locally, add the font-display property to the @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.

Learn more about how webfont loading can affect site performance from web.dev.

2.3.6 Passed Audits

Link to chapter 3

This section lists all audited elements that have a score of 90 or above. While it is by no means necessary to take action on any element in this section, there may still be opportunities for improvement.

Just like with Opportunities and Diagnostics above, click on any element to pop it open and view details about it. If any have a score between 91 and 99, you’ll see suggestions on how that score may be improved.

Performance Test passed audits

2.3.7 Reporting Pro

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.8 Performance Test Settings

Link to chapter 3

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 score

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 creates and stores static HTML copies of your pages and posts, which require fewer scripts and no database interaction to load. These static pages are served to visitors whenever possible, reducing server load and dramatically improving pagespeed.

WPMU DEV STATIC SERVER CACHE

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.

Once the Page Caching is enabled, you can clear full page cache manually at any time by clicking the Clear Cache button at top-right of the Page Caching screen.

Hummingbird Page Caching

If you have also activated the Asset Optimization module in Hummingbird and have enabled the option to serve your optimized assets from the WPMU DEV CDN, the notice here will display a reminder that page cache will clear when those assets expire (automatically every 2 months).

Notice in Page Caching when WPMU DEV CDN is active

Actions that automatically clear full page cache

In addition to manually clearing page cache as seen above, Hummingbird includes options to trigger a full purge of page cache automatically when certain actions are made.

Changes to file structure

When there is a change to your site’s file structure, like when installing or updating a plugin or theme, a full page cache purge is most likely needed to ensure that your content displays correctly on the frontend after the change. By default, Hummingbird will clear the cache for you automatically when it detects a change to your file structure, but you can adjust that behavior in the File Change Detection section of Caching > Settings if needed.

On a schedule

You can schedule the automatic full purge of page cache to occur at any interval you need. This can be handy for sites that only update rarely or on a set schedule. See Cache interval below for more info.

Whenever a post or page is updated

Page cache can be set to clear automatically when any post or page is updated, ensuring the frontend of your site always displays current content to your visitors. See Clear full cache when post/page is updated below for more info.

When comments are posted

Page cache can also be cleared any time a comment is published to a post on your site, ensuring your comment sections are always up-to-date. See Clear cache on comment post below for more info.

Note that actions related only to WordPress settings & options, like changing your timezone in general settings for example, will not trigger an automatic cache purge. WordPress does not have any hooks available for those actions that Hummingbird can use.

Page Types

Select page types to be cached

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

Users developing their own themes can use the define(‘DONOTCACHEPAGE’, true); constant to prevent their page template from being cached.

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

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. This can occur 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 checked if this is enabled.

preload-caching-settings

Cache interval

Cache interval is the maximum period of time you want to pass before Hummingbird refreshes your site’s page cache. 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

Hummingbird includes built-in integrations with popular server-side caching solutions.

Integrated server caching options

  • Purge Varnish caching – Enable this option to automatically purge Varnish cache on your server, if enabled, whenever you publish posts, pages or comments.
  • Purge OpCache – Enable this option to clear OpCache, if enabled, when you click the Clear Cache button in the admin bar.

Note that these options can only be activated in Hummingbird if the respective cache features are enabled on your server.

If your site is hosted by WPMU DEV, you will see that, while the OpCache option is greyed out, a notice appears there to inform you that the integration is already enabled by default for your site.

OpCache enabled by default on WPMU DEV hosting

Page Cache Settings

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

Page Cache optional settings

Include logged in users

By default, logged in users are not served cached pages, 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 pages 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 this option 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 this option to cache 404 pages.

Clear full cache when post/page is updated

Enabling this option will cause Hummingbird to refresh the cache when any post/page is updated, including when saving any changes made in the WordPress Customizer. This means that cache will be cleared for the post/page, as well as any archive pages where the updated post can be found (blog, category, tag, author, date, etc.).

Enable debug log

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

Identify cached pages

Enable this option 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. An additional comment will be inserted at the bottom of the page source showing the timestamp of when the cached file was created.

Note that some servers may strip out comments in source code, but you can always check for this response header in your browser’s developer tools in any case:
hummingbird-cache: Served

Serve compressed versions of cached files

Enabling this option 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 be greyed out.

Cache on mobile devices

By default, page cache only affects desktop devices. Toggle on this option to enable page caching for mobiles devices as well, and help your users save their mobile bandwidth.

Clear cache on comment post

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

Cache HTTP headers

By default, Hummingbird won’t cache HTTP headers. Enable this feature to include them and help resolve issues if security headers are not detected on cached pages.

Subsites

By default, subsite admin are unable to disable Page Caching for their sites. To allow a network or subsite admin to disable Page Caching for their sites, toggle on Allow subsites to disable page caching.

Enable page caching for subsites

Note that this does not allow subsite admins to modify network settings.

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.

Where cache files are stored

Hummingbird stores static HTML copies of your pages & posts in the following directory:
wp-content/wphb-cache/[your-site-name]/[page-name]...

Each page & post is stored in its own folder, and each has a unique hashed filename, like:
133664efc1b97e0836b643de948afaf0.html

Customizing the hashed filename

Hummingbird can create and serve separate cached files for your pages according to whether a cookie is set or not, and what its value is set to. This can be very useful for marketing campaigns where you want page cache enabled, but need different versions of a page to be served to different users depending on the cookie.

To do that, you need only create a cookie with this at the beginning of its name (the rest of its name can be anything you like):
wphb_cache_

Once done, a separate cache file will be created for any page that has that cookie/value combination, in addition to the standard cache file for a page without the cookie.

For example, you could set a campaign cookie like this on your site, set to trigger for whatever conditions you need, and you would find a separate cache file for any page where the cookie has been set by your site visitors:

If you have another campaign cookie set up, that too would create a cached version of the page and be served to any other visitor for whom that particular cookie is set.

The image below illustrates an example of what you might see in your File Manager for a page where cached versions have been created for the default page, as well as a couple for various cookies set.

Cached pages in file manager

2.4.2 Browser Cache

Link to chapter 4

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

Note that for WPMU DEV hosted sites, Browser Caching has already been configured and no further action is needed.

Status

The Status panel at the top displays the current expiry time of all filetypes: Javascript, CSS, Media & Images. If you make any changes here, click the Re-check Status button to ensure the status displayed is up-to-date.

Hummingbird browser caching status

Server Type

The process of enabling browser caching will differ depending on which server type is powering your site. Begin by selecting your Server Type in the Configuration options.

Select server type for browser caching

If you are unsure of the server type powering your site, you can go to Hummingbird > Advanced Tools > System Information and select Server from the dropdown to find that info.

Expiry Time

Next, set the desired Expiry Time. You can choose to set the same expiry time for All file types, or set it differently for Individual file types.

Adjust browser caching expiry time

If your site is hosted on an IIS server and you select that as your Server Type above, the Expiry Time settings will be hidden here, as you will need to set up browser caching manually following the directions in this Microsoft help article.

Setup

Finally, follow the directions in the Setup section according to the Server Type specified above.

Apache/Litespeed

Hummingbird can automatically apply the needed rules to your .htaccess file. Select the Automatic tab, then click the Activate button to get that done.

Activate browser caching on Apache server

If the Automatic method does not work on your site, switch to the Manual tab and copy the rules shown there and paste them in your .htaccess file. Then click the Re-check status button at top-right.

Configure browser caching on Apache server

If you do not have access to, or are uncomfortable modifying, your site’s file system, we recommend contacting your host for assistance enabling browser caching.

Nginx

If your server type is Nginx, Hummingbird cannot configure browser cache for you automatically. You will need to manually add the required rules to your nginx.conf file, which is usually located at either /etc/nginx/nginx.conf or /usr/local/nginx/nginx.conf

Copy the rules shown and paste them in your nginx.conf file manually. Then click the Re-check status button at top-right.

Configure browser caching on Nginx server

If you do not have access to, or are uncomfortable modifying, your site’s file system, we recommend contacting your host for assistance enabling browser caching.

IIS

As noted above, if your server type is IIS, you will need to set up browser caching manually. Click the link to the Microsoft help article displayed there to proceed.

Configure browser caching on IIS server

Cloudflare

If your site is routed through Cloudflare, browser caching is handled there. However, you can connect your Cloudflare account to Hummingbird so you can manage your browser caching settings directly in Hummingbird. That way, you avoid having to log into CloudFlare to clear it every time you make a change on your site.

See the Integrations chapter below for details.

OpenLitespeed

If your site is running on an OpenLitespeed server, Hummingbird cannot configure browser cache for you automatically. You will 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.

Follow the directions shown in the Setup section, then click the Re-check status button.

Configure browser caching on OpenLitespeed server

Alternatively, you could follow this OpenLiteSpeed guide to automatically load directives from the .htaccess file.

NOTE

Don’t sweat it if this seems a little out of your depth. Contact support and our experts will help you out. :)

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.

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

Cloudflare

Cloudflare is a Content Delivery Network (CDN) that sends traffic through its global network to automatically optimize the delivery of your site so your visitors can browse your site at top speeds. With the new Automatic Platform Optimization (APO), Cloudflare can also cache dynamic content and third-party scripts so the entire site is served from cache. To connect to Cloudflare, first click on the plus icon.

Caching integrations Cloudflare

You can connect to Cloudflare using either your Cloudflare account’s email address and Global API key, or using an API token. Click either Global API Key or API Token and enter your API credentials.

Connect Cloudflare modal window

If you’re unsure how to get your Cloudflare API credentials, click either Follow the steps or Need help and follow the instructions accordingly, or else follow the steps below.

To get your Cloudflare credentials, first log in to your Cloudflare account. Then, go to My Profile, and switch to the API Tokens tab.

Select Cloudflare API Tokens tab

To get your Global API key, find the Global API Key row, and click View. Enter your password when prompted.

View Cloudflare global API key

Copy the API key and enter it into the Cloudflare Global API key field in Hummingbird.

Copy Cloudflare global API key

Alternatively, to create an API token, navigate to the API Tokens tab and click Create Token.

Create Cloudflare token

Then, find the WordPress row and click Use Template.

Use WordPress token template

Under Zone Resources, first select Specific Zone from the dropdown menu and then select your website’s domain name.

Select zone resources

Click Continue to summary, and then click Create Token. Finally, copy the WordPress API token and enter it into the Cloudflare API token field in Hummingbird.

Copy Cloudflare API token

Browser Caching

Connecting your Cloudflare account here will automatically configure your Browser Caching settings which you can adjust if needed under the Browser Caching tab by clicking the Configure link. For details on this feature, see Browser Cache above.

Configure browser caching

Automatic Platform Optimization (APO)

Cloudflare’s APO service is an additional cache feature that will serve all site content, including 3rd-party scripts, from their network, ensuring that your site is blazing fast.

Recommended Reading

Cloudflare’s powerful Automatic Platform Optimization (APO) feature is now available in Hummingbird! Check out our blog post on Hummingbird’s Cloudflare APO Integration to learn how this feature can benefit you and your clients.

Enable the service by toggling on the Enable APO option here if desired (no additional plugin is needed). Note that this service is included with Cloudflare’s Professional, Business, and Enterprise plans, but requires payment if you are on their free plan. Details on their blog here.

Once enabled, you can also enable an additional option inside to cache content according to the device types used by your site visitors. Cache by device type ensures that only needed assets are cached and delivered to the user’s browser depending on the device type used: mobile, tablet or desktop.

Enable Cloudflare APO

Click the Re-Check Status button at any time to ensure that data displayed is up to date. Click the Deactivate button at any time to disconnect the Cloudflare integration from your site if needed (this will also deactivate Cloudflare browser 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.

Caching integrations Redis

Connect by entering your Host, Port, and Password, or simply add your UNIX socket path. You can also enter the Database ID, but this is optional.

caching-integration-redis-credentials

When you’re ready, 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.

Redis enabled

When using both Redis and BuddyPress, there is a known issue with the bp_pages cache group that may cause pages not to display or to incorrectly redirect. As a workaround, the bp_pages cache group can be excluded by Redis.

To exclude the bp_pages cache group from Redis, add the following lines to your wp-config.php file:

2.4.6 Cache Settings

Link to chapter 4

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

File Change Detection

By default, Hummingbird will automatically purge the page cache when it detects a change to your file structure, for example when a plugin or theme is activated or updated. But you can modify that behavior here if you wish.

File change detection

  • Automatic – This is the default which will automatically clear page cache with any change to your site’s file structure.
  • Manual Notice – Select this option to display a notice on every screen in your wp-admin prompting you to manually clear page cache if a change is detected.
  • None – This option disables automatic cache purge if the file structure changes, and does not show any notices.

If the Manual Notice option is selected, you will see a notice like this if Hummingbird detects a change to your site’s file structure:

File change detection clear cache prompt

Click the Clear Cache button to clear the full page cache, or click the Adjust notification settings link to be directed to the Page Caching > Settings screen where you can change the option if desired.

2.5 Gzip Compression

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

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 compression

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.

Choose-server-1

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

Copy chapter anchor to clipboard

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
  • Async – Asynchronously load assets, executing them as soon as they’re ready
  • Preload – Preload key assets, ensuring they’re ready as soon as they’re required
  • Don’t load file – Prevents specified files from loading on all pages
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.

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

How does it work button

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.

automatic optimization how does it work

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

close automatic optimization how does it work 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 two sections below.

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

configuration files 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.

Note that when you’re in Automatic mode, Hummingbird will auto-detect newly added plugin and theme files and optimize them for you. However, to avoid conflicts and issues, Hummingbird won’t remove any old files from a plugin or theme that was removed. That’s why we recommend file scanning once in a while to keep everything in sync.

You’ll see a reminder of this in the FAQ section of the How does it work information panel, as described above.

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.

assets-manual-apply-configurations

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 manually optimize (compress, combine, move, inline, defer, async, and preload) 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.

How does it work button

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.

manual optimization how does it work

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.

close manual optimization how does it work 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 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:

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.

Compress button

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!

Combine button

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.

Move to Footer button

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.

Inline CSS button

Defer – For hosted JavaScript 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.

Defer button

Async (asynchronously load) – For external JavaScript files, you will have the additional option to load assets asynchronously, executing them as soon as they’re ready. For unsupported browsers, Async will automatically fallback to Defer, loading the files after the page has fully loaded.

Async button

Preload – Key assets can be preloaded, meaning they will start loading before rendering begins and will be ready as soon as they’re required. As such, preloaded files are less likely to block the page’s render, improving performance.

Preload button

Optimize Font – This option only appears for Google fonts if they are being used on your site. It enables you to optimize font delivery so they don’t trigger the “Eliminate render-blocking resources” recommendation in your performance tests.

Font Optimization button

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

Don't Load button

Each asset will have a status icon indicating its current state. For example, the possible states for the Compress option are:

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

Hover your mouse over any icon for additional information about its active/inactive status.

Toolip example

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

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

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 modal window

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, filter your assets as either hosted or external, or even search for the file you want to optimize by name.

filter assets button

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

Publish changes button

If you wish to switch back to Automatic mode at any time, simply click the Automatic option. A modal will pop up to inform you that the Preset you had configured before (Basic or Speedy) will be applied. You can check the Don’t show me this again box to permanently dismiss that popup if you wish.

Switch to automatic mode

2.6.2 CDN Pro

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. This is all done in the background via CRON task and it may take a few moments for the CDN to appear active.

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

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.

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.

Settings (2 of 2)

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 for 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 on the page:

?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, preload, 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.

Recheck button

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:

Using Avada?

Avada is one of the most popular premium WordPress themes. Check out our blog on How to Speed Up and Optimize Avada for Free Using Our Smush and Hummingbird Plugins for more information on using these two world-class plugins for maximum performance.

Using a Page Builder?

Check out our blog on How To Utilize Page Builders Built-In Optimization Options to learn more about the first steps to take in making your site fly!

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

Select compress and combine

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.

Sort assets

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 Chrome, visit a page on your site, right-click, select Inspect, and open the Console tab.

Right-click to inspect

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

Defer button tooltip

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

Copy chapter anchor to clipboard

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.

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 General

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

remove url query strings 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.

global url query strings settings

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

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.

global emojis settings

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

Preconnect

If your site loads resources from other domains, using Preconnect can provide a faster page loading experience for your users. It tells the browser to set up early connections in the background to lower latency.

Preconnect

By default, preconnect requests are made without the crossorigin attribute. The crossorigin attribute indicates to the browser that resources on the connection are loaded using Cross-Origin Resources Sharing (CORS), which improves web security. If you’d like to make a preconnect request with this attribute, add the word crossorigin at the end of the relevant host.

preconnect

Note that resources loaded with CORS are loaded via a separate connection than resources loaded without CORS. Therefore, in some cases, it may be necessary to add separate preconnect requests for the same host – one request for resources loaded with CORS, and one request for resources loaded without CORS.

Proconnect and crossorigin examples

CAUTION

Improper configuration of the crossorigin attribute in preconnect requests may potentially slow down your site and thus reduce your Hummingbird Performance Test score. You can find more information about crossorigin from Mozilla here.

2.8.2 Database Cleanup

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

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.

2.8.3 Lazy Load

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

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-1

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.

2.8.4 System Information

Link to chapter 8

advanced-tools-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.8.5 Plugin Health

Link to chapter 8

The Plugin Health feature enables you to address critical site 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.

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.

Preload Caching – Database Data

In some sites, the cache preloader can get stuck and create an endless queue of database requests. This can be fixed by deleting the database data. Click the Delete button here to delete all relevant database data and to reset the feature.

Delete data for Preload Caching

Multisite Functionality

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.

Orphaned Asset Optimization Metadata

Data for optimized assets is stored in hidden custom post types with multiple metadata entries in the wp_postmeta table. While clearing Asset Optimization cache should delete both the hidden post types and associated metadata, metadata can sometimes remain and bloat the database. Click the Delete button here to delete the orphaned metadata.

Delete orphaned Asset Optimization metadata

Asset Optimization – Database Data

Much like the above, this option enables you to delete all data associated with Asset Optimization from your database, which effectively resets the feature entirely. Click the Delete button here to clear your database of all Asset Optimization data.

Delete all Asset Optimization data

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

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.

Note that in a multisite network, there is no option to create separate reports for subsites. This is because subsites are located on the same server as the main site and the rest of the network, so subsite reports would be redundant. You’ll see a reminder of this in the plugin interface as well.

Uptime reporting in multisite

Settings

uptime settings

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

The Settings module allows you to change the default Hummingbird settings for translation, plugin data, accessibility, and more.

2.10.1 General

Link to chapter 10

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

Admin Bar

When enabled, this option adds cache clearing shortcuts to the Hummingbird menu in your WordPress Admin bar.

When enabled, this option adds cache clearing shortcuts to the Hummingbird menu in your WordPress Admin bar.

If All Cache is selected, then the Admin bar will include a shortcut to clear all active cache types. Note that you may need to refresh the screen for this to appear the first time.

If All Cache is selected, then the Admin bar will include a shortcut to clear all active cache types.

If Specific Cache is selected, then the Admin bar will include shortcuts to individually clear selected cache types.

If Specific Cache is selected, then the Admin bar will include shortcuts to individually clear selected cache types.

For WordPress multisite installations, the Admin bar will include a shortcut to clear the page cache for all subsites.

For WordPress multisite installations, the Admin bar will include a shortcut to clear the page cache for all subsites.

You’ll then be prompted to confirm the removal of the data.

You’ll then be prompted to confirm the removal of the data.

Translations

Hummingbird will automatically use the language set in your WordPress Admin Settings as the Active Translation language, provided there is a matching translation available.

Hummingbird will automatically use the language set in your WordPress Admin Settings as the Active Translation language, provided there is a matching translation available.

In order for the Active Translation language to reflect in Hummingbird, please 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. 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, Hummingbird should fully reflect the new Active Translation language.

Usage Tracking

Usage tracking is incredibly useful for our designers, and enables us to learn more about what features you use and don’t use. It is a completely anonymous feature, and helps us deliver more relevant features in the future.

To enable usage tracking, toggle on Allow usage tracking and click Save Changes.

To enable usage tracking, toggle on Allow usage tracking and click Save Changes.

2.10.2 Configs

Link to chapter 10

The Configs module allows you to save your Hummingbird configurations so that they can be applied to another site in just a few clicks.

Save a Configuration

To save your current configuration, click Save Config.

To save your current configuration, click Save Config.

Then, enter a name and optional description for the configuration and click Save.

Then, enter a name and optional description for the configuration and click Save.

Saved configurations are listed alphabetically. To view details about a saved configuration, click the configuration in the list.

To view details about a saved configuration, click the configuration in the list.

To make changes to a saved configuration, click the gear icon. The available actions are:

  • Apply – Apply the saved configuration to this Hummingbird installation.
  • Download – Download the saved configuration as a .json file.
  • Name & Description – Edit the name and description for the saved configuration.
  • Delete – Permanently delete the saved configuration.

To make changes to a saved configuration, click the gear icon.

Upload a Configuration

To upload a configuration that you’ve downloaded from another site, click Upload, and select the relevant .json file from your computer.

To upload a configuration that you’ve downloaded from another site, click Upload, and select the relevant .json file from your computer.

Hummingbird will import the uploaded configuration and add it to the Preset Configs list.

Apply a Configuration

To apply a saved configuration to your Hummingbird installation, click Apply.

To apply a saved configuration to your Smush installation, click Apply.

You will be asked to confirm that you would like to replace your current settings with the saved configuration. Click Apply to proceed.

You will be asked to confirm that you would like to replace your current settings with the saved configuration. Click Apply to proceed.

Sync with the Hub (Hummingbird Pro Only)

Hummingbird configurations will automatically be synced with the Hub. Synced configs can be accessed and applied directly from the Config or Security modules in the Hub, or from the Hummingbird installation of any of your sites.

If a new config created in the Hub doesn’t appear immediately in the Hummingbird Settings module, click Re-check to get the updated list to refresh your data.

If a new config created in the Hub doesn’t appear immediately in the Hummingbird Settings module, click Check again to refresh your data.

2.10.3 Import/Export

Link to chapter 10

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.

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.

Import Hummingbird settings

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.

2.10.4 Data & Settings

Link to chapter 10

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

2.10.5 Accessibility

Link to chapter 10

Color Accessibility

Color accessibility will improve the visibility of elements as per the Web Content Accessibility Guide requirements, up to level AAA which is the highest level of compliance. Toggle on Enable high contrast mode and click Update Settings to activate this mode.

Enable color accessibility

2.11 Troubleshooting

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

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

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.

2.12 Get Support Pro

Copy chapter anchor to clipboard

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.