CSS Minifier Tools
CSS MINIFIER TOOL - For FREE!
What is CSS Minification and How it Works?
CSS minification
Since CSS is less likely to change frequently, several online tools provide instant CSS minification. CSS Minifier is a quick and simple way to minify CSS, while Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.
When you minify your website’s CSS, HTML, and Javascript files, you can shave some valuable time off of your site’s page load speed. Now we aren’t talking about cutting your page load speed in half or anything, but when it comes to the speed of your website, any little bit helps. How fast your site loads is not only important for first time visitors, but it is also important for moving search engine ranking.
The term “minify” is programming lingo that describes the processes of removing unnecessary characters in the source code. These characters include whitespaces, line breaks, comments, and block delimiters which are useful for us humans but unnecessary for machines. We minify the files of a website containing CSS, HTML, and Javascript code so your web browser can read them faster.
For example:
(Before)
<html>
<head>
<style>
#myContent { font-family: Arial }
#myContent { font-size: 90% }
</style>
</head>
<body>
<!-- start myContent -->
<div id=”myContent”>
<p>Hello world!</p>
</div>
<!-- end myContent -->
</body>
</html>(After)
<html>
<head>
<style>#myContent{font-family:Arial;font-size:90%}</style>
</head>
<body>
<div id=”myContent”>
<p>Hello world!</p>
</div>
</body>
</html>Look at the highlighted colour!
How to Use it?
Paste in your source code or upload the source code file.
Optimize the settings for a specific output (if options are available)
Click a button to minify or compress the code.
Copy the minified code output or download the minified code file.
Tips
If you confuse how to use it you can press ctrl+f in your theme editor and find the style tags e.g <style></style>
BONUS!
Thankfully, you don’t have to be a developer or know any of the programming languages in order to minify your site files. Minification has become standard practice in the world of web design so it shouldn’t surprise you to learn that there are a lot of wonderful (and free) tools out there to do the work for you.
Here is a list of some helpful tools to get your started. Since many of these can minify more than one code type, I’ve included the code type options in parenthesis.
- Closure Compiler (JS only) – Closure Compiler is part of Closure Tools, a suite of tools from Google Developers. It allows you to minify your Javascript along with other helpful optimizations. You can pull in your Javascript using by entering the URL of the js file location and then choose how you want the code to be optimized and formatted. For example, you choose to optimize your code for Whitespace only if you want. Once you hit the compile button, it will minify (or compile) the code for you as well check your code for any errors.
- cssminifier.com and javascript-minifier.com (CSS and JS) – These two minifiers by Andrew Chilton are simple to use. Simply paste in your code and then click the Minify button to output the minified code. You can even download the output code as a file for convenience.
- csscompressor.net (CSS only) – This online CSS compressor is quick, easy, and free to use.
- jscompress.com (JS only)- This JavaScript compression tool allows you to compress JavaScript code via Copy and Paste but you can also upload multiple JavaScript files at once. This is great for combining JavaScript files into one file for better page load speed.
- refresh-sf.com (HTML, CSS and JS) – This compressor will minify JavaScript, CSS and HTML code types. It also includes all the compressor options for each code type if you need them.
- htmlcompressor.com (HTML, CSS and JS) – This online compressor/minifier tool supports HTML, CSS and JS code types. It even supports different combination of code types like CSS + PHP and JavaScript + PHP. And you can even check the compressed code for errors as well.
- minifycode.com (HTML, CSS and JS) – This site offers minifiers for JavaScript, CSS and HTML with a simple and clean UI that minifies your code with a single click of a button. It also includes a “beautifier” tool to uncompress minified code to make it easy to read (basically the opposite of minification).
- Dan’s Tools – Dan’s Tools offers a CSS Minifier and a JavaScript Minifier. Both tools have a really clean UI that is and easy to use. They don’t offer any advanced options but it is perfect for common minification purposes.
If you are looking for some offline tools to minify your HTML CSS or JavaScript locally, here are a few options:
- Smaller (HTML, CSS and JS)
- phpied.com/cssmin-js/ (CSS only)
- yui.github.io/yuicompressor (JS and CSS)