If you've reviewed your website's speed with WooRank (or another review tool), you might have received the advice to minify your JavaScript (JS) or cascading style sheets (CSS) files. JS and CSS can be great, they make your site interactive (JS) and look nice (CSS). If you 've ever checked your site 's speed online, you might have seen the advice to minify these files.
In this guide we 'll cover:
What is Minification?
Minification is the process of removing unnecessary characters from code without changing the way that code works.
These unnecessary characters are usually things like:
- Whitespace characters
- New line breaks
- Comments
- Block delimiters (those curly brackets)
Say you 've got some code like this:
/**
* 4.0 Header
* -------------------------------------------------------
*/
/* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */
#wpadminbar{
Min-height: 32px;
}
.site-header {
top: 0;
left: 0;
width: 100%;
background: #fff;
}
body.admin-bar .site-header{
top: 32px;
}
.site-title {
float: left;
width: 18.965517241%;
margin: 0;
font-size: 18px;
font-size: 1.8rem;
font-weight: 400;
line-height: 28px;
line-height: 2.8rem;
}
There 's a lot in this code "notes, line breaks" that help humans read the code but aren 't necessary for the browser to read the page.
After minification, that same could looks like this:
#wpadminbar{min-height:32px;} .site-header {top:0;left:0;width:100%;background:#fff}body.admin-bar .site-header{top:32px}.site-title{float: left;width:18.965517241%;margin:0;font-size:18px;font-size:1.8rem;font-weight:400;line-height: 28px;line-height: 2.8rem}
Concatenation
You can also concatenate files. Concatenation means to join two or more things together into one. So concatenating means joining a whole bunch of different files into just a couple.
This will reduce the number of files that need to be downloaded, increasing speed.
How is This Faster?
As mentioned above, browsers still have to read all those excess characters in your code whether they use them or not. Those extra characters also take up space in a file, making it bigger than it needs to be.
Since computers don 't need all that formatting in order to read, you can take it out without impacting the code 's ability to run properly.
In fact, minifying code can reduce the file size by 30-40%. Sometimes even as much as 50%.
Concatenating files also helps reduce the load on your server and network. Combining multiple files into one lets a server send more data in a fewer number of connections.
How to Minify Your Code
If you 've got a WordPress site, there a plenty of plugins you can use that will minify your code.
If you don 't have a Wordpress site, there are some other tools you can use to minify your different types of code:
- HTML: HTMLMinifier
- CSS: CSSNano
- JavaScript: UglifyJS
