Here is an example of what CSS minification looks like.
CSS Before Minification
CSS After Minification
Obviously, 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!
Online Tools to Minify Your Files Manually
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.
- csscompressor.net (CSS only) – This online CSS compressor is quick, easy, and free to use.
- Smaller (HTML, CSS and JS)
- phpied.com/cssmin-js/ (CSS only)
- yui.github.io/yuicompressor (JS and CSS)
Many of these online tools have a similar process which involve the following steps:
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.
For this example, I’m going to use the minify tools from minifycode.com.
First, locate the css file (commonly named style.css) in your site files and open the file using a page editor. Then copy the entire css code to your clipboard.
Go to minifycode.com and click the CSS minifier tab. Then paste the CSS code into the input box and click the Minify CSS button.
After the new minified code is generated, copy the code.
Then go back to the css file of your website and replace the code with the new minified version.
There are a lot of plugins out there that will do the job but I will briefly mention a few standouts.
Autoptimize is probably the most popular minify plugins out there. It’s popular because it ease easy to use and full of powerful performance features. It can aggregate (combine scripts), minify, and cache your code. As a bonus, you have additional options for optimizing Google Fonts, images and more.
To use Autoptimize, you can download, install and activate the plugin from the WordPress Dashboard under Plugin > Add New.
You can also click the Show Advanced Settings button at the top of the page to further customize how you want your code to be optimized.
That’s about it! Pretty simple and powerful.
Fast Velocity Minify (FREE)
To use the plugin, first install and activate if from your WordPress Dashboard by navigating to Plugins > Add New. Then search for “fast velocity minify” and once it popups up in the search results, click to install and activate it.
Once the plugin is activated, your files will automatically become minified and optimized for best performance. That was easy!
W3 Total Cache (FREE)
W3 Total Cache is a great caching plugin that includes the option to minify your HTML, JS, and CSS.
WP Fastest Cache (FREE)