Fine tuning your website through manual optimization can be tricky, but our new Safe Mode feature in Hummingbird puts that problem in the rearview.
Now, you can now test optimization in a temporary area that allows for non-permanent changes, so you can work out any kinks, then push them to your live site. For free!
Introducing Safe Mode for Manual Asset Optimization – allowing you to optimize in a private space while your users still enjoy a fully functioning site.
In this article, we’re going to look at how Safe Mode in Hummingbird works, while touching on a few related features and settings in the plugin. Plus, we’ll take a look at an additional (surprise!) feature also included in this release.
Continue reading, or jump ahead using these links:
Let’s dive in.
Hummingbird makes your website faster by optimizing site performance with fine-tuned controls. Setting enhancements make things easy and efficient, giving you new ways to boost PageSpeed Insights.
The result gives you marked improvement in your website’s performance.
There are two different modes for asset optimization in Hummingbird:
Automatic – use our preset options to optimize your assets and improve page load times.
Manual – configure each file yourself to achieve the setup best suited to your specific site needs.
Drilling down even further, there are two options within Automatic Optimization mode:
Speedy – compresses & auto-combines smaller files together, and optimizes your fonts for faster delivery.
Basic – compresses all your files to deliver a faster version of each.
Automatic mode allows for a quick setup, providing positive gains without the time commitment that manual adjustment requires.
Hummingbird lets you optimize CSS, JS, and font files.
Manual mode allows you to tinker with any and every file individually, so you can optimize your site on a very granular level.
It’s a good idea to test files one at a time to measure results; that way if something doesn’t work it’s easy to identify what caused it and revert back without issue.
We’ve mapped out specific steps for what to do in each mode, so that you can easily follow along in Hummingbird and produce optimal results.
You can see these anytime by navigating to Hummingbird > Asset Optimization > Assets, then click on the How Does it Work? text at right.
There is a page for Automatic and one for Manual; just click on the corresponding header button that you’d like to read about.
Get one-click access to summarized details on both modes of asset optimization.
If you’re just starting out with Hummingbird, we recommend selecting Automatic optimization in Speedy mode to start. As you use and test your site and the plugin further, you can switch to auto basic or manual mode to check for possible improvements.
And of course, you can always view our detailed documentation, or reach out to our customer support gurus, available 24/7/365.
We’re going to zero in today on optimization done in Manual, as that’s where the new Safe Mode lives.
Hummingbird’s Safe Mode allows you to test different asset optimization settings in a safe environment, without affecting your website visitors’ experience.
You’ll be able to preview your site from the frontend and check for any errors in your browser’s console, then publish your changes to go live once you’ve got everything just right.
To enable this feature, go to Asset Optimization > Manual Asset Optimization, and click on the toggle button next to Safe Mode.
From here, you can also click on the filter icon, which will open a panel for finding files faster. You can free type or select from the dropdown menu.
You can filter to search for files while in Safe Mode.
When you’re in Safe Mode, clicking on any icon box will change its state.
You will see a solid outline around it, indicating it’s been selected, and a circular info icon will also appear on the far left of the row.
These visuals are to remind you’re in preview mode, and will remain until you click Publish, committing the changes you’ve made.
Visual cues will alert you to unsaved changes.
With Safe Mode enabled, you can start tweaking your files for peak optimization.
Each asset will have a status icon indicating its current state, and these vary based on the asset they’re attached to.
As an example, the Compress option can have the following states:
Gray icon – files that are already compressed
White icon – indicates which files can be compressed
Blue icon – New assets selected for compression
Can’t be compressed – marks files that can’t be compressed
Hover your mouse over any icon for a popup description of what action this change would make.
Need info on a particular icon? Just hover over it for a status popup.
To see the effect any change makes, click the Preview button.
The Preview button shows up once you turn Safe Mode on, taking the place of the Publish Changes button.
Hitting Preview will load the frontend of your site, where you can check on the asset optimization you configured, making sure it doesn’t generate errors or break anything on your site.
What our Preview page looks like in Hummingbird’s Safe Mode.
As you can see, the preview page has three clickable buttons at the top: Go Back, Copy Test Link, and Publish.
Click on Copy Test Link if you want to gauge asset optimization you’ve made using a third-party performance test. Just paste the copied text into your preferred tool.
Click on the Publish button if you’re content with the change(s) you made, and are ready to save.
Click on the Go Back button if you’ve gotten an error message, a site break, or had no observable performance improvements, so you can continue to tweak your assets further.
Once you’ve completed this exercise, turn Safe Mode OFF, as leaving it on can cause page load delays on your live site.
And there you go! Maximum optimization achieved, which is completely changeable at any time.
There’s another new feature in the latest release that I wanted to mention, as it’s sure to make your search experience in Hummingbird better.
In the past, if you were working with a particular encrypted file from your performance test reports, locating it on the Manual Asset optimization tab by filename was a bit messy.
That was because Hummingbird generates special filenames for optimized files, and there was no direct way to find them there. Until now!
Copy filenames, then use Ctrl/Cmd+F to quickly find them in the browser search.
With this release, you can copy filenames from the performance reports, then look them up directly in the browser search in the Manual Asset Optimization tab.
This makes finding optimized files easier and faster.
Hummingbird is the ultimate performance suite for all users – whether you’re looking for simple, one-click solutions, or want to fine-tune your site performance down to the last CSS file.
You’ll get faster loading pages and higher search rankings and PageSpeed scores with Hummingbird’s speed optimization.
Now with Safe Mode for asset optimization, you can manually configure and test any files without worrying about a site break or interrupting the visitor experience on your site.
Hummingbird is only one of our highly rated and multi-functional Pro plugins. You can try them all – along with WPMU DEVs membership or hosting – for free! Everything comes with our money-back guarantee, fully supported by our always on-call, 5-star support.
We’ll help you keep your sites humming and your clients happy.