Best Free CSS Optimization Tools

This is not a WordPress related article. WordPress has some amazing plugins that will optimize the CSS for you. Still, there are cases were installing WordPress site for a client is not beneficial. If the site’s requirements is from one to few pages, with static content, the best choice is to build a simple HTML template.

Let’s look at at the case of Slide To The Side, it is simple HTML page I made for a friend of mine. After running PageSpeed Insights, the results for Desktop are 91 out of 100, which is quite a good result, but it can be improved.

Our current goal is to inline and optimizes CSS on this site. There is only one CSS file style.css on the site, so it makes the things more simple. Let’s have a look at the online tools available that can inline/optimize it.

And wow, compression ratio is  29.6% , which means -183 Bytes less from the original size 😉

CSS Compressor – CSS Drive

CSS Compressor provides fewer options compared to the CSS Optimizer. After CSS compression the tool saved 147 bytes, 5.6% less than the previous tool. Though I found it equally good and easy to use.

 

Code Beautifier

This tool I found provided the best results so far. The Compression ratio is 32.3%, -200 Bytes less from the original file. Very simple tool to use. Awesome!

Clean CSS – Optimize and Format your CSS

Many options provided from Clean CSS too. You can also optimize the HTML code, which I did, I guess my code was pretty clean cause saw no changes ;). CSS minify on the other hand the simplest tool to use, with no options available. It also didn’t provide the comparison ratio result, so I did the calculation myself; it made the style.css smaller by 163 KB, so it did 27,1% reduction.

 

That’s it for now, let me know below in the comments if you have any another Inline CSS tool to suggest.

Leave a Reply

Your email address will not be published. Required fields are marked *