CSS Compression

motlive · #1 May 1st, 2007, 16:13

Hi All,

I have just spent the last few hours trying to figure out how to optimise my css server side every time the page is called, and i think ive finally got it working.

however does anyone know the benefits and speed of doing it manually (removing whitespace, tabs and carriage returns) or having a script do it for you server side?

craig · #2 May 1st, 2007, 16:28

Generally i don't see the point in trying to compress around 7kb of data to 4kb of data. It really seems negligable to me.

motlive · #3 May 1st, 2007, 16:34

it has the benefit of not being easy to read, and also when dealing with mobile content is best to break it down as much as possible.

so instead of seeing:

Code: Select all

body {
margin:0;
padding: 0;
height: 0;
width: 0;
z-index; 0px;
border: 300px solid black;
background-image: url('mypicture.png');
}

div {
margin:0;
padding: 0;
height: 0;
width: 0;
z-index; 0px;
border: 300px solid black;
background-image: url('mypicture.png');
}

you get:

Code: Select all

body {margin:0;padding: 0;height: 0;width: 0;z-index; 0px;border: 300px solid  black;background-image: url('mypicture.png');}div {margin:0;padding: 0;height:  0;width: 0;z-index; 0px;border: 300px solid black;background-image:  url('mypicture.png');}

what ive done is that i see it as the first example when editing but when people view it in a browser they see it like the 2nd example.

craig · #4 May 1st, 2007, 16:42

Why is not being easy to read a benefit?

Code should be human readable. If you're worried about copyright, there isn't much you can do about it, if someone really wants to use your code they will, whether it's in one long line or not.

And why is it best for mobile content like that?

If you are going to be designing for mobiles too then create a different CSS stylesheet tailored to that platform.

motlive · #5 May 1st, 2007, 16:49

its something that ive seen google do, and when it comes to mobile content even a few kb can save time and money.

http://www.google.com/ig/mobile

craig · #6 May 1st, 2007, 16:57

From what I can see, thats just inline CSS, there's no style sheet being called :s

Ryan Fait · #7 May 1st, 2007, 17:14

Quote:

Originally Posted by motlive

its something that ive seen google do, and when it comes to mobile content even a few kb can save time and money.

http://www.google.com/ig/mobile

Google probably does it because they have 10000000000 TB of bandwidth per day. There is no need for you to compress your CSS.

snow · #8 May 2nd, 2007, 00:27

Quote:

optimise my css server side every time the page is called

That sounds like it's putting you'd be putting more of a strain on your server rather than any benefit to the client.

motlive · #9 May 2nd, 2007, 06:21

yep thats the conclusion i came to. nice waste of an afternoon

Ryan Fait · #10 May 2nd, 2007, 11:06

Haha, it would take a HUGE style sheet to make a server blink.

motlive · #11 May 2nd, 2007, 11:13

yep

and mine is about 200 lines or so.

i have seen a css sheet which was over 2000 lines long :S that was a little scary.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Compression