Blogging Tips: A Faster Loading Site (Part 4)

This entry is part 4 of 4 in the series Blogging Tips: A Faster Loading Site

So far we’ve covered images, data compression and JavaScript. Today we’re going to cover CSS (cascading style sheets). CSS is what’s used for a lot of design elements for your site. Not every site uses CSS but damn near every site does and likely yours does too. It can be used for defining the type of fonts that are used on your site to the actual layout of your site. CSS is pretty powerful and easy to use which is why most sites make use of it in one form or another.

As the abilities of CSS evolve, and browsers that support the evolution, it becomes used for more and more things. At the same time the size of the CSS file increases and can become pretty large. The tip I have isn’t super technical and I have some sites I’ll mention that do the hard work for you but you will need to have access to your CSS to modify it. If you can access it to update it then read on.

One of the things that takes up space, and in turn file size, with CSS is white space. It’s actually the case with any file. When you indent a line, add a space and line breaks it all adds up and increases how large the file is. If your CSS is small to begin with then you likely won’t gain much out of this but if you have a large file then the gains are significant. In short, removing all the formatting from the various white space will make your file smaller. Additionally, alphabetizing your CSS by properties will help speed up how fast the file is read.

Sounds like a pain in the ass, right? It is but here’s a few sites to aid in the process. This first site, Clean CSS, is the easiest to use. You just copy and paste your CSS code into the CSS-Code box, set a few options and it will do all the dirty work for you. You then just copy the newly formatted code and paste that back into your file and save. The default options it selects for you are a good starting point. One exception, the option for ‘Optimise selectors and their properties’ you should set to 1 or 0. You might be able to get away with the 2 selection, I’ll explain in a bit. Also, the top drop down for compression, feel free to set that as needed. The best compression comes at the cost of ease of readability so I suggest experimenting a bit.

In general you’re going to need to experiment, especially the ‘Optimise selectors and their properties’ option. This particular option can impact how your CSS file works but it’s also an option where you’ll see some of the biggest reduction in size. So, try it out and see if your site still looks the way it should. If it’s messed up then try reducing it. Goes without saying but this means you should save a copy of your original CSS.

The other site that can aid in cleanup and size reduction is Format CSS Online. It works the same way as the previous site but it requires some knowledge of CSS to get the most out of it. This is for advanced users really.

So what can you really gain out of this? My core CSS file for my blog was 1,423 lines and 24KB. I ran it through to optimize it and reduced it to 263 lines and 17KB for a savings of 7KB. I know 7KB isn’t huge but as I keep saying, it all adds up in the end. Additionally, the file is optimized and in turn loads faster which increases the speed of my site. If you have multiple CSS files then running them all through this can get you some reasonable file size savings and increase your site’s performance.

So far this puts me at around 760KB in file size savings since I began.

Series Navigation

<< Blogging Tips: A Faster Loading Site (Part 3)
%d bloggers like this: