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.
CSS Optimizer is the first one I’ve located. After entering the CSS code, it provides an option to select a compression type, between Low, Standard, High and Highest. I went for the highest 🙂
Options provide even more possibilities, like colors, font-weight compression, it removes unnecessary backslashes and the last ; sign.
And wow, compression ratio is 29.6% , which means -183 Bytes less from the original size 😉
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.
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!
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.