How to Minify and Combine CSS and JS with Autoptimize
What “Concatenate” and “Minify” Mean for JS and CSS
These technical terms might sound abstract, but they aren’t really. In short:
- Concatenation (or aggregation) is the bringing together of many different files into one. The site speed benefit of this is that the browser only has to request one file from the server, rather than making potentially dozens of separate requests.
- Minification is “rewriting” your code so that it has less white space, long function names, and other letters that are unnecessary to the computer that will be actually running that code. The site speed benefit of this is that your files are much smaller, and hence faster for the server to transfer to your browser.
Autoptimize will do both of these things for you, once you set it up properly. Watch the video to find out how:
And here’s a text guide to the same information:
- Go to “Plugins > Add New” and search for “Autoptimize”
- Install and Activate “Autoptimize”
- You’ll now have the plugin on, but for it to do anything you must tell it what you want it to do. For that, you’ll go to “Settings > Autoptimize”
- Check “Optimize CSS Code?” and “Aggregate CSS-files?” to minify and concatenate CSS stylesheets. You can optionally also check “Also aggregate inline CSS?” to also concatenate CSS that’s been printed directly to your page rather than being called from a separate file.
- Feel free to play with Autoptimize’s other performance options, such as “Optimize HTML code?”
- Click around your site with your browser inspector open to the “Console” tab to make sure nothing broke. (You’ll see red errors if something did.) Minifying won’t usually break anything, but aggregating/concatenating might, because files can start executing outside their intended order. If something broke, uncheck the “Aggregate” option for that filetype until you can figure out the cause of the issue.
- You’re set!
Hopefully, with these steps taken, you’ll get a slightly better score on a site speed reporting tool like Google’s PageSpeed Insights. When I did it here on WPShout, our score went up from 63 and 81 to 72 and 84 (on mobile and desktop, respectively).
If you’ve got the site speed bug, read our other articles on the topic. And make sure you’re on good hosting—that won’t be enough to guarantee you a fast site, but it’s probably the single most important decision you can make for site speed.
Happy concatenating and minifying!