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!


5 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Emile Roy
July 10, 2020 9:18 am

I use autoptimize for many websites and that’s a good thing. Too bad it doesn’t delete comments.

Ramesh
January 28, 2020 10:00 pm

thanks for this..

just started a new blog & i was looking for it…

celina
May 24, 2019 11:39 pm

I see autoptimize is one of the best plugin created for optimizing website to increase speed. While there are various setting you can optimize, catch, css, html, javacode etc but make sure to backup your all original files incase any thing break so you should have the restore files. I am using this plugin from quite long time for my website and quite happy.

Mamud
September 9, 2018 5:10 pm

I don’t like concatenate CSS because had some problems. Inline CSS is working good though. But, the settings little bit confusing in Autoptimize. They should make more clear.

Speed demon also can Inline CSS: https://wordpress.org/plugins/speed-demon-littlebizzy/

But defer CSS is always look ugly, don’t do it.

Bilal Ahmad
November 18, 2017 1:46 am

Thanks for sharing such information.
kindly share how we minify javascript in advance