RSS

Tags

air application architecture coldfusion conferences flex javascript model-glue personal random rapid development server configuration software development stupidity tacfug tutorials wow

Tip to Speed Up Your Website - Compress CSS

Posted By : Dan Wilson     January 26, 2009 10:57 PM

There are a number of ways to speed up a website. An easy one would be to compress asset files and compact the files. This has been widely done for Javascript files with popular tools such as JSMIN and Packer.

The general idea behind compression/combination is to reduce the number of characters that must be sent over the wire as well as reduce the number of HTTP calls that must be made. Each time a browser gets a request to download a JS file, there is a certain amount of overhead incurred in negotiating and completing the HTTP request. Combining all JS files into one file is a great way to speed up a web application.

Everyone Already Knows This, Right?

Probably. However, CSS files can often be as numerous and verbose as Javascript files. How come there no public outcry for CSS compression/combination?

There happens to be a compressor/combinator that handles CSS files, the YUI Compressor. For most web application developers, YUI Compressor is an annoying tool to use because, as a java application, it must be installed and run from the command line. Yuck!, right?

Scriptalizer, developed by ColdFusion luminary Aaron Lynch, is a web front end for the YUI compressor. Scriptalizer has handled Javascript compression/combination for a while now and is a nicely designed, easy to use tool. Aaron recently added support for CSS compression/combination. Now, dealing with CSS files is as simple as dealing with JS files.

How well does it work?

I added all 14 CSS files from The Health Challenge and compressed/combined them with Scriptalizer. Here are the results:

  • Number of Files Before: 14
  • File Size of All Files: 35.42 KB
  • Number of Files After: 1
  • File Size of All Files: 19.96 KB

As you can see, the reduction was significant. Not only have I cut the size of my CSS assets by ~50%, I have also removed 13 HTTP connections.

11355 Views Print Print Comments (10) Software Development, Wow, Javascript
del.ico.us del.icio.us Digg It! Digg It! Linking Blogs Linking Blogs

There are no comments for this entry.

Add Comment Subscribe to Comments

1/27/09 12:07 AM # Posted By Glyn Jackson

Nice post! Its not CF based or does Javascript files but a quick and easy CSS Formatter and Optimiser I used is www.cleancss.com


1/27/09 1:52 AM # Posted By JAlpino

Nice Post. Got me thinking, has anyone hooked in a compressor/minimizer task into ant?

Also, the link to "The Health Challenge" is broken


1/27/09 2:10 AM # Posted By Dan Wilson

Thanks Jalpino, I fixed thehealthchallenge.com link.

I'm not sure of an ANT task. I imagine the java class would be more useful. If you figure anything out, let me know.

DW


1/27/09 11:37 AM # Posted By ziggy

Who in his right mind has 14 css files on a page?

I find css minimization does very little and is not worth the trouble. Usually breaks on any weird css hacks too.


1/27/09 1:45 PM # Posted By Peter Boughton

>> Usually breaks on any weird css hacks too.

You shouldn't be using weird css hacks.

*If* you *must* use browser-specific hacks, they belong in a distinct file which is conditionally loaded for that browser only, and not part of the main css styles.


1/27/09 10:39 PM # Posted By Aaron Lynch

Nice results Dan!

Glad to hear you are finding Scriptalizer useful, and thanks for the mention.

Aaron


1/28/09 9:59 AM # Posted By ziggy

>>You shouldn't be using weird css hacks.

Actually, I should be using whatever works best, and one weird hack does work well for me. But I agree in general and load the IE stuff via conditional comments.

>>conditionally loaded for that browser only

Never heard of that for other browsers beyond IE. Can you share?


1/28/09 11:45 AM # Posted By Peter Boughton

Hacks are named as such for a reason - they are not the recognised/recommended method, and usually break after upgrades.




> Never heard of that for other browsers beyond IE. Can you share?

You're referring to the HTML conditional comments that IE supports?
It is only IE afaik - for other browsers you have to make do with <cfif cgi.user_agent ... >...</cfif> not ideal, but you get less browser spoofing there, so less of an issue.
And less non-IE browser-specific stuff to worry about too.


9/8/09 12:01 PM # Posted By css

CSS ( Cascading Style Sheets ) - Why CSS ? - Introduction - Css Link Properties / Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design

http://www.css-lessons.ucoz.com/


2/21/11 8:04 AM # Posted By eKoder

There is one more tool for js compression http://www.webrankstats.com/tools/javascript-compr...
and for css compression http://www.webrankstats.com/tools/css-compressor/


Add Comment Subscribe to Comments

BlogCFC was created by Raymond Camden. This blog is running version 5.9.5.004. Contact Blog Owner