5 Tips On How To Minify CSS and JavaScript Codes On Your Website

Usually, the CSS and JavaScript files are coded in a way to is readable by the majority of people. They are supposed to be simple so even the beginners will have the chance to understand them easier, to find a certain line easier, with the help of extra spaces, comments and the way of organization.

But not everyone is a beginner. And if you are a newbie, the extra components that make coding easier won't be needed forever. In other words, after you spend some time of research and customization with your project, you are going to get used to the codes and won't need the extras to be shown anymore.

You are probably wondering why the site needs so much loading time but sometimes can not explain why. One significant reason behind it is the fact that the extra bits included on codes, require extra requests counts to load, in other terms require much time. Some of these ‘extra' things that a coding structure may have include :

• Empty space characters
• New line characters
• Comments
• Block Delimiters

What is Minifying Process?

Minification is the process of removing all unnecessary characters from the source code without changing its functionality. These unnecessary characters usually are used to add readability to the code but are not required for it to execute.

There is actually a way to do it manually, but it may require a lot of time.

A Minify Example

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

So first we delete the comments ( included on /* */ ) and then the unnecessary spaces between lines. It will look something like this :

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

We do not recommend this method because it's time wasted. There are some other methods you can use with the help of certain tools or plugins.

W3 Cache plugin

Go to the W3 Cashe plugin's page here .

• Install W3 Total Cache plugin and Activate it.
• Go the General Settings Tab and Find Minify settings
• Check Minify Enable setting 
• Click on Save all Settings button, Clear all cache. 

This plugin is one of the easiest to use and most efficient. But you can also use:

• Better WordPress Minify Plugin
• Autoptimize Plugin

Closure Compiler Tool

Go to the tool's official page here.

The Closure Compiler is a JavaScript optimizer that minifies the code until there is no extra space, making the site load faster. Firstly, it will also check your syntax, variable references, and will also warn you about any issue. Of course, there are several levels that it will optimize: for white space, simple, and advanced.

CSS Minifier

Go to the tool's official page here.

One of the easier tools to minify your CSS. Just copy the code and the output will give you the job done in a few seconds. CSS minifier will remove the spacing, indentation, newlines, and comments from your CSS code.

Minify your JavaScript

Go to the tool's official page here.

This one is the same as the CSS minifier, except for the fact that this tool minifies the javascript code. It also does minify the CSS. It’s very easy to use and you can download it as a file.

Online JavaScript/CSS/HTML Compressor

Go to the tool's official page here.

A minifier tool for your CSS, HTML, and JavaScript using a drag and drop interface also. It removes the comments and unnecessary whitespace from codes. This tool will offer many options about compatibility, rebasing URLs, debugging, etc.

Those were some of the best tools and practices to minify the CSS/JS codes.