0

I have a CSS file which styles the entire page, and it's getting Gzipped and it's minified, but it's still 200kb. Is there anything else I can do?

Charlie
  • 11,380
  • 19
  • 83
  • 138
  • 13
    200KB? What on earth is in there? I very much suspect that you have other issues to address if the file is really this large. – John Parker Feb 13 '11 at 17:22
  • same question. What is in there? You should get rid of repetitive statements, define some general classes for some behaviors... – Andreyco Feb 13 '11 at 17:25
  • and also, you could take a look @ css validator => http://jigsaw.w3.org/css-validator/ – stecb Feb 13 '11 at 17:30
  • cleancss.com must help you :) – Bobo Feb 13 '11 at 17:31
  • 1
    It's it's 200KB *after being gzipped*, that means it must be *freaking massive* before being gzipped. Are you sure you have your numbers right here? – thirtydot Feb 13 '11 at 17:54
  • I have a webapp for the iPad and it's basically all HTML and JS, but to make it look good I use css (of course). Now I have no idea if this is bad practice but I have small images and use data urls to reduce callbacks to the server, but it adds space to the css. Could that be the problem? – Charlie Feb 13 '11 at 18:04
  • Yea, as I suspect, it is the data urls... – Charlie Feb 13 '11 at 18:09

1 Answers1

8

I took at look at your profile and found www.charliecarver.me, took a look at that and found a css file. If this is your website and the css file you are talking about, you repeat a lot of statements. For example, line 1 to 13 of your css file looks like this:

body {
/** css code... **/
}

Line 15 to 17 looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td {
/** css code... **/
}

Line 432 to 434:

html>body #content {
/** css code... **/
}

Line 826 to 828:

body,td,th,.metadata a:link,.metadata a:visited,.navigation a:link,.navigation {
/** css code... **/
}

All that could be done with one block of code referencing the body. So, Reduce the amount of repeats you have. Just to give you an idea of what's repeating:

The elements:

  • "div" appears 35 times
  • "dt" appears 50 times
  • "dd" appears 30 times
  • "ol" appears 49 times
  • "li" appears 6 times
  • "yui" appears 315 times

Also, using only what you need will greatly reduce the size.

Shaz
  • 15,637
  • 3
  • 41
  • 59
  • Not that site haha, my other one. But thank you for taking the time to look at my site and help me out. Very good. – Charlie Feb 13 '11 at 18:02
  • Sure thing. If you do it on one site you're probably bound to do it on another. So just keep in mind the above and the size of your css files should shrink accordingly. – Shaz Feb 13 '11 at 18:09
  • Ok, thanks. On my other site the problem is data urls which was making the file huge. Guess I should take them out. – Charlie Feb 13 '11 at 18:10
  • If you don't care much for readability you could leave them in there. I'm not 100% sure on this, but I believe direct linking to image files takes two http requests, while data:uri's only take one. Still, if you want to reduce the size of your css files, using data:uri's are not the way to go. ;) – Shaz Feb 13 '11 at 18:19
  • Right, so I have to decide between a bigggggg css file with data urls but having my site only make 4 requests, as opposed to like 14 requests and having a small css file. What do you think is better? – Charlie Feb 13 '11 at 18:37
  • @Charlie Removing the data-urls for larger well-cachable items. Browsers have handled this fine for years. –  Feb 13 '11 at 18:39
  • Yes. Even if you have two images and combine it into one. That's 2 requests (I believe) instead of 4, disregarding the cache. – Shaz Feb 13 '11 at 18:48