How To Minify CSS And JavaScript Properly

In programming, Minification is the process of removing unwanted white-spaces, comments, etc. in code. In this article, I will show you how to minify CSS and JavaScript properly and easily.

Minifying CSS and JavaScript properly helps to improve page loading speed and performance.

The website’s loading time is an SEO ranking factor. Every tool recommends minifying CSS and JavaScript code.

Minification is used to make the source files less in size and fast readable by browsers. This helps in reducing page load time.

Best Methods To Minify CSS and JavaScript

To minify CSS and JavaScript, you have lots of options. For example, if you are using WordPress, you can install a plugin.

The minification has two methods:

• Single-line Minification: The Single-Line Minification means writing a CSS style in only one line, e.g.;

.author{display:block;font-family:sans-serif;}
.author-img{padding:10px;margin:10px;}

The above two styles have been written in a single line individually. This is one method of keeping code minified.

• No-Line Minification: When you remove all the white-spaces, comments, etc. and the whole CSS is in one line. For example,

.author{display:none;font-family:sans-serif;}.author-img{padding:10px;margin:10px;}

You can notice the difference between the two methods.

But you may ask , how unminified CSS looks?

.author {
display: none;
font-family: sans-serif;
}
.author-img {
padding: 10px;
margin: 10px;
}

The above code is not minified CSS code. If you want to minify the code to less, you can use No-Line Minification.

But if you write a minified code during coding, it may be impossible for you to find an element.

So you can write a code as is and then minify it using various online tools.

Now, let’s look at the online tools you can use to minify CSS and JavaScript.

Best Online Tools To Minify CSS and JavaScript Manually

Minifying a CSS file or JavaScript is not a big deal. You don’t need to be a programmer to do this.

Numerous popular online tools are available to do the same. You have to copy and paste twice.

Let’s have a look at the best online tools for CSS and JS.

#1. Minify

Minify tool lets you minify CSS and JS in one place. You can paste your style-sheet URL or paste CSS code to minify.

This is the best tool and I personally use it to minify the CSS and JS.

#2. CSS Minifier and JS Minifier

They are two tools but built by one developer. These are the simplest online minification tools; just copy and paste the code.

#3. CSS Compressor

CSS Compressor lets you minify CSS only. The tool provides you the compression level you want.

Also, it provides some advanced options also.

#4. JSCompress

JSCompress tool can be used to compress the JS files up-to 80%. You can copy-paste code and get your output.

This tool has another feature which I want to let you know. You can upload JS files directly and get a minified version of them.

How To Use Online CSS and JS Minification Tools

Minifying your CSS or JS code isn’t really a big deal. You have to copy the code from your blog, paste that on the online tool box, and hit the minify button.

Then again, copy the code from an online tool and replace your CSS or JS code with the one you copied.

Let’s minify CSS using Minify tool.

Step 1: Find Style.css

If you are using WordPress, you can find your style.css file by entering this URL http://yourwebsite.com/wp-content/themes/your-theme/style.css.

Remember to replace yourwebsite.com with your domain and your-theme with your current theme’s name.

Step 2: Copy and Paste style.css

Now copy the code and go to Minify.

Paste the code their and hit Minify button.

When the code will be successfully minified, the code will get selected.

Copy the code and replace the style.css with this code.

You have now minified the code and your style-sheet is less in size.

How To Minify CSS and JS in WordPress Using Plugins

If you don’t want to minify CSS and JS manually, you can install plugins, and they will do the rest of the work.

The popular minification plugins are listed below.

#1. Fast Velocity Minify

This plugin is one of the best minification plugins we found. Provides lots of features. The best part of this plugin is that it merges all JS and CSS into groups of files. In turn, reducing HTTP requests.

#2. Autoptimize

If you want all one plugin for page-speed, then this plugin is the right find for you. It is easy to use and has lots of built-in features to take your website’s speed performance to the next level.

I hope you loved this tutorial on minifying CSS and JS. Please do share and comment.