How I Used Brotli:11 to Get Even Smaller CSS and JavaScript Files at CDN Scale

This article is about my experience using Brotli at production scale. Despite being really expensive and a truly unfeasible method for on-the-fly compression at higher compression levels, Brotli is actually very economical and saves cost on many fronts, especially when compared with gzip or lower compression levels of Brotli.

Brotli’s Beginning…

In 2015, Google published a blog post announcing Brotli and released its source code on GitHub. The pair of developers who created Brotli also created Google's Zopfli compression two years earlier. But where Zopfli leveraged existing compression techniques, Brotli was written from the ground-up and squarely focused on text compression to benefit static web assets, like HTML, CSS, JavaScript, and even web fonts.

At that time, I was working as a freelance website performance consultant. I was really excited for the 20-26% improvement Brotli promised over Zopfli. Zopfli in itself is a dense implementation of the deflate compressor compared with zlib's standard implementation, so the claim of up to 26% was quite impressive. And what's zlib? It's essentially the same as gzip.

Here Comes Hummingbird 2.1 With Compressed Caching & Cookies

From Asset Organization Tours to several new caching features and upgrades, Hummingbird 2.1 is a humdinger. There’s so much to cover, I can’t summarize it all in this teeny tiny paragraph — so let’s just jump right in, shall we?

A lot of the features I’m about to detail are only available in Hummingbird Pro, so if you’re not already a member, try out our 100% risk free, 30-day trial and get full access to all of our WordPress plugins.

Uptime Notifications For Multiple Users

One of the first things I did when I received access to Hummingbird Pro was to play with this feature. I had no idea it was hot off the press!

Simply, if you need multiple users to review uptime notifications, or if you’d rather someone other than the default user receive updates, Hummingbird 2.1 does it. (Now).

Head over to The Hub, and choose the website you’d like to work with. Then, click on the Hummingbird photo, or click on Performance. Scroll down to the Reports section and click. Choose the frequency of the reports, add recipients, and click on ‘Add Another’ if you’d like more.

Alternatively, you can run reports for all your installed plugins (that have reports) from the Reports tab in The Hub, and add extra recipients there. Note that any new Uptime Report recipient will need to confirm their subscription to said report via email to start receiving them.

Serve Compressed Versions of Cached Files

In the past, we’ve (usually) served compressed versions of files already cached. I say usually, because as Developer Anton kindly pointed out to me, “In most cases the web server will send out a compressed version. But, in rare cases, compression is not enabled on the server side”.

Therefore, this new Hummingbird plugin feature “allows Hummingbird to bypass the limitations of web server configurations, by pre-compressing the files”. Mucho gracias, Anton.

What does this mean for loyal readers like you, in plain English?

I’ll quote our developers yet again (because they’re way smarter than I am): it… “improves performance on servers, where gzip compression is disabled or not available”.

As with many of the other fresh features in Hummingbird, you’ll find the ON/OFF toggle for this option in the backend of your WP installation, Hummingbird >> Caching, with the self-explanatory label, “Serve compressed versions of cached files”.

The Upgrade Page Got an Upgrade

If you haven’t yet taken me up on my offer to try out Hummingbird Pro free for 30 days, you’ll discover in your copy of Hummingbird on WordPress.org that there’s a dedicated upgrade page.

Simple and straightforward, as well as awfully and terribly convenient. ;)

One-Click Skip Page Caching on Mobile Devices

In the support forums, Jade8 asked if we could set up a page caching option to skip mobile devices.

Jade8 was using WPtouch Pro for their mobile users, and the plugin requests site owners disable caching for mobile users.

So, this wonderful update means removing page caching for mobile devices is a one-click feature in Hummingbird. One-click! Yes!

Head over to the backend of your WP installation, find Hummingbird >> Caching, and scroll down until you find the ‘Cache on mobile devices’ toggle. The default setting is ON, but it’ll take two seconds to click it OFF.

Page Caching Option to Clear Cache at Set Intervals

If you’re using a form plugin that requires regular caching every 10 hours, then this shiny bauble of a feature might make your day.

Note: only clear your cache at set intervals if you’re required to do so, otherwise you may encounter server issues. If you’ve got questions as to whether or not this applies to you, feel free to reach out to our amazeballs 24/7 Support Team for help.

Regardless, anyone interested in setting an interval with which to clear the cache of a specific page can find this new addition in Hummingbird Pro >> Cache, and then look for the section marked, “Clear cache on interval”.

Five seconds of work, and a purged cache worth of headaches removed.

Preload Page Caching

A lot of WPMU DEV users told us we needed preloaded page caching, including Will Stocks in the WordPress forums, as well as Julian and amused in the comments of a post detailing Hummingbird’s then-new full caching feature.

We heard you, and we’ve implemented it.

For those late to the preload page caching conversation, think of it like this: preloading “warms” the cache, much like hot water will warm a cup prior to pouring tea into it, so that everything gets toasty faster. In this case, the toastiness refers to the speed of the cache, as a ‘cold’, or empty cache, which we want to avoid wherever possible.

Hummingbird’s default setting waits until a user visits a page before generating a cached version. Now, if you’d like to ‘warm’ the cache in the background when you publish or update a post, just toggle this feature to ON in the Hummingbird Pro plugin >> Caching, then save at the bottom of the page.

Sorry, no tea included, but if you’re drinking tea as you read through these updates, I’d love it if you shared what kind in the comments.

New Integrations!

The sweet spot of this update, we’ve got a lot of new integrations for Hummingbird. Such as?

SiteGround, WP Engine, OPcache, Varnish, Divi, WP Hide & Security Enhancer, as well as IE 11 compatibility.

Add this to our current integrations, and you’ve got a whopper of a WordPress optimization plugin.

What other integrations, you wonder? Glad you asked.

In addition to the programs and companies listed above, Hummingbird also supports:

  • Hosting environments: SiteGround, WP Engine and our own hosting (three sites for free with your Pro membership!);
  • Caching integrations: OPcache, Varnish
  • Themes: Divi, Cornerstone
  • Plugins: WooCommerce, WP Hide & Security Enhancer, and all WPMU DEV plugins (that’s us)
  • Miscellaneous: Cloudflare, Bedrock and Gutenberg

That’s a whole lot of integrations, with more to come.

Got Cookies? We Won’t Cache Them

This brand-spanking new feature benefits on those of you using WooCommerce or another WordPress plugin that tracks users with cookies.

To enable this feature, note the cookies you don’t want cached. Then head over to your WP backend, Hummingbird >> Caching, and scroll down until you see the “Cookies” section.

Copy and paste these aforementioned cookies into the box, then scroll down and click on ‘Save Settings’ to finish.

Note that there’s an error in the copy of the Cookies section, which should be updated shortly. You’ll want to copy and paste cookies in this box (shown below), not URLs.

Cookie Caching with WPMU DEV Hummingbird Plugin

Tour Time!

Wondering how to compress or combine your assets to  increase pageload speed significantly?

Hummingbird can help with that, and now there’s an Optimization Tour embedded in the plugin to show you how.

Log into the backend of your WP installation (yourURL.com/wp-admin/ and head to Hummingbird Pro >> Asset Optimization >> Enabled Advanced Mode. Look for the “Enable advanced mode” toggle mid-way down the page on the right, then look for the “Take a Tour” button as shown below. You’ll then scroll through several steps with detailed instructions how advanced mode works, which you can revisit any time. As Designer Ani told me, with so many options and possibilities, you’ll want to check this section out a few times. (I did… more than a few times).

Check it out. It’s zippity quick (like Hummingbird), helpful and time saving. Compress-Me button, aka the White Button, here I come!

The more observant amongst you may also notice the Publish Changes button in the Asset Optimization section of Hummingbird has a snazzy new layout.

Comment Caching Option

Want to clear a page’s cache once someone’s commented on your post?

The handy dandy staffers at WPMU DEV – with version 2.1 that’s Designer Ani Tandilyan, Developer Anton Vanyukov and QA Devendera Mishra – have made this happen. While not a baked-in option, you can choose to set comment caching as a default for your site.

As with most of the updates this time around, you’ll find the “Clear cache on comment post” feature in Hummingbird Pro >> Caching, but this time it’s at the very bottom of the list.

What’s Next For WPMU DEV’s Hummingbird Plugin?

Phew! The team worked haaaaard. Please give your thanks in the comments.

That doesn’t mean we’re done, though.

Nope, not all.

There’s still a lot we’re working on; take a peek at our Roadmap for what’s coming down the pipe.

That doesn’t mean you should wait to update though.

Avoid FOMO Before It’s Too Late

Waiting means missing out on all the new-fangled features, fixes and enhancements I’ve just detailed – no FOMO here!

To update, you can go to the old school route and do so manually from within WordPress.

Or, if you’re a Hummingbird Pro subscriber, you can update Hummingbird from The Hub. Log in, click on the website(s) you’d like to update, find the hummingbird icon, click and you’re done.

You could also forgo all this “should I update Hummingbird?” stuff and just click Automate in The Hub so our various superheroes can take care of it for you.

As always, you can change your WordPress update automation anytime, get uptime reports, or other performance reports straight from The Hub.

If that hasn’t convinced you to subscribe, well, stay with us. We hope to WOW you with even more fun and function with our WordPress plugins, soon. Until then.

New Dedicated Application Server Revs PHP to Peak Performance

How does this Peak Perform?


Running a PHP application offers a wholly unique experience compared to running applications in other programming languages like Java or Golang. In most languages, you have to start your application in order to respond to a client request; whereas, with PHP, you have a simple “.php” file that sits quietly until it is invoked by a top-level web server like Nginx+PHP-FPM or Apache mod_php.

Hummingbird 2.0: Mobile Scans and Advanced Speed Tests… Vroom!

Hummingbird performance tests, reports, and recommendations just got a major upgrade but to get access to the all new lean-mean-humming-machine…you need to update!

In November, Google made much needed changes to PageSpeed Insights. Speed is now being calculated based on actual user experience and a site performance analysis. Thanks to this new Lighthouse integration, Hummingbird is able to see where your page is slowing in the loading process and offer better solutions for fixing performance issues.

No more shooting in the dark! No more PTSD (Performance Test Stress Disorder). Now you can find speed bottlenecks, put a solution in place that actually makes things faster for your visitors, and move on. Bing bang bong!

The upgraded performance test along with +25 other upgrades and improvements are available now. Get your copy of Hummingbird on WordPress.org or start your 30-day free trial to get Hummingbird Pro and the entire WPMU DEV performance suite.

Now that you’re all set up, Take a look at the highlight features in version 2.0, including advanced Multisite integration, a new reports module with Lighthouse recommendations, and performance report customizations.

Are you an active Hummingbird user? Upgrade to 2.0. Not only is it better, Hummingbird 2.0+ ensures compatibility with the new Google PageSpeed Insights moving forward. Enjoy. You’re welcome. No…really. It’s our pleasure!

Hummingbird Google PageSpeed Lighthouse integration
Hummingbird has new recommendations based on actual site performance.

New score metrics include:

  • Speed Index
  • First Meaningful Paint
  • First Contentful Paint
  • Time to Interactive
  • First CPU Idle

What’s Paint Got to do With It?

We recently took an in depth look at the new speed results and if you’re serious about site performance, become well acquainted with the new metrics. If CliffNotes are your thing, basically the new index is calculated based on how quickly content is seen, delivered, and able to be interacted with.

In short, Hummingbird 2.0 uses these new metrics to make your site load blazing fast.

Make it Mobile First

Site performance has many facets. You can score a perfect 100 on Desktop performance and have a horrific mobile experience. NOT ANYMORE! Why? ‘Cause Hummingbird 2.0 lets you choose between mobile and desktop scores.

Activate mobile speed tests from Hummingbird
Hummingbird lets you view and send both Desktop and Mobile reports.

Working on client sites where you want to exclude certain elements of your report? Hummingbird lets you hide score metrics, audit information, and add historic field data to both the dashboard and The Hub. Select what information is relevant based on who has access.

And now Reports can be configured to display both Desktop and Mobile speed results.

Subsite and Network Admin Upgrade

Hey, Multisite friends! This one’s for you. Hummingbird is an excellent performance tool for both WordPress and Multisite. Today she boasts some fancy new Multisite specific tools. Give or limit access to the Asset Optimization Module for subsite users.

Hummingbird Asset Optimization tools for Multisite subsites
Hummingbird gets special Multisite integration for Asset Optimization.

Set access based on role, enable or disable subsite access to the CDN, and troubleshoot with the subsite debug log.

Give All Your Sites Superhero Speed

With advanced performance tests, one-click fixes, recommendations, a powerful cache suite, reporting tools, Multisite integration, and a bunch more, Hummingbird has quickly become a power tool for getting top performance out of WordPress sites. We’re not just saying that, we tested her. See how she stacks up against the others.

But you don’t need me to tell you. We think the best way to fall in love with Hummingbird is to experience all her tools for yourself. That’s why we’ve set you up with a 30-day free membership.

Our WordPress super team is so dang impressive we sound like a bunch of braggers when we talk about them. I don’t want you to feel like we’re over selling you. So we made Hummingbird free. Free on WordPress.org or get started with a WPMU DEV membership and try Hummingbird Pro 2.0, Smush image optimization, Defender security, The Hub dashboard manager, backups, 24/7 live chat support, our marketing power tools, on unlimited sites free for 30-days. I know you’ll be impressed.

Enjoy!

Hummingbird + Uptime + Expanded Compatibility = Power & Control

Hummingbird has now crossed a staggering one million downloads quickly become everyone’s favorite speed and performance plugin for WordPress. And we’re not just improving your sites speed and performance (with all the built-in cache options you can handle, GZIP compression, asset optimization, and free site scans), we’ve integrated it with the Hub’s world-class WordPress site […]

The New Google PageSpeed Insights: A Perfect 100 Is Now Super Easy

Google PageSpeed Insights just got an update and scoring a perfect 100 is way easier. This is excellent news for agencies and freelancers with site management packages. Trying to explain Google’s flawed scoring system to clients who see their PageSpeed score as a pass-fail system has always been tricky. “Why are you okay with a […]