CSS Optimization: Compressed file helps speed site load time

Cascading Style Sheet optimization can be a confusing topic.

On the one hand it can mean creating CSS files with the least amount of code. On the other, it can mean compressing a style sheet so it loads faster and hence make your website load faster. In reality, the two do go hand in hand though the former is far trickier than the latter.

CSS Tweak offers tool that attempts to do both.

CSS Tweak is very easy to use. Upload a style sheet and click Tweak! However, you should be familiar with the seven options available before you hit that Tweak button.

• Tweak Fonts – merge font related properties into one “font” property
• Tweak Backgrounds – merge background related properties into one “background” property
• Tweak Borders – merge border related properties into one “border” property
• Tweak Lists – merge link styling properties into one “link-style” property
• Remove Comments – strips out all comments
• Remove zero units – will clean up zero unit values
• Formatting – strips white space. This compresses your cascading style sheet.

My general recommendation is to leave the code optimization selections alone until you understand CSS better. It could make adverse changes to your CSS code. Unless you understand CSS well, you may not be able to figure out what changes the tweaker made that are now causing problems. Beginners should only check the “Remove Comments” and “Remove White Space” radio boxes. For the beginner, the options will then look like this:

Clicking Tweak will then create a new style sheet file that can be downloaded:

I always rename my main editable style sheet to “non_compressed_style”. I use this style sheet to make changes. I then compress it and send it up to my website as the main “style.css” file. My compressed style sheet is what my website then accesses. The compressed style sheet is next to impossible to edit. It will look this:

Maintaining two style sheets may seem like a lot of work. Don’t compress it until you are done with the design. That way you won’t have to go back and forth between compressed and noncompressed. Compressing the style sheet is worth it. It can significantly save on download times.