What does it mean to minify javascript and css?
When Javascript and CSS (the design style sheets) are written for your site, it’s written so that it’s understandable by humans–full of extra white space for easy reading, lots of comments to tell coders what’s happening, and long variable names that make the code clearer. And that’s great… for humans.
But computers don’t need all that extra stuff. They just need the basics of what the code is supposed to do, not how it does it.
That’s where minification comes in.
Minification removes all the extraneous text and white space in javascript and CSS, shortens long variables, and removes all line breaks! It makes the code do just what it needs to do, and–most importantly–can make your site run significantly faster!
What does minification look like?
Here is a simple example of what minification can do to even a short bit of javascript code.
Notice that the regular javascript has a lot extra tabs and spaces… Notice that the variable has been changed from “theBigVariable” to “i”… Notice that even “1000” has been changed to “1e3” (which is shorthand for 10 to the power of 3)… Notice that the longer “if” statement is now using javascript shorthand (with a ? and a colon).
What did we save? The regular code had 173 characters. The minified code had 114 characters. That means the minified code is 34% smaller!
So, with websites that have thousands of lines of code, you can imagine that a savings this big will definitely improve your load times!
Regular Javascript
function isMyVariableBig(theBigVariable) {
if (theBigVariable > 1000){
alert('Your Big Variable is big!');
}
else {
alert('Your Big Variable isn't that big.');
}
}Minified Javascript
function isMyVariableBig(i){i>1e3?alert("Your Big Variable is big!"):alert("Your Big Variable is not that big.")}How to Minify Javascript and CSS in WordPress
There are some great plugins that allow you to minify javascript. Here are the ones we’ve found that work well:
- Autoptimize (free)
- Fast Velocity Minify (free)
- Merge + Minify + Refresh (free)
- WP Rocket ($49)
Which Free Plugin Should You Use
While Fast Velocity Minify seems to be the fastest free version, AutoOptimize is the easiest to use. Your best bet may be to install one, try it out, then uninstall it, and try the other. Then just settle on the one you like best?
Why should you pay for WP Rocket?
We’re big fans of WP Rocket here at Enthusiast. Not only can it minify your javascript and CSS it can also:
- Add a mobile cache (for faster browsing on phones)
- LazyLoad images (so that images only load once they appear on a user’s screen)
- Clean up old database detritus.
- Allow you to integrate with a CDN (is a CDN worth it?)
For details on how to use WP Rocket in WordPress, watch our tutorial video above!
