One of the most common problems WordPress users run into over time are slowdowns resulting from an overload of HTTP requests. In English, those requests are the sum of getting and sending data, which could be something simple like files and images to something quite complex like social sharing, analytics tracking, and eCommerce functionality.
The more stuff a user can interact with on any given page, the more HTTP requests it generates. The more HTTP requests you have, the slower your page will load. Minification is one of the most accessible ways to help reduce those requests by combining and stripping down all of those requests.
Usually, this is done by a programmer but if you use a number of plugins from different developers (which 99.9% of WordPress users do), that’s not going to be a practical option. Fortunately, there are solutions to help you minify HTTP requests without needing full blown programmer level skills.
[box type=”alert” icon=”none”]AN IMPORTANT DISCLAIMER: minification is not an insignificant task. You can go from running fine to all mucked up in no time at all. Fortunately, since this is a plugin based solution, all you would need to do is deactivate the plugin to set things right. Nonetheless, be sure to make a backup of your site files and the database before following any of these instructions. Better still, practice on a staging or sandbox environment before implementing on your live site. If anything goes awry, that’s on you.[/box]
1. Before You Begin, Benchmark Your Current HTTP Request Level
This part is simple, just head to https://gtmetrix.com and run a performance report (a skill you developed in this installment). Flip over to the waterfall report and if you’ll probably see a number of rows for .css and .js files, like this:
By the time we’re done, most of those files are going to be combined into a handful of super lean minified outputs. Be sure to make note of the “Requests” value, you’ll want to keep all of this handy as you’ll use it later to verify your efforts.
2. Install and configure Autoptimize Plugin
I’m going to assume you know how to install and activate a WordPress plugin. If you don’t, that’s a great sign this isn’t for your existing skill sets and you should contact a developer for assistance (you’ve been warned).
After activating the Autoptimize plugin, you’ll likely get redirected to it’s admin panel. If not, you can get there via “Settings > Autoptimize” from the admin nav menu.
The basic configuration is super straightforward:
- Enable optimizing three primary options (HTML/ CSS/ JavaScript).
- Select the “Save Changes and Empty Cache” button.
Go back to GTMetrix and run a new test; the results should produce a lower number of requests and fewer individual rows for .css files and .js scripts. If you look closely, you’ll see some of the newly created, smaller aggregated files Autoptimize created, they will have filenames along the lines of “autoptimize_f01d376206681e9982c5205c3832df40.css.”
You’ll also see a drop in overall page load speeds!
At this point, be sure to check the frontend of your site and test all of the standard functionality thoroughly.
Repeat: test everything thoroughly. Simply looking at the homepage to see if anything seems “off” won’t suffice. Be sure to test all critical functionality, such as eCommerce checkout pages.
Interact with any functionality that relies on JavaScript, which are usually items that have some sort of interactive hover/tap feature (think: special effects). One of the most common pain points when minifying scripts is sometimes, they process messes with their functionality.
If you discover something that isn’t working, don’t panic. That means you’re ready to have some fun and try out the advanced settings.
3. Autoptimize Advanced Settings
3.1 JavaScript Options
If you notice special effects type of problems on the frontend, you’ll want to tweak some of the advanced Javascript settings.
- Select the “Show Advanced Settings” button and each of the available sections will expand to provide additional options.
- The most common conflicts occur via the JavaScript and the first advanced setting to try is enabling the “Add try-catch wrapping” setting. Check that option, select the “Save Changes and Empty Cache” button again, and check the frontend to see if the errors are resolved. If not…
- Select the “Also aggregate inline JS” option, “Save Changes and Empty Cache,” then do another frontend check.
You can try disabling “Add try-catch wrapping” and run only “Also aggregate inline JS” but you still encounter problems, it’s time to call a developer for help.
Yes, there are additional advanced options to try, but those will be something your developer will use.
3.2 CSS Options
If you notice layout, typography, or color palette oriented problems, you’ll want to tweak some of the advanced CSS settings.
- Make sure the “Show Advanced Settings” is activated then select the “Also aggregate inline CSS?” option. select the “Save Changes and Empty Cache” button again, and check the frontend to see if the errors are resolved. If not…
- Optional: if your theme uses images for backgrounds, try using the “Generate data: URIs for images?” setting as this can go a long way toward cutting down on load times.
If those don’t resolve any issues, don’t worry about trying any of the remaining options, instead, it’s time to call a developer for help.
[box]Pro Tip: You don’t have to run CSS and JavaScript minification simultaneously. For example, if you can’t identify JavaScript conflicts, don’t activate and instead, enjoy CSS only minification. Simply put, some minification is better than no minification. [/box]
3.3 Additional Options
From the Main Tab:
- If your site is using a Content Delivery Network (CDN), you’ll almost certainly need to use this option. If you aren’t sure what your CDN Base URL is, you can use Chrome’s Inspect Element tool to find out. In this example, the CDN path is 2ee0tsdb27ngz4ba31r09l6e-wpengine.netdna-ssl.com
- Contact your webhost to confirm if you need to uncheck this option.
- This is handy to check if you use a page builder tool like Visual Composer, Beaver Builder, or Elementor.
From the Extra Tab:
- If you don’t need to use emojis you absolutely want to check this option (you might be shocked at how much they add to page load speeds).
- Google fonts are great, but they can also be a page load speed hog. If you use more than one, try the “combine and link in head” option and if you don’t use them at all, select the “Remove Google Fonts” option.
4. Reducing HTTP Requests Using Perfmatters Plugin
Another approach to reducing HTTP requests is to prevent any you don’t need from loading in the first place. Usually, that’s accomplished using custom functions, which are added to your site’s functions.php file, like this one to help enqueue WooCommerce scripts:
function wp_enqueue_script( $handle, $src = '', $deps = array(), $ver = false, $in_footer = false ) {
$wp_scripts = wp_scripts();
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
if ( $src || $in_footer ) {
$_handle = explode( '?', $handle );
if ( $src ) {
$wp_scripts->add( $_handle[0], $src, $deps, $ver );
}
if ( $in_footer ) {
$wp_scripts->add_data( $_handle[0], 'group', 1 );
}
}
$wp_scripts->enqueue( $handle );
}
But you shouldn’t be messing around with that stuff if you don’t know what you’re doing.
Fortunately, there’s a fantastic plugin called Perfmatters. It’s designed to disable a host of the most common unnecessary functions on WordPress installs. Granted, this is a premium plugin but it is entirely affordable, even for nonprofits (19.95/year for a single installation).
The best part is it’s nearly 100% point and click simple.
After installing, activating, and registering the license, you can begin setting options at the “Settings>perfmatters” admin panel.
4.1 Standard Options
The items you want to disable will depend on how you use your site. For example, if you never embed something like a YouTube video, activating the “Disable Embeds” option is likely for you.
One of the benefits of this being a premium plugin is you get substantially better documentation. That means if you aren’t sure what any of these options are select any of the question tooltips to go to the respective documentation page where you’ll find resource content you can use to make an informed decision.
Figuring out which ones to activate will be mostly self-evident, regardless your skill level.
Having said that, here are some of the option I commonly enable:
- Disable Emojis
- Remove Query Strings
- Disable XML-RPC
- Remove jQuery Migrate
- Hide WP Version
- Remove wlwmanifest Link
- Remove RSD Link
- Disable Self Pingbacks
- Disable Google Maps
- Disable Heartbeat: Only Allow When Editin Posts/Pages
- Heartbeat Frequency: I recommend setting it to a higher
- Limit post revisions: I tend to disable but if you find yourself using them, consider setting it to a low number.
- Autosave interval: I recommend setting it to a higher
4.2 WooCommerce Options
These are only applicable if you actually use WooCommerce. If you do, I recommend activating all of them.
4.3 CDN Options
This one is a bit more complex and depends a great deal on whether your hosting provider integrates CDN services or if you use a third-party provider or plugin. I tend to rarely use these options as this service is already provided by the hosting provider I use. However, if you use KeyCDN, MaxCDN, CDN77 then these options can be very useful.
4.4 Extras
If you are more than an entry level user, you’ll find the Script Manager function to be enormously useful when troubleshooting JavaScript and CSS conflicts. It can also be used to disable either on a per webpage basis.
If you ever mess with this stuff then you know just how cool that is!
- The Script manager autoamticly identifies the file names and allows you to disable on the current page or throughout the entire site.
- You can even see exactly how much space it will save (then confirm after disabling via GTMetrix!).
The DNS Prefetch options are great if you regularly pull resources from third party providers but it’s not exactly a beginner level setting.
5. Conclusion
Congratulations, if you’ve never implemented minification prior to this, you have decidedly done a +10 to your web optimization skill sets and have completed one of the most important tasks in combating post net neutrality slowdowns!
Originally, we planned on including sections on caching, using a CDN and LazyLoading but that would have simply been too much. As such, you can look forward to learning about those in a future installment.
Now go take an extra mid-day break. I’m thinking something from the chocolate chip cookie food group is in order, you deserve it.
