...

Optimizing Your WordPress Site Performance with Smush, Hummingbird, and The Hub

optimizing-your-wordpress-site-performance-with-smush-hummingbird-and-the-hub

If you manage multiple WordPress sites, logging into each individual site to tweak performance settings can be tedious and time-consuming. The Hub’s Performance tab lets you quickly optimize and manage site performance with Hummingbird and Smush from a single tab.

The Hub is a complete WordPress management console that lets you manage one or more WordPress sites from one central location.

The Hub’s dashboard is divided into several tabs, giving site admins quick access to all of the main functions required to manage a WordPress site effectively.

This tutorial focuses on The Hub’s Performance tab, which combines useful ‘at-a-glance’ data, settings, and information from Hummingbird (our speed optimization and caching plugin), and Smush (our award-winning image compression and optimization plugin), allowing you to quickly and easily view and tweak performance settings for all the WordPress sites you manage.

The Hub's Performance Tab
Manage and tweak all of your WordPress sites’ performance settings using The Hub’s Performance tab.

This tutorial shows you how to get the most out of the Hub’s Performance tab. We cover how to:

  • Set Up and Manage Your WordPress Sites’ Performance from The Hub
  • Run a Page Speed Test
  • Analyze Speed Test Results
  • Monitor Your Server’s Response Time
  • Manage And Optimize Your Site’s Images
  • Manage And Optimize Your Site’s Assets
  • Manage GZip Compression
  • Manage Your Site’s Caching
  • Configure Advanced Tools
  • Run Reports

Set Up and Manage Your WordPress Sites’ Performance from The Hub

To manage sites from The Hub, you will first need to connect them. You can do this automatically from the Hub itself or remotely using the WPMU DEV Dashboard plugin.

Once your site is connected, you will then be able to manage and log into it directly from the Hub’s management console.

Until you install and activate the Hummingbird and/or Smush plugins on your site(s), The Hub’s Performance tab will remain grayed out (inactive).

The Hub - Plugins & Themes - Performance tab is inactive.
The Hub’s Performance tab remains inactive until Hummingbird or Smush are activated on the site.

Click on the gray Performance tab and you will be greeted by a splash screen inviting you to activate Hummingbird on your site.

Hub - Performance tab - Activate Hummingbird.
You can activate Hummingbird in the Performance tab.

Once activated, Hummingbird’s modules automatically display key information within various panels inside the Performance tab.

Some modules will remain inactive until they are activated. These include Response Time, Asset Optimization, Advanced Tools, and Smush’s Image Optimization panel.

You can activate modules and the Smush plugin within the Performance tab itself.

The Hub - Performance dashboard.
The Performance dashboard with Smush plugin inactive.

Alternatively, you can activate plugins like Smush from The Hub’s Plugins & Themes tab.

The Hub - Plugins & Themes - Activate Smush
Activate Smush

After activating Hummingbird and Smush, the Performance tab will display combined information panels from both plugins.

The Hub - Performance dashboard with Hummingbird and Smush activated.
The Performance dashboard with Hummingbird and Smush activated.

The Hub’s Overview section also provides you with quick access to the Performance tab. Clicking on the panel takes you to the tab.

The Hub: Overview section -Performance panel
You can get to the Performance tab from the Overview section by clicking on the Performance panel.

Now that you know how to activate the Performance tab in The Hub, let’s explore its main panels.

Run a Page Speed Test

The Performance tab lets you run a Google Page Speed test for your site right in The Hub. If you manage multiple WordPress sites, this feature is a real time saver.

In the Performance panel, click the Run Test button and wait a few seconds. This will run a test of your site’s desktop and mobile speed.

Run a desktop and mobile speed test of your site in the Performance panel.

From this panel, you can also access Hummingbird’s documentation and view more options.

The Hub: Performance tab - More options
Click the ellipsis icon for more options.

The results of your completed Page Speed test display in the Speed test panel, covered in the next section below.

Analyze Speed Test Results

The Speed test panel contains three sub-tabs:

  • Score metrics – Get an ‘at-a-glance’ snapshot of your site’s key speed test metrics with a color-coded score (green, yellow, and red) and speed result.
  • Audits – View detailed test results, identify opportunities and areas where you can improve your site’s performance, and get itemized recommendations on issues that need fixing.
  • Historic field data – This section is aimed at well-established sites and compiles information about how a particular URL has performed over time based on anonymized performance data from users in the real-world on a variety of devices and network conditions.

Clicking on an active item in this panel automatically takes you into your site’s wp-admin and sends you directly to the specific section containing the recommended fixes or improvements.

See performance improvement recommendations with fixes in the Speed test panel.

Learn more about Speed Test metrics.

Monitor Your Server’s Response Time

The Response time panel is one of the main panels you will want to refer to often in the Performance Tab.

It displays data from the Uptime monitoring feature. From here, you can monitor your server response time and know immediately if your site is up, down, or running slow.

For more detailed readings, hover over any data point or section of the average response time line.

The Hub: Performance Tab - Response Times panel.
Monitor your server response time.

Learn more about the Response time panel.

Manage And Optimize Your Site’s Images

The Image optimization panel lets you see how Smush is compressing and optimizing your site’s images. You can also perform tasks like bulk optimize all your site’s images, activate/deactivate lazy loading, manage your CDN, and access the plugin’s additional tool settings.

The Hub: Performance tab - Image optimization panel.
Check how Smush is handling your images in the Image optimization panel.

To view this panel, you must have Smush installed and activated on your site.

Learn more about the Image optimization module.

Manage And Optimize Your Site’s Assets

The Asset optimization panel gives you a quick overview of your site’s optimized assets from Hummingbird.

These include the Total reductions achieved in file size, the Total files that are currently optimized, whether your optimized assets are being served from the DEV CDN, and optimized file types in the Settings section.

To go directly to the corresponding Hummingbird screens in your site’s wp-admin, click either the module Title, the View details link in the Total reductions section, or the gear icon in the Settings section.

The Hub: Performance tab - Asset optimization.
Get an overview of your optimized assets.

Learn more about Asset Optimization settings.

Manage GZip Compression

Gzip compresses your webpages and stylesheets before sending these to your visitors’ web browsers.

This panel lets you quickly see which content types are currently optimized with Gzip on your site and what server type your site is running on.

To configure a different server type in Hummingbird, click the gear icon in the Server Type section.

The Hub: Performance Tab - GZIP Compression panel
GZIP Compression panel.

Learn more about configuring Gzip options.

Manage Your Site’s Caching

Caching speeds up page loading times by storing temporary data on your visitor’s devices so they don’t have to reload assets.

Hummingbird lets you configure different types of cache on your site and the Caching panel lets you see which cache options have been configured on your site using the plugin.

These include the browser cache expiry time set for each file type in the Settings section, page caching, Gravatar caching, RSS caching, and other types of caching enabled on your site via Hummingbird.

You can go directly to the Hummingbird cache settings screen in your site’s wp-admin by clicking on the panel title or the gear icon in the Settings section.

The Hub: Performance tab - Caching panel.
Caching panel.

You can also clear different caches on your site from The Hub by clicking the Clear cache link.

This will bring up a modal window with different options. Choose which caches you want to clear and click the button.

The Hub: Performance tab - clear cache link.
Clear your site’s caches from The Hub.

Learn more about the Caching panel.

Configure Advanced Tools

The Advanced tools panel lets you see a list of all the available Hummingbird tools and their current status.

Click on the title on a gear icon to be automatically directed to the Hummingbird > Advanced Tools screen in your site’s wp-admin.

The Hub: Performance Tab - Advanced Tools panel.
Advanced tools panel.

Learn more about using Hummingbird’s Advanced Tools section.

Run Reports

Your reports panel lets you quickly view the status of your site’s performance and response time reports.

Clicking on an item in this panel takes you directly to the corresponding Reports screen in your site’s wp-admin, where you can then enable or configure a schedule for that feature.

The Hub: Performance Tab - Reports panel.
Get tailored performance reports delivered to your inbox.

Keep Tabs on Your Site’s Performance from The Hub

One of our main goals at WPMU DEV is to continue developing and improving The Hub to provide our users with faster and easier access to WordPress site management.

The Performance tab is no exception. Being able to easily and quickly manage and monitor the performance of various sites from a central location not only saves you a significant amount of time but if you are a web developer or agency managing multiple WordPress sites, it also allows you to scale your business and service more clients.

In addition to the features described above that are specific to the Performance tab, keep in mind that The Hub can be translated into different languages, so you can manage your site’s performance in your language (if your language is not currently available, let us know and don’t worry-it soon will be!)

The Hub lets you view your site’s performance in your language.

Additionally, you will soon be able to completely white label The Hub and use The Hub with your clients, complete with billing, your own templates, and the host of your choice.

Finally, given the wide range of optimization features available in the Hummingbird and Smush plugins, soon you will also be able to save your preferred configuration and bulk apply it to as many new and existing sites as you like.

For more details on using the Performance tab, check out our documentation.  Also, to keep tabs on all the exciting developments we are working on for The Hub and all of our plugins, visit our roadmap.

Last but not least, if you have any questions on using the Performance tab or need help with anything WordPress-related feel free to contact our 24/7 dedicated support team. We want to help you get the best performance possible out of every WordPress site you manage. With The Hub’s Performance tab, you can.

Source: premium.wpmudev.org

Discover more from WIREDGORILLA

Subscribe now to keep reading and get access to the full archive.

Continue reading