\r\n\/* Layout helpers\r\n\r\n----------------------------------*\/\r\n.ui-helper-hidden {\r\ndisplay: none;\r\n}\r\n.ui-helper-hidden-accessible {\r\nborder: 0;\r\nclip: rect(0 0 0 0);\r\nheight: 1px;\r\nmargin: -1px;\r\noverflow: hidden;\r\npadding: 0;\r\nposition: absolute;\r\nwidth: 1px;\r\n}\r\n<\/pre>\nCSS After Minification<\/strong><\/p>\n\r\n.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}\r\n<\/pre>\nObviously, this is just a small example using a snippet of CSS code, but you can imagine the the amount of space this would save when minifying thousands of lines of code. So, if you wanted to do this manually by hand, technically you could. But you would run a high risk of error and needlessly shave valuable time off or your life!<\/p>\n
Take my advice and use the tools at your disposal.<\/p>\n
Online Tools to Minify Your Files Manually<\/h2>\n
![\"\"](\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/12\/min20.png\")
<\/p>\n
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. <\/p>\n
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.<\/p>\n
\n- Closure Compiler<\/a> (JS only) – Closure Compiler is part of Closure Tools<\/a>, 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.<\/li>\n
- cssminifier.com<\/a> and javascript-minifier.com<\/a> (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.<\/li>\n
- csscompressor.net<\/a> (CSS only) – This online CSS compressor is quick, easy, and free to use.<\/li>\n
- jscompress.com<\/a> (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.<\/li>\n
- refresh-sf.com<\/a> (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.<\/li>\n
- htmlcompressor.com<\/a> (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.<\/li>\n
- minifycode.com<\/a> (HTML, CSS and JS) – This site offers minifiers for JavaScript<\/a>, CSS <\/a>and HTML <\/a>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). <\/li>\n
- Dan’s Tools – Dan’s Tools<\/a> offers a CSS Minifier<\/a> and a JavaScript Minifier<\/a>. 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.\n<\/ul>\n
If you are looking for some offline tools to minify your HTML CSS or JavaScript locally, here are a few options:<\/p>\n