Skip to content

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).

Happy concatenating and minifying!

Yay! 🎉 You made it to the end of the article!
David Hayes

4 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.

Bilal Ahmad
November 18, 2017 1:46 am

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

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

4
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...