Minify CSS and JS with Autoptimize

A common piece of advice when it comes to optimizing the browser performance of your website is to concatenate and minify your CSS and JavaScript. There are many reasons and place you’ll see this recommended but Google PageSpeed Insights was the one that spurred me to action. And for me, I settled on a WordPress plugin called “Autoptimize” to make it easier for me to do it on this site. Autoptimize, if it’s not obvious, is a combination of the words “automatic” and “optimize”, and that’s just what it is, easy optimization of thing that are hard for non-developers to do.

In the last paragraph I was a little cavalier about the two technical terms:

  • Concatenation (or aggregation) is the bringing together of many different files into one.
  • Minification is “rewriting” your code so that it has less white space, and other unnecessary (to the computer) characters in it

Doing these two things will make a browser have to use less data to receive the full site, and make few web requests to get all the resources it needs to render. And Autoptimize will do both of this for you, once setup. Watch the video to find out how:

Or if you prefer text…

How 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 “Optimize CSS Code?”. You can also check on “Optimize HTML Code?”
  5. You’re set.

Hopefully, with this done you’ll get slightly better score on a 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).


3 Responses

Comments

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

  • Mamud says:

    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.

  • celina says:

    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.

Add a Comment

Your email address will not be published. Required fields are marked *