Minify Your Website CSS

CSS or cascading stylesheet is an integral component of any website. From margins and padding between elements to header font size, colors and everything in between, it gives the substance of your website’s content that much needed style to be rendered under your end-users browsers. In a way that’s easier to the eye that is easier to navigate and increases functionality.

css minification

This beautiful website here yeah let’s see how my users would like it and therefore how my SEO efforts would fare.

If I put it out there without any CSS, Good luck with that. why are not my books selling any more what gives it’s like a hermit that hasn’t seen civilization for over two decades. Showing up at an Oscars party in the Hollywood Hills. Style means something. So I am sure, we can all agree that CSS is pretty important but what you may not know is that your CSS just like any other bit of code required to render and run your site is yet another component that can and in fact should be optimized with performance in mind. Now if your CSS is bloated and error ridden if it contains conflicts or completely unnecessary rules or language.

Well that is one thing. Obviously that is something that should be reviewed and cleaned up but even if you have got an award-winning style sheet that renders your site’s content perfectly. That is not to say that in terms of file size and therefore required bandwidth and therefore your page load times and overall user experience cannot be optimized because it can and one of the quickest and easiest ways to do that is through minification.

Now full disclosure here if you have not yet feel free to check out our other articles on JavaScript minification as well as gzip compression which so-to-speak minifies your HTML itself as we make very similar arguments there. For the here and now let us stay focused on CSS specifically.

css minification

CSS Minification

As we all know the less code required to render our site without losing functionality of course or without otherwise changing the end result of what is rendered. The more gains we make in all sorts of categories. Less data means not only less bandwidth required which can reduce content delivery costs. It can also mean fewer requests to pull our data over the network and even once it is cashed in the end users local machine.

I admit I am getting a little geeky here but even then less code means less of a burden on their machine and less time to render it on their browser. In that case we are talking milli of fractions of milliseconds maybe but you get the picture. All this adds up to better performance which is going to have a direct impact on user experience. Reducing your page load times and giving you an uptick in your SEO efforts and search engine results. The bigger your site and the more traffic you have the more these little details can add up to big savings and performance value. <Minifying your CSS is as simple as can be. Essentially what you are doing is taking all that code in this case. Let’s say 87 kilobytes of code which is formatted not only for functionality but it is also formatted for humans to decipher it more easily.

css minified version

CSS Minified version can boost 50% page speed.

We are taking it and cutting out all that bloat designed for the human eye and we are producing a minified version that in this case is now reduced to 43 kilobytes. That is over 50 percent savings which a browser can still read makes no difference to the browser at all. You can think of it like feeding a robot some poetry you can feed it this 50 page Walt Whitman poem or minified that same poem is now only 20 pages long more than 50% savings same content. the robot will have the same earth-shattering emotional experience reading it. Only it takes a lot less trees and a lot less time to feed it. Now don’t worry you don’t have to go through all your CSS code manually and wipe out all those spaces and those line breaks, comments, block delimiters and other superfluous characters by hand.

It is the 21st century; there are plenty of free web services that will do it for you in a matter of seconds. If you Google minify CSS you will find plenty of options just copy your CSS code paste and minify it. Now in my case, I am not going to replace my old CSS files. Since maybe sometime next year I am going to hire a web developer to do some work on my site and I certainly do not want to dump this minified CSS on his or her desk to work with.

Save Minified files with different names

Save Minified files with different names

I will still want to have that nicely formatted CSS ready for them so in each case with my several CSS files that I used to run my site, I will save the new minified CSS files under a new name. I will call these min. I’ll upload these to my CSS folder on my server and at my HTML, I will be sure to point to those new minified CSS files in my code and that is it. Slick, simple, easy and it could translate into a smoother user experience and stronger search engine optimization for you.

What is CSS Concatenation?

While I have got your ear, I should also mention one last magic word and that’s concatenate. This is simply the merging of files such as your CSS. The end user only needs to download a single file instead of several If you have several style sheets. This would not reduce overall file size but it can impact the number of requests needed to collect the necessary files to render your site. This is not an option for everybody. In fact if you have got special style sheets for different devices and browsers, like one specific style sheet for desktops and another completely different style sheet for mobile devices. Then you could be shooting yourself in the foot here since you wouldn’t want mobile users to download all that desktop CSS for no reason and vice versa.

In some cases concatenating is just the thing you need to give it another little performance boost. Feel free to look into that as well feel free to check out our other articles so you can keep fine-tuning and getting the most out of your SEO.

Leave a Reply

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