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.
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 😉
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.