Compress your CSS Files
Last updated: Jun 17, 2008Almost all websites are now utilizing CSS (Cascading Style Sheets) as their main tool for website design and layout. Often times these files get large. Many programmers like to add additional tags to fix small portions of their site in CSS files rather than rewriting the CSS file. These types of CSS files over time can be come quite large. The larger the CSS file the longer our users will have to wait to load up our page. What can we do about it? We can compress CSS which allows for a much faster load time and uses less bandwidth.
Why compress?
Compressing CSS files allows for a faster load time for our visitors. When surfing the Internet people tend to be very impatient when it comes to load times. Since they have so much information at their finger tips if they don’t find what they are searching for in mere seconds they will turn around and look elsewhere.
Still not convinced? Go ahead and navigate to Google.com and take a look at their HTML source code. Google not only compresses their CSS, they also compress their HTML. In addition they combine their CSS and HTML into one file so there are less requests to the server. If it’s good for Google it’s good enough for me. After all, the speed of Google and their minimalist approach to web search is what gave them the jump when they first started.
How to compress
To compress your CSS files you will need to download CSS tidy. I usually use the executable if I am on a Windows system.
Then to compress to the highest level possible use this command:
csstidy style.css --template=highest compressedStyle.css
You can check out other options and usage here.
Hey, my CSS isn’t very human readable!
Due to the nature of compression it will be hard to read your CSS file because it strips out whitespace and tabs. If you save a copy of the style.css as style.css.beforeCompression prior to compressing, you will be able to make your changes to the style.css.beforeCompression file and then re-compress it and save the compressed copy as style.css over the old compressed CSS file. This allows you to have the speed of a compressed CSS file and be able to retain your readable code.
If you have a large CSS file compression can save you a lot of visitors from hitting their back buttons. It also shows that you have taken the time to consider your users. Whether they know you are using compression techniques or not I am sure they will appreciate the snappier load times.
Need to print shipping labels on your site?
Checkout my product RocketShipIt for simple easy-to-use developer tools for UPS™ FedEx™ USPS™ and more.