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


1 Response

Comments

Add a Comment

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