How to Minify and Combine CSS and JS with Autoptimize

To concatenate and minify your CSS and JavaScript is good advice for speeding up your site. There are lots of ways to do it, but the best we’ve found in WordPress is a plugin called Autoptimize.

As the name suggests, Autoptimize “automatically optimizes” a lot of things across your site for speed. Here, we’ll talk about how to unlock two of Autoptimize’s quickest wins: concatenating and minifying your JavaScript and CSS files.

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:

How to Use Autoptimize to Concatenate and Minify CSS and JavaScript in WordPress

1. Go to “Plugins > Add New” and search for “Autoptimize”
2. Install and Activate “Autoptimize”
3. 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”
4. On that page, you’ll check “Optimize JavaScript Code?” and “Aggregate JS-files?” to minify and concatenate JavaScript files. You can optionally also check “Also aggregate inline JS?” to also concatenate JavaScript that’s been printed directly to your page rather than being called from a separate file.
5. 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.
6. Feel free to play with Autoptimize’s other performance options, such as “Optimize HTML code?”
7. 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.
8. 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!