Compressing CSS

HTML & CSS
1

Sitepoint Members,
Can a CSS file be compressed at home, and the compressed CSS file placed on your site so that it will be understood as compresed when analysis tools check the file?

Thanks,

Chris

2

Ah thank you for the info, nice resources too!

3

That’s the sane way of doing it.

Minifying is important to protect users (15%) from their bad choices of software (which tampers the Accept-Encoding header due to lazy coding) cf.:

http://assets.en.oreilly.com/1/event/29/Beyond%20Gzipping%20Presentation.pdf

and to save bandwidth on severs, because those 15% have a huge footprint.

Concerning the reduction on file size (and the “proportional” download time), these are the gains, cf. Reducing the payload: compression, minification, 204s / Stoyan’s phpied.com:

  • minification -> 30%
  • compression (gzip) -> 70%
  • minification + compression -> 80%

Yes, it improves speed, not so much the total speed, because most content is already compressed (images), but it is very important for perceptual speed, because minification + compression makes the page start to render more quickly, as the browser needs the html (to get the css and images) and the css (to get the background images).

Concerning actual speed gains, you can see / test that for your specific case here:

WebPagetest - Website Performance and Optimization Test

4

Couldn’t agree more.
Happened recently that a coo-worker (lucky them I don’t know who they are) was insistently minifying large CSS files while I was working on them. 5000 lines of poor and disorganized but at least properly indented code became 1400 of pure nightmare. Even automatic indentation was breaking the CSS. I cursed over and over.

So once development is finished you could keep an indented local copy and minify everything for deployment. I heard this improves speed but… is it really appreciable?

5

LP,
I wouldn’t normally bother but page speed was saying it wasn’t compressed so I tried to compress it.

Thanks,

Chris

6

What part of spending 7 seconds to compress and download a measly 2000 bytes is supposed to make sense?

No, that doesn’t make any sense at all.

7

DS60,
They said engaging compression on such a small file (2kb) does slow the loading of the site (from 1 to 7 seconds). Does that sound right to you?

Chris

8

Curiously there is also a way of further compressing JPEGs (30% file size reduction) without noticeable visual degradation, fully compatible with existing JPEG decoders and fast (0.2 seconds for typical images on a pentium pc), cf.:

It is also claimed that this algorithm achieves the maximum compression that JPEG encoders fully compatible with existing JPEG decoders can achieve.

Now this has a huge impact: a 30% reduction on bandwidth bill for servers and users.

Unfortunately photoshop does not have it. By the way do someone know if there’s a software on the market implementing this algorithm?

9

If you’re asking what I think you’re asking, the short answer is yes. Spacing, indenting, commenting, etc are strictly for the designer/developer.

10

Short answer: Yes.
Long answer: Yessssssssss.

CSS comments, whitespace etc are completely ignored by the CSS parser… they’re mainly used for organization. And the browser doesn’t care if your CSS is nicely formatted or all smashed together (minified) as long as it doesn’t contain any errors.

11

Thanks

12

I think it depends on what you mean by ‘compressed’ – if you mean that white-space stripping or minification asshattery everyone seems to be talking about WASTING TIME DOING, then yes.

If you mean gzip compression, the actual useful compression – what tools like the Web Developer Toolbar for FF look for in the document size analysis (which now only works properly in FF 3.5/lower), then no, you have to configure the server to do that.

99% of the time you see minification/white-space stripping in practice, it’s to cover up half-assed coding practices and/or needless bloat that the developer isn’t smart enough to actually fix. IMHO any ‘analysis tool’ that looks for white-space as bad deserves a serious pimp-slap; as do most developers who practice it! Instead of fixing fat bloated code, they just vomit up even fatter bloated code and then strip formatting? Idiocy.

13

DS60,
Thanks for writing. So is there a way to Gzip (or similar) .css at home and then load it on to my site?

Thanks,

Chris

14

Your server will do this work for you, just needs to be set up. Can be as simple as adding a few lines of code to your .htaccess file. See here for instructions on how: Optimization with GZIP Compression.

15

TheRaptor,
My site is webhosted, so I have no control of the server, besides the server compresses all of my pages except the css file. I asked my webhost and they said the server is choosing not to compress it.

Thanks,

Chris

16

Find a better host

– or, do they allow .htaccess? If so, just add:


<ifmodule mod_deflate.c> 
AddOutputFilterByType DEFLATE text/css
</ifmodule>

Might help to check other file types and add their mime-types too… text/javascript and application/javascript for example. AddOutputFilterByType lets you just keep adding them to the end space delimited.

AddOutputFilterByType DEFLATE text/css text/html text/css text/javascript application/javascript text/xml application/xml

Do NOT waste time trying to add images – usually they barely compress at all, and sucks down a lot of cpu for nothing. The major image formats (jpeg, png, gif) already have compression in their file formats, so trying to compress again is just a waste of time. Now if you were talking BMP, TIFF or TGA…

Though really if they aren’t sending text/css compressed and don’t let you turn that on or off… they’re retards and you need better hosting… hell if they didn’t suggest the above .htaccess they’re probably not qualified to be running a hosting plan!

But no, there is nothing you can do to the file on your end to make it be served that way from the server — it’s a server side setting.

Well, actually that’s NOT true – you can wrap it in PHP and use it’s mod_deflate/gzip buffer – but then you lose it being CACHED and it consumes more bandwidth and CPU time than just sending the file uncompressed… defeating the point. Anything that’s plaintext – html, css, javascript – compresses quickly and like crazy because 99% of it is typically ascii7… and 95% of it could be expressed using only 5 bits…

17

DS60,
put that text/css code in. Bluehost had me do it using their optimize button in their control panel. Their server for my site automatically compresses most of my site, when you use their optimize feature, it compresses files you choose in addition to what the server normally automatically compresses - had to call them to make sure. It appears the change takes a few hours to kick in.

Thanks for the help DS60,

Chris

18

Bluehost – that explains a lot. Sub $10 hosting is usually a bad thing.

19

DS60,
You get what you can afford. Who do you suggest for a webhost?

Thanks,

Chris